【Bootstrap】レスポンシブサイトを1時間で作ろうとしてみた【超大変】

こんにちは朱夏です。

今回はBootstrapを使ってレスポンシブサイトを1時間で作るに挑戦してみました。

朱夏

しもむらさんが1時間で作成する動画上げてるなぁ。

今の自分の実力はどんなもんか図るためにやってみるかな。

こんな軽い気持ちで挑戦することにしました。

下村さんの動画はこちらです。

結果報告

結論から言うと、めっちゃ時間かかりました。

スタート

＝＞

ゴール

5時間半かかりました・・・
平日の夜にやるもんじゃないですね。

コード

今回はほぼHTMLのみで書きました。
CSSとJavaScriptは必要最低限のコードだけです。

HTML

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>BootstrapSite</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->
   <script src="js/sample.js"></script>
   </head>
   <body class="bg-secondary">
      <!----- ヘッダー ----->
      <header>
         <nav class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
            <a class="text-light navbar-brand" href="#">Navi</a>
            <button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
               <ul class="navbar-nav">
                  <li class="nav-item active">
                     <a class="text-light nav-link" href="#">Carousel<span class="sr-only">(現位置)</span></a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#column">Column</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#flex">Flex</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#tab">Tab</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#youtube">Youtbe</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#faq">FAQ</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#card">Card</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#accordion-faq">Accordion</a>
                  </li>
                  <li class="nav-item">
                     <a class="text-light nav-link" href="#formarea">Form</a>
                  </li>
               </ul>
            </div>
         </nav>
      </header>
      <!----- ヘッダー END ----->

      <!----- メインコンテンツ ----->
      <!-- スライダー -->
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
         <!-- インジケータの設定 -->
         <ol class="carousel-indicators">
           <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
         </ol>
         <!-- スライドさせる画像の設定 -->
         <div class="carousel-inner">

            <div class="carousel-item active">
               <img class="d-block w-100 h-30" src="img/gorimeppv2IMGL7773_TP_V.jpg" alt="tool">
               <div class="carousel-caption d-none d-md-block">
                  <h5>Tools</h5>
               </div><!-- /.carousel-caption -->
            </div><!-- /.carousel-item -->

            <div class="carousel-item">
               <img class="d-block w-100 h-30" src="img/Yuu171226IMGL0035_TP_V.jpg" alt="design">
               <div class="carousel-caption d-none d-md-block">
                 <h5>Design</h5>
               </div><!-- /.carousel-caption -->
            </div><!-- /.carousel-item -->

            <div class="carousel-item">
               <img class="d-block w-100 h-30" src="img/YOSX8629_TP_V.jpg" alt="programing">
               <div class="carousel-caption d-none d-md-block">
                 <h5>Programing</h5>
               </div><!-- /.carousel-caption -->
            </div><!-- /.carousel-item -->

         </div><!-- /.carousel-inner -->
         <!-- スライドコントロールの設定 -->
         <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="h1">＜</span>
         </a>
         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="h1">＞</span>
         </a>
      </div><!-- /.carousel -->
      <!-- スライダー END -->

      <div class="container shadow bg-light py-5 my-5">
         <!-- カラムとツールチップ -->
         <div id="column">
            <h2 class="text-center p-3">Columnとツールチップ</h2>
         </div>
         <div class="row">
            <div class="col-md-4 p-2 col-12">
               <img class="img-fluid" src="img/macbook1992_TP_V.jpg" alt="mac" data-toggle="tooltip" title="Mac欲しいなぁ">
            </div>
            <div class="col-md-4 p-2 col-12">
               <img class="img-fluid" src="img/iphonexrFTHG8943_TP_V.jpg" alt="mac" data-toggle="tooltip" data-placement="bottom" title="Apple製品で統一">
            </div>
            <div class="col-md-4 p-2 col-12">
               <img class="img-fluid" src="img/harinezumiIMGL8714_TP_V.jpg" alt="mac" data-toggle="tooltip" title="ハリネズミエンジニアさん">
            </div>
         </div>
         <!-- カラムとツールチップ END -->

         <!-- Flex -->
         <div id="flex">
            <h2 class="text-center p-3">猫派　VS　犬派</h2>
         </div>

         <div class="d-flex flex-wrap-reverse justify-content-center">
            <div class="col-md-6 col-12 align-self-center h3 p-4">
               <p>猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派</p>
            </div>
            <div class="col-md-6 col-12 p-0 align-self-center">
               <img class="img-fluid" src="img/tom190303DSC03895_TP_V.jpg" alt="">               
            </div>
         </div>
         <div class="d-flex flex-wrap  justify-content-center">
            <div class="col-md-6 col-12 p-0 align-self-center">
               <img class="img-fluid" src="img/AMEMAN17826009_TP_V.jpg" alt="">               
            </div>
            <div class="col-md-6 col-12 align-self-center h3 p-4">
               <p>犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派</p>
            </div>               
         </div>
         <!-- Flex END -->

         <!-- タブナビゲーション -->
         <div id="tab">
            <h2 class="text-center pt-5">キャンプアイテム</h2>
         </div>
         <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item col-4 p-0">
               <a href="#home" class="nav-link text-center active" id="home-tab" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">テント</a>
            </li>
            <li class="nav-item col-4 p-0">
               <a href="#profile" class="nav-link text-center" id="profile-tab" data-toggle="tab" role="tab" aria-controls="profile" aria-selected="false">シュラフ</a>
            </li>
            <li class="nav-item col-4 p-0">
               <a href="#contact" class="nav-link text-center" id="contact-tab" data-toggle="tab" role="tab" aria-controls="contact" aria-selected="false">チェア</a>
            </li>
         </ul>
         <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
               <div class="col-md-8 col-12 my-5 mx-auto">
                  キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。
               </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
               <div class="col-md-8 col-12 my-5 mx-auto">
                  冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。
               </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
               <div class="col-md-8 col-12 my-5 mx-auto">
                  チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。
               </div>
            </div>
         </div>
         <!-- タブナビゲーション END -->

         <!-- youtube埋め込み -->
         <div id="youtube">
            <h2 class="text-center pt-5">今回の学習動画</h2>
         </div>
         <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fou-ZR9LhGM" allowfullscreen></iframe>
         </div>
         <!-- youtube埋め込み END -->

         <!-- モーダル -->
         <div id="faq">
            <h2 class="text-center pt-5">よくある質問</h2>
         </div>
         <div class="row justify-content-around">
            <div class="col-md-6 col-12 d-md-inline-flex d-flex">

               <!-- 切り替えボタンの設定 -->
               <div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal">
                  ここは何のサイトですか？
               </div>
               
               <!-- モーダルの設定 -->
               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                  <div class="modal-dialog" role="document">
                  <div class="modal-content">
                     <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">ここは何のサイトですか？</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                        <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div class="modal-body">
                        <p>練習用にBootstrapを使って作成したレスポンシブサイトです。</p>
                     </div>
                  </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
               </div><!-- /.modal -->               
            </div>

            <div class="col-md-6 col-12 d-md-inline-flex d-flex">

               <!-- 切り替えボタンの設定 -->
               <div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal2">
                  Bootstrapはどんな事が出来るの？
               </div>
               
               <!-- モーダルの設定 -->
               <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
                  <div class="modal-dialog" role="document">
                  <div class="modal-content">
                     <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel2">Bootstrapはどんな事が出来るの？</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                        <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div class="modal-body">
                        <p>
                           このサイトの90%はBootstrapを使用しています。<br>
                           BootstrapはWEBサイトの見た目を整える他、スライド、動画の埋め込み、レスポンシブ対応などを簡単に実装出来ます。
                        </p>
                     </div>
                  </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
               </div><!-- /.modal -->               
            </div>

            <div class="col-md-6 col-12 d-md-inline-flex d-flex">

               <!-- 切り替えボタンの設定 -->
               <div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal3">
                  犬派ですか猫派ですか？
               </div>
               
               <!-- モーダルの設定 -->
               <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3">
                  <div class="modal-dialog" role="document">
                  <div class="modal-content">
                     <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel3">犬派ですか猫派ですか？</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                        <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div class="modal-body">
                        <p>
                           どっちも好きです。<br>
                           しかしアレルギーがあるのであまり近寄れません（T_T）
                        </p>
                     </div>
                  </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
               </div><!-- /.modal -->               
            </div>

            <div class="col-md-6 col-12 d-md-inline-flex d-flex">

               <!-- 切り替えボタンの設定 -->
               <div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal4">
                  キャンプはどのくらい行くんですか？
               </div>
               
               <!-- モーダルの設定 -->
               <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4">
                  <div class="modal-dialog" role="document">
                  <div class="modal-content">
                     <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel4">キャンプはどのくらい行くんですか？</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                        <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div class="modal-body">
                        <p>
                           キャンプは月に１、２回行きます。<br>
                           最近は無料のキャンプ場で節約キャンプしています。<br>
                           自然の中でコードとかブログ書いて生活するのが夢ですね。
                        </p>
                     </div>
                  </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
               </div><!-- /.modal -->               
            </div>

         </div>
         <!-- モーダル END -->

         <!-- カード -->
         <div id="card">
            <h2 class="text-center pt-5">沼カード</h2>
         </div>
         <div class="row">

            <div class="col-md-4 col-12 my-2">
               <div class="card img-thumbnail">
                  <img class="card-img-top" src="img/XEN7615002_TP_V.jpg" alt="沼１">
                  <div class="card-body px-2 py-3">
                  <h5 class="card-title">カメラ沼</h5>
                  <p class="card-text">レンズ１つで数万～数十万。本体はもっとする。はまるとストロボやらレフ板やら揃えだす。</p>
                  <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a>
                  </div><!-- /.card-body -->
               </div><!-- /.card -->
            </div>

            <div class="col-md-4 col-12 my-2">
               <div class="card img-thumbnail">
                  <img class="card-img-top" src="img/SONYPAKU7898_TP_V.jpg" alt="沼２">
                  <div class="card-body px-2 py-3">
                  <h5 class="card-title">オーディオ沼</h5>
                  <p class="card-text">音質に命を懸ける。良いスピーカー、いいプレイヤー、いいケーブル。ノイズが乗らない配線とかにこだわりだしたら末期。</p>
                  <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a>
                  </div><!-- /.card-body -->
               </div><!-- /.card -->
            </div>

            <div class="col-md-4 col-12 my-2">
               <div class="card img-thumbnail">
                  <img class="card-img-top" src="img/gacyaagacya0I9A2343_TP_V.jpg" alt="沼３">
                  <div class="card-body px-2 py-3">
                  <h5 class="card-title">ソシャゲ沼</h5>
                  <p class="card-text">お金と時間両方持ってかれるやばいやつ。気付いたら夜が明けてる。</p>
                  <p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a>
                  </div><!-- /.card-body -->
               </div><!-- /.card -->
            </div>
         
         </div>
         <!-- カード END -->

         <!-- アコーディオン -->
         <div id="accordion-faq">
            <h2 class="text-center p-3">追加の質問</h2>
         </div>

         <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">

            <!-- FAQ1 -->
            <div class="card">
               <div class="card-header" role="tab" id="headingOne">
                  <h5 class="mb-0">
                     <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
                        Q1:一つ目の質問です
                     </a>
                  </h5>
               </div>
               <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
                  <div class="card-body">
                     A1:一つ目の質問の答えです
                  </div>
               </div>
            </div>
            <!-- FAQ1 END -->

            <!-- FAQ2 -->
            <div class="card">
               <div class="card-header" role="tab" id="headingTwo">
                  <h5 class="mb-0">
                     <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
                        Q2:二つ目の質問です
                     </a>
                  </h5>
               </div>
               <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
                  <div class="card-body">
                     A2:二つ目の質問の答えです
                  </div>
               </div>
            </div>
            <!-- FAQ2 END -->

            <!-- FAQ3 -->
            <div class="card">
               <div class="card-header" role="tab" id="headingThree">
                  <h5 class="mb-0">
                     <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
                        Q3:三つ目の質問です
                     </a>
                  </h5>
               </div>
               <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
                  <div class="card-body">
                     A3:三つ目の質問の答えです
                  </div>
               </div>
            </div>
            <!-- FAQ3 END -->

            <!-- FAQ4 -->
            <div class="card">
               <div class="card-header" role="tab" id="headingFour">
                  <h5 class="mb-0">
                     <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseFour" role="button" aria-expanded="false" aria-controls="collapseFour">
                        Q4:四つ目の質問です
                     </a>
                  </h5>
               </div>
               <div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordion">
                  <div class="card-body">
                     A4:四つ目の質問の答えです
                  </div>
               </div>
            </div>
            <!-- FAQ4 END -->

            <!-- FAQ5 -->
            <div class="card">
               <div class="card-header" role="tab" id="headingFive">
                  <h5 class="mb-0">
                     <a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseFive" role="button" aria-expanded="false" aria-controls="collapseFive">
                        Q5:五つ目の質問です
                     </a>
                  </h5>
               </div>
               <div id="collapseFive" class="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordion">
                  <div class="card-body">
                     A5:五つ目の質問の答えです
                  </div>
               </div>
            </div>
            <!-- FAQ5 END -->

         </div>
         <!-- アコーディオン END -->

         <!-- フォーム -->
         <form class="needs-validation" novalidate>
            <div class="form-row">
              <div class="col-md-5 mb-3">
                <label for="validationCustom01">*苗字</label>
                <input type="text" class="form-control" id="validationCustom01" required>
                <div class="invalid-feedback">
                  ※必須項目です
                </div>
              </div>
              <div class="col-md-5 mb-3">
                <label for="validationCustom02">*名前</label>
                <input type="text" class="form-control" id="validationCustom02" required>
                <div class="invalid-feedback">
                  ※必須項目です
                </div>
              </div>
              <div class="col-md-5 mb-3">
                <label for="validationCustomUsername">*ユーザーID</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                  </div>
                  <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                  <div class="invalid-feedback">
                    ※必須項目です
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3 col-12 mb-3 px-0">
               <label for="validationCustom03">*都道府県</label>
               <select class="custom-select" id="validationCustom04" required>
                  <option selected disabled value="">--都道府県--</option>
                  <option value="北海道">北海道</option>
                  <option value="青森県">青森県</option>
                  <option value="岩手県">岩手県</option>
                  <option value="宮城県">宮城県</option>
                  <option value="秋田県">秋田県</option>
                  <option value="山形県">山形県</option>
                  <option value="福島県">福島県</option>
                  <option value="茨城県">茨城県</option>
                  <option value="栃木県">栃木県</option>
                  <option value="群馬県">群馬県</option>
                  <option value="埼玉県">埼玉県</option>
                  <option value="千葉県">千葉県</option>
                  <option value="東京都">東京都</option>
                  <option value="神奈川県">神奈川県</option>
                  <option value="新潟県">新潟県</option>
                  <option value="山梨県">山梨県</option>
                  <option value="長野県">長野県</option>
                  <option value="富山県">富山県</option>
                  <option value="石川県">石川県</option>
                  <option value="福井県">福井県</option>
                  <option value="岐阜県">岐阜県</option>
                  <option value="静岡県">静岡県</option>
                  <option value="愛知県">愛知県</option>
                  <option value="三重県">三重県</option>
                  <option value="滋賀県">滋賀県</option>
                  <option value="京都府">京都府</option>
                  <option value="大阪府">大阪府</option>
                  <option value="兵庫県">兵庫県</option>
                  <option value="奈良県">奈良県</option>
                  <option value="和歌山県">和歌山県</option>
                  <option value="鳥取県">鳥取県</option>
                  <option value="島根県">島根県</option>
                  <option value="岡山県">岡山県</option>
                  <option value="広島県">広島県</option>
                  <option value="山口県">山口県</option>
                  <option value="徳島県">徳島県</option>
                  <option value="香川県">香川県</option>
                  <option value="愛媛県">愛媛県</option>
                  <option value="高知県">高知県</option>
                  <option value="福岡県">福岡県</option>
                  <option value="佐賀県">佐賀県</option>
                  <option value="長崎県">長崎県</option>
                  <option value="熊本県">熊本県</option>
                  <option value="大分県">大分県</option>
                  <option value="宮崎県">宮崎県</option>
                  <option value="鹿児島県">鹿児島県</option>
                  <option value="沖縄県">沖縄県</option>
               </select>
               <div class="invalid-feedback">
                  ※必須項目です
                </div>
             </div>
            <div class="form-row">
               <div class="col-md-6 col-12 mb-3">
                  <label for="validationCustom04">*住所</label>
                  <input type="text" class="form-control" id="validationCustom03" required>
                  <div class="invalid-feedback">
                     ※必須項目です
                   </div>
               </div>
            </div>
            <div class="form-group">
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                  <label class="form-check-label" for="invalidCheck">
                     *同意する
                  </label>
                  <div class="invalid-feedback">
                     ※チェックを入れてください。
                  </div>
               </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit form</button>
          </form>
         <!-- フォーム END -->

      </div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <div class="row">
            <!-- プロフィール -->
            <div class="col-lg-4 p-5">
               <h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>
               <div class="p-3">
                  <img class="img-fluid rounded-circle" src="img/snap1.jpg" alt="">
               </div>
               <div class="text-center">
                  <h4 class="d-inline-block border-bottom border-info text-light">朱夏</h4>
               </div>
               <p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
            <!-- プロフィール END -->

            <!-- テキストリンク -->
            <div class="col-lg-4 p-5 border-secondary border-right border-left">
               <h4 class="font-weight-bolder text-center text-light border-bottom">ポートフォリオ</h4>
               <div class="py-3">
                  <ul class="text-light">
                     <li><a class="text-light" href="https://syunatsu.work/Mytheme/">WordPressテーマ</a></li>
                     <li><a class="text-light" href="https://syunatsu.work/">ブログ</a></li>
                  </ul>
               </div>
            </div>
            <!-- テキストリンク END -->

            <!-- テキスト -->
            <div class="col-lg-4 p-5">
               <h4 class="font-weight-bolder text-center text-light border-bottom">テキスト</h4>
               <div class="py-3">
                  <a class="twitter-timeline" data-height="500" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
               </div>
            </div>
            <!-- テキスト -->
         </div>
         <p class="bg-dark text-light p-0 m-0 text-center">(c)202002@syunatsu1</p>
      </footer>
      <!----- フッター END ----->
   </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

