【Bootstrap】架空ECサイト作成の手順③ - あぱれる男子のつぶやき

f:id:mmmouh8845:20200214153559j:plain

では、さっそく前回の続きからいきましょう。

Bootstrapで架空サイトを作成してみる
- Section3のデザイン
- Section4のデザイン
まとめ

Bootstrapで架空サイトを作成してみる

前々回の記事では、全体像の把握とヘッダーからナビまでのデザインを、前回の記事ではSection1と2のデザインについて見ていきました。

www.appatwi.com

今回はSection3と4のデザインについてです。

f:id:mmmouh8845:20200224204914p:plain

Section3のデザイン

ここのデザインで使っている機能は少しSection2と似ていて、同じようにカードを使っていきます。

構成はこんな感じ。

    <div class="row topics card-deck pt-5 border-bottom border-dark">
     <!-- 同じ構成のカードが上に2つありますが、カットしています。 -->

          <div class="col-lg-4 col-md-6 my-5">
            <div class="card bg-dark text-white p-0 h-100">
            <!-- カードアイテムを囲うdivにh-100を指定することで、残りの3つとサイズが異なっても高さを合わせることができる -->
              <img class="cadr-img img-fluid w-100 h-100" src="images/topics-3-min.jpg" alt="" style="min-height: 470px; object-fit: cover;">
              <!-- 中身の多い3枚目のカードは中身がはみ出さない最低の高さをmin-heightで指定 -->
              <div class="card-img-overlay topic-item">
                <h5 class="card-title">
                  <b>Recommend</b><br>
                  <b>Styling</b></br>
                  <b>&</b><br>
                  <b>Item</b><br>
                  <b>Collection</b><br></h5>
                <p class="card-text my-5 py-5 py-lg-0 my-xl-5 py-xl-5"><b>ユーザーに人気の商品をスタイリングと併せてピックアップ。</b></p>
                <a href="" class="card-link stretched-link">View Now</a>
              </div>
            </div>   
          </div>
        </div> <!-- cardを囲う -->
        <!-- ========================================================== -->

ポイントはまずSection2で使ったカードの違いですが、3つ目の div を見れば違いが分かります。

card-img-overlay です。

f:id:mmmouh8845:20200224205932p:plain

このclass名を使用することでカードの背景の上に文字を重ねることができます。

そして、Section2でも使った card-deckを親要素にすることで、並んだ3つのカードがくっつかずに均等に配置されます。

その上でSection2と同様に、レスポンシブ対応すれば大体はOKです。

また、コメントでも書いてあるとおり、画像のサイズに関しては予め統一しておけば必要のないタグもあります。

これはSection1のCarouselでやったことと同じですね。

ただ、上記のコードにも書いているように高さの指定はしましょう。

2つ目のコメントにある h-100の指定はカード同士の高さを揃えるためで、カードを囲う要素に指定してあげることで、高さがバラバラになりません。

3つ目のコメントのmin-heightの指定も同様に、中身の文章がカードからはみ出さないようにするためで、記述することで、例えば中身の文章が追加されても、この設定をしておくことで、きれいに収まります。
(今回のデザインだとこのmin-heightを指定しないと、 md~lg の間で要素が画像からはみ出てしまう）

正直このあたりの指定はやっていてややこしかったので、面倒な場合は例えば各要素の高さを%指定するなどの対応をする方がシンプルになるかと思います。

また、h-100 のようなサイズの簡易的な書き方はUtilitiesのSizingの欄に書いてあります。

また、Section2と同様にStretched linkも使用しています。

f:id:mmmouh8845:20200224211322p:plain

こちらはhover時に半透明になるように設定。

Section3に関してはこれくらいです。

Section4のデザイン

では次にSection4のデザインです。

これは簡単です。

ムービーを使用していますが、Bootstrapの機能はムービー用に便利なものが用意されています。

まずは構成から。

        <!-- ムービーの構成 -->
        <h2 class="heading py-5 my-5 text-center" style="line-height: 100px; vertical-align: bottom;">Movies</h2>

        <div class="row no-gutters pb-5 border-bottom border-dark">
          <div class="col-lg-5 ml-lg-auto mr-lg-4 embed-responsive embed-responsive-16by9">
            <video src="moves/move-1.mp4" controls autoplay muted playsinline></video>
          </div>

          <div class="col-lg-5 mr-lg-auto ml-lg-4  mt-5 pt-5 mt-lg-0 pt-lg-0 embed-responsive embed-responsive-16by9">
            <video src="moves/move-2.mp4" controls></video>
          </div>
        </div>
        <!-- ========================================================== -->