なぜやるのか？
・フロントが好き
・なにかにチャレンジし、新しい体験をしたい
・新たな体験から、なにか新しい夢や希望をみつけたい
・経験値や技術力を高める
・wordpressのテーマのレパートリーを増やす
（随時編集）
せっかくなのでざっくりルールを作る
・知らない領域に挑戦する
・おしゃれなサイトを意識
・なるべくレスポンシブwebデザインを意識
・多少矛盾しますが、上記ルールに対して無理しない（完璧を目指さないこと）
（随時編集）
webサイト作成1日目、おしゃれなWEBサイトによくある背景が動画なトップのサイトを作成
・Bootstrapを使用します
・レスポンシブwebデザインを意識
・背景に動画を挿入し、動画を自動再生させて、音は無音、動画はループさせます
・動画については以下フリーのサイトからダウンロードしました
https://mazwai.com/video/goomalling-storm/455092
・CSSは記述量が少ないため、htmlに直接かきます
コーディングしたWEBサイトが以下の通り
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="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>
<div class="container-fluid">
<div class="row no-gutters mt-3">
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">ホーム</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">背景動画</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">チャレンジ</a>
</div>
<h2 class="text-center">ここから下に動画背景↓↓↓</h1>
</div>
<video src="goomalling-storm.mp4" loop="" autoplay="" muted="" width="100%" class="bgv"></video>
<div class="container">
<div class="row video-text-box">
<div class="video-text btn btn-dark col-1.5 offset-1 text-nowrap">ボタン</div>
<div class="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のみを記述。
感想
結構たのしい。ずっといじっていられる（笑）
おしゃれなサイトとなると、もっとこうできないかな？っと繰り返し良くしたい思いが先行して
ついついこだわって作っていきたくなってしまう。
完璧主義はドツボにはまると危ないため、ここまでとしました。
ここまでみていただき、ありがとうございます。