<!DOCTYPE html>

<head>

<title>BootstrapSite</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

</button>

<a class="text-light nav-link" href="#">Carousel<span class="sr-only">(現位置)</span></a>

</li>

<a class="text-light nav-link" href="#column">Column</a>

</li>

</li>

</li>

<a class="text-light nav-link" href="#youtube">Youtbe</a>

</li>

</li>

</li>

<a class="text-light nav-link" href="#accordion-faq">Accordion</a>

</li>

</li>

</ul>

</div>

</nav>

</header>

</ol>

<h5>Tools</h5>

</div>

</div>

<h5>Design</h5>

</div>

</div>

<h5>Programing</h5>

</div>

</div>

</div>

</a>

</a>

</div>

<h2 class="text-center p-3">Columnとツールチップ</h2>

</div>

</div>

</div>

</div>

</div>

<p>猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派</p>

</div>

</div>

</div>

<p>犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派</p>

</div>

<h2 class="text-center pt-5">キャンプアイテム</h2>

</div>

</li>

</li>

</li>

</ul>

キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。

</div>

冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。

</div>

チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。

</div>

<h2 class="text-center pt-5">今回の学習動画</h2>

</div>

</div>

<h2 class="text-center pt-5">よくある質問</h2>

</div>

ここは何のサイトですか？

