なぜやるのか？

　・フロントが好き
　・なにかにチャレンジし、新しい体験をしたい
　・新たな体験から、なにか新しい夢や希望をみつけたい
　・経験値や技術力を高める
　・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のみを記述。

感想

結構たのしい。ずっといじっていられる（笑）
おしゃれなサイトとなると、もっとこうできないかな？っと繰り返し良くしたい思いが先行して
ついついこだわって作っていきたくなってしまう。
完璧主義はドツボにはまると危ないため、ここまでとしました。

ここまでみていただき、ありがとうございます。