なぜやるのか？
・フロントが好き
・なにかにチャレンジし、新しい体験をしたい
・新たな体験から、なにか新しい夢や希望をみつけたい
・経験値や技術力を高める
・wordpressのテーマのレパートリーを増やす
（随時編集）
せっかくなのでざっくりルールを作る
・知らない領域に挑戦する
・おしゃれなサイトを意識
・なるべくレスポンシブwebデザインを意識
・多少矛盾しますが、上記ルールに対して無理しない（完璧を目指さないこと）
（随時編集）
webサイト作成1日目、おしゃれなWEBサイトによくある背景が動画なトップのサイトを作成
・Bootstrapを使用します
・レスポンシブwebデザインを意識
・背景に動画を挿入し、動画を自動再生させて、音は無音、動画はループさせます
・動画については以下フリーのサイトからダウンロードしました
https://mazwai.com/video/goomalling-storm/455092
・CSSは記述量が少ないため、htmlに直接かきます
コーディングしたWEBサイトが以下の通り
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"><title>Videoタグで無音の動画を背景にしてみる</title><style>.bgv{position:absolute;}.video-text{position:relative;margin-right:10%;margin-top:50%;color:white;}.video-second-text{position:relative;margin-right:15%;margin-top:50%;color:white;}</style></head><body><divclass="container-fluid"><divclass="row no-gutters mt-3"><ahref="#"class="col-sm btn btn-primary stretched-link ml-2 mr-1">ホーム</a><ahref="#"class="col-sm btn btn-primary stretched-link ml-2 mr-1">背景動画</a><ahref="#"class="col-sm btn btn-primary stretched-link ml-2 mr-1">チャレンジ</a></div><h2class="text-center">ここから下に動画背景↓↓↓</h1></div><videosrc="goomalling-storm.mp4"loop=""autoplay=""muted=""width="100%"class="bgv"></video><divclass="container"><divclass="row video-text-box"><divclass="video-text btn btn-dark col-1.5 offset-1 text-nowrap">ボタン</div><divclass="video-second-text btn btn-info col-1.5 offset-1 text-nowrap">第2ボタン</div></div></div></body></html>完成したWEBサイト
動画ver
苦労した点
・当初動画が流れなかったが、videoタグにmuted="" を記述することによって解決しました
・レスポンシブサイトにする際のボタンの場所の工夫
・横いっぱいに動画を表示したかったためwidthは100%を記述したが、heightを記述すると横いっぱいにならなかったため、記述をせず、widthのみを記述。
感想
結構たのしい。ずっといじっていられる（笑）
おしゃれなサイトとなると、もっとこうできないかな？っと繰り返し良くしたい思いが先行して
ついついこだわって作っていきたくなってしまう。
完璧主義はドツボにはまると危ないため、ここまでとしました。
ここまでみていただき、ありがとうございます。