</div>

<h5 class="modal-title" id="exampleModalLabel">ここは何のサイトですか？</h5>

</button>

</div>

<p>練習用にBootstrapを使って作成したレスポンシブサイトです。</p>

</div>

</div>

</div>

</div>

</div>

Bootstrapはどんな事が出来るの？

</div>

<h5 class="modal-title" id="exampleModalLabel2">Bootstrapはどんな事が出来るの？</h5>

</button>

</div>

<p>

このサイトの90%はBootstrapを使用しています。<br>

BootstrapはWEBサイトの見た目を整える他、スライド、動画の埋め込み、レスポンシブ対応などを簡単に実装出来ます。

</p>

</div>

</div>

</div>

</div>

</div>

犬派ですか猫派ですか？

</div>

<h5 class="modal-title" id="exampleModalLabel3">犬派ですか猫派ですか？</h5>

</button>

</div>

<p>

どっちも好きです。<br>

しかしアレルギーがあるのであまり近寄れません（T_T）

</p>

</div>

</div>

</div>

</div>

</div>

キャンプはどのくらい行くんですか？

</div>

<h5 class="modal-title" id="exampleModalLabel4">キャンプはどのくらい行くんですか？</h5>

</button>

</div>

<p>

キャンプは月に１、２回行きます。<br>

