【Bootstrap】架空ECサイト作成の手順②

では、前回の続きからいきます。

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

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

www.appatwi.com

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

Section1のデザイン

まずはどういった構成になっているかですが、

Section1にはBootstrapのComponents系の機能の1つである、Carouselが使われています。

今回使用したのは、With indicatorsにあるものです。

また、画像はimagesフォルダの中のcarousel-1~3の画像を使用しています。

        <!-- カルーセルの構成 -->
        <div class="row m-5">
          <div id="c1" class="col-md-8 mx-auto carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#c1" data-slide-to="0" class="active"></li>
              <li data-target="#c1" data-slide-to="1"></li>
              <li data-target="#c1" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner mx-auto">
              <div class="carousel-item active">
                <img class="d-block w-100 img-fluid" src="images/carousel-1.jpg" alt=""  style="max-height: 430px;">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 img-fluid" src="images/carousel-2.jpg" alt=""  style="max-height: 430px;">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 img-fluid" src="images/carousel-3.jpg" alt=""  style="max-height: 430px;">
              </div>
            </div>
            <a class="carousel-control-prev" href="#c1" role="button" data-slide="prev"></span>
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#c1" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>  
        </div>
        <!-- ====================================================== -->

ほぼコピペで済むので、ポイントはあまりないですが、前回のロゴのときにもつけたclass名、 img-fluid をつけています。
これでレスポンシブ対策はOK。

また、ウィンドウ幅が大きい時には画像が大きくなりすぎるので、 row と col を使用して、 md以降は少し小さくなるように調整しています。

中央寄せの方法について、この場合は colを使用しているので mx-auto としましたが、代わりにこうしても結果は同じです。

        <div class="row m-5 justify-content-center">
          <div id="c1" class="col-md-8 carousel slide" data-ride="carousel">

justify~ の場合は親要素のclass名につけることだけ注意ですね。

これで画面幅が大きくなったとき、2:8:2で両端に余白を取ってくれます。

あとは、imgにそれぞれついている styleタグですが、これは自分のミスです。笑
Photoshopで編集する時に画像の大きさを統一しなかったためスライドするたびに画像の高さが変わっていました。

ですので、1番小さい高さの画像の高さにあわせてそれ以上大きくならないように max-height を設定しています。
これは画像の大きさが統一されていればいらないです。

では、Section1についてはこのくらいですので、次に行きましょう。

Section2のデザイン

ここで使用している機能は、

• Cards
• Buttons
• Stretched link

です。

上の2つは先ほどのCarouselと同様にどちらもComponents系の欄にあります。

Stretched link は Utilities にあります。

Cardsの使用

まずは Cards からですが、
画像のように連続したカードを並べたいので、Card decksにあるカードのタイプを使います。

ここに書いている通りで、カード同士が接触しません。

この機能を用いて、カードを4つ作成します。

        <!-- カード(New Arrival)の構成 -->
        <h2 class="heading pt-5 my-5 text-center border-top border-secondary" 
         style="line-height: 100px; vertical-align: bottom;">New Arrivals</h2>
          
        <div class="row card-deck pt-5"> <!-- カード全体を囲う-->
          <div class="col-lg-3 col-md-6"> 
            <div class="card shadow-sm mb-5 bg-white rounded">
              <img crass="w-100 img-fluid" src="images/new-arrivals-1-min.jpg" alt="" style="object-fit: cover; height: 200px;">
              <div class="card-body">
                <p class="card-text">Tops</p>
                <h5 class="card-title mb-5">¥5,500-</h5>
                <a class="stretched-link" href="">
                  <p class="text-secondary text-right m-0" style="font-size: 1.4rem;">more...></p>
                </a> 
              </div>
            </div>
          </div>

<!--上記の繰り返しを3つ-->

        <div class="row justify-content-end my-5 mr-1 border-bottom border-dark">
          <button type="button" class="btn btn-outline-secondary btn-lg mb-5 mr-5">View more</button>
        </div>
        <!-- ====================================================== -->

使っているclass名はほとんど初歩的なものなので、自由に使用すればOKをだと思います。

ここでのポイントは、 col を lg と md の両方使用していることです。

画面幅が992pxを超えたら4つのカードがすべて横並びになるようにしているため、col-3 となり、768px～991pxの間は2つずつにしたいので col-6 として、それ以下は col を解除し、カードが縦並びになるようにしています。

また、img に付いている style タグですが、これは公式からコピペした svg タグを消して代わりにこちらで height を設定したためです。

object-fit: cover; は平たく言えば、画像の自動トリミングのためのタグですね。
大きさを設定しなくても中心を捉えてくれます。

カードに関してはこんな感じです。

Buttonsの使用

Buttons はカードの下にある View more のことです。

Outline buttons　を使用しています。

あとは、余白と位置調整を使って好きな場所に移動したらOK。

Stretched linkの使用

Stretched link は親要素に内包されている aタグのclass名につけるだけで、その親要素の内部にあるものを aタグで覆ってくれる便利な機能。

先ほどのHTMLの場合 aタグがカード全体を覆ってくれているので別ページに遷移しやすくなっています。

また、このとき more にアンダーラインがでるようにするのは別途スタイルの記述が必要です。

    .card-body > a:hover > p {
      text-decoration: underline #6c757d;
    }

Section2に関しては以上です。

おわりに

今回はSection1と2のデザインについてでした。

使った機能は、

• Carousel
• Cards
• Buttons
• Stretched link

です。

個人的にはCarouselとCardsのレスポンシブをどうしようか、というところで苦戦しましたが、なんとかきれいに収まりました。

次はSection3と4についてです。

それでは