【OBS】配信用の時計を簡単に自作！初心者でもできる配信素材の作り方　サンプル付き

OBSの配信画面に表示できる「時計」を自作してみよう！ 今回は、HTML・CSS・JavaScriptを使って、OBSで使えるシンプルな時計を作ります。 「プログラミングを全部覚える」ことよりも、まずは実際に作って動かしてみることを重視しています。 Visual Studio Codeの準備から、時計の作成、OBSへの追加、文字サイズや色の変更まで、初心者の方でも試せるように順番に解説します。 コードは配布データにも入れているので、全部手入力する必要はありません。 配布しているコードは自由に使用・改変していただいてOKです！ 自分の配信に合わせて、色・サイズ・フォントなどを自由にカスタマイズしてみてください。 【配布データ】 https://1drv.ms/f/c/e31711897d046f6d/... 配布データには、動画で作った基本の時計以外にも、 ・影付き時計 ・秒なし時計 ・日付／曜日／時刻表示 ・日付／曜日のみ ・12時間表示 などのサンプルも入れています。 自由に改変して使ってください。 分からない変更があれば、検索したりAIに「この時計に曜日を追加したい」のように聞いたりしながら、自分好みの配信素材にしてみてください！ 【お借りしたもの】 音声：VOICEVOX:四国めたん イラスト：いらすとや 様／イラストAC 様 効果音：効果音ラボ 様 BGM：DOVA-SYNDROME 様 　　　モナカの音楽室 様    • 【フリーBGM】にゅーわーるど🌐 かわいい/ゲーム/さわやか/ポップ【作業・配信・勉...   0:00 オープニング・今回作成する時計の紹介 0:48 準備：Visual Studio Codeの導入 1:32 準備：フォルダとファイルの作成 1:53 HTMLの基本形を作成（Emmet機能） 2:37 時計を表示する場所（HTML）を作成 3:04 時計の見た目（CSS）を設定 3:48 時計を動かすプログラム（JavaScript）の追加 4:25 ファイルの保存方法 5:06 OBSへの取り込みと表示確認 5:50 OBSで更新内容を反映させる方法（キャッシュの更新） 6:26 デザインの変更（文字の大きさ、色、太さ） 7:02 文字に影をつける方法 7:32 デザインの変え方・分からないことの調べ方 8:19 まとめ・AIの活用について #OBS #OBSStudio #VTuber #YouTuber #配信者 #配信素材 #ライブ配信 #HTML #CSS #JavaScript #プログラミング