最近は無料のキャンプ場で節約キャンプしています。<br>

自然の中でコードとかブログ書いて生活するのが夢ですね。

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="card-text">レンズ１つで数万～数十万。本体はもっとする。はまるとストロボやらレフ板やら揃えだす。</p>

</div>

</div>

</div>

<h5 class="card-title">オーディオ沼</h5>

<p class="card-text">音質に命を懸ける。良いスピーカー、いいプレイヤー、いいケーブル。ノイズが乗らない配線とかにこだわりだしたら末期。</p>

</div>

</div>

</div>

<h5 class="card-title">ソシャゲ沼</h5>

<p class="card-text">お金と時間両方持ってかれるやばいやつ。気付いたら夜が明けてる。</p>

</div>

</div>

</div>

<h2 class="text-center p-3">追加の質問</h2>

</div>

Q1:一つ目の質問です

</a>

</h5>

</div>

A1:一つ目の質問の答えです

</div>

Q2:二つ目の質問です

</a>

</h5>

</div>

A2:二つ目の質問の答えです

</div>

Q3:三つ目の質問です

</a>

</h5>

</div>

A3:三つ目の質問の答えです

</div>

Q4:四つ目の質問です

</a>

</h5>

</div>

A4:四つ目の質問の答えです

</div>

Q5:五つ目の質問です

</a>

</h5>

</div>

A5:五つ目の質問の答えです

</div>

</div>

※必須項目です

</div>

※必須項目です

</div>

<label for="validationCustomUsername">*ユーザーID</label>

</div>

※必須項目です

</div>

</select>

※必須項目です

</div>

※必須項目です

</div>

*同意する

</label>

※チェックを入れてください。

</div>

<button class="btn btn-primary" type="submit">Submit form</button>

</form>

</div>

<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>

</div>

</div>

<p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

<h4 class="font-weight-bolder text-center text-light border-bottom">ポートフォリオ</h4>

<li><a class="text-light" href="https://syunatsu.work/Mytheme/">WordPressテーマ</a></li>

</ul>

</div>

<a class="twitter-timeline" data-height="500" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

</div>

</footer>

</body>

</html>

CSS

.carousel-item img {
    height: 500px;
    object-fit: cover;
}

.carousel-item img {

height: 500px;

object-fit: cover;

}

JavaScript

(function() {
    window.addEventListener("load", function() {
       $('[data-toggle="tooltip"]').tooltip();
    });
 })();

 (function() {
   'use strict';
   window.addEventListener('load', function() {
     // Fetch all the forms we want to apply custom Bootstrap validation styles to
     var forms = document.getElementsByClassName('needs-validation');
     // Loop over them and prevent submission
     var validation = Array.prototype.filter.call(forms, function(form) {
       form.addEventListener('submit', function(event) {
         if (form.checkValidity() === false) {
           event.preventDefault();
           event.stopPropagation();
         }
         form.classList.add('was-validated');
       }, false);
     });
   }, false);
 })();