【Bootstrapその⑫】グリッドシステムを自由に使ってみる【学習積み上げ】

勉強しだしたらつい深掘ってしまう、マサです。

Bootstrapもほぼ終盤まで来ました。

前回の記事でBootstrapのグリッドシステムについて細かいところまで深堀りましたので、今回はもう少し実践で使える機能についてピックアップして紹介してみます。

www.appatwi.com

ちなみに前回はcontainerとrowの関係がメインでした。

では、早速続きを見ていきましょう！

グリッドシステムを自由に使うには

記述を追加したり、指定のclass名を用いたりすることで自由度の高い配置や余白、順序を変えて並べることができます。

順に説明していきます。

グリッドで入れ子のスタイルを作る

グリッドレイアウトにするには、div.containerの中にdiv.row更にその下にdiv.col1~12をいれるというのが基本のスタイルですね。これは以前やりました。

www.appatwi.com

ですが、この階層は1つのコンテナ内の内部要素を12個に分割してcolの比率で表示するというものなので、単調にならざるをえません。

そこで、新たな要素を入れ子にすることで分割したコンテナの更に内部まで分割することができます。

これを使えばよく見るホームページの構成をすぐに作ることができるので、非常に便利です。

例えば、

  <div class="container my-5">
    <div class="row">
      <div class="col-12" style="background-color: #333; height: 40px; color: #fff">header</div>
    </div>
    <div class="row">
      <div class="col-12" style="background-color: #f88; height: 300px;"><h1>topics</h1></div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #888; height: 500px;">sidemenu</div>
      <div class="col-9" style="background-color: #fff; height: 500px;">
        <h2 style>main</h2>
        <div class="row">
          <div class="col-4" style="background-color: #49a; height: 100px;">card</div>
          <div class="col-4" style="background-color: #49b; height: 100px;">card</div>
          <div class="col-4" style="background-color: #49c; height: 100px;">card</div>
          <div class="col-4" style="background-color: #49d; height: 100px;">card</div>
          <div class="col-4" style="background-color: #49e; height: 100px;">card</div>
          <div class="col-4" style="background-color: #49f; height: 100px;">card</div>
          <div class="col-12" style="background-color: #8a4; height: 300px;">news</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12" style="background-color: #fff; height: 300px;">contact</div>
    </div>
    <div class="row">
      <div class="col-12" style="background-color: #333; height: 40px; color: #fff;">footer</div>
    </div>
  </div>

少し要素が多くなりましたが画像を見ていただければ分かりやすいかと思います。

ちょうど真ん中の要素ですがcolを3と9に分割して、sidemenuとmainに分けています。
更にそのmainの中を4:4:4のcardとcol-12のnewsに分けました。

この記述だけで終わるのでかなり便利ですよね。

ちょっとcontactが雑になったかな、、こんなホームページ構成はない！とは言わないでくださいね笑

始まる位置や高さを変えてみる

これはflex-boxが分かっていれば簡単かもしれません。

指定するときに使うのは、justify-contentとalign-itemsとalign-selfの3つです。

これに、-strat、-center、-endを付け足すことで、どこから始まるかを指定できます。

それぞれ指定したものがコチラ。

  <div class="container border border-dark">
    <div class="row justify-content-start">
      <div class="col-3" style="height: 80px; background: #f88;">box1</div>
      <div class="col-3" style="height: 80px; background: #f66;">box2</div>
    </div>
  
    <div class="row  justify-content-center">
      <div class="col-2" style="height: 80px; background: #88f;">box3</div>
      <div class="col-2" style="height: 80px; background: #66f;">box4</div>
      <div class="col-2" style="height: 80px; background: #44f;">box5</div>
    </div>

    <div class="row justify-content-end">
      <div class="col-3" style="height: 80px; background: #d2d2d2;">box6</div>
      <div class="col-3" style="height: 80px; background: #a2a2a2;">box7</div>
    </div>
    
    <div class="row justify-content-between">
      <div class="col-1" style="height: 80px; background: #2a2;">box8</div>
      <div class="col-1" style="height: 80px; background: #2b2;">box9</div>
      <div class="col-1" style="height: 80px; background: #2c2;">box10</div>
      <div class="col-1" style="height: 80px; background: #2d2;">box11</div>
    </div>
    
    <div class="row justify-content-around">
      <div class="col-3" style="height: 80px; background: #ff8;">box12</div>
      <div class="col-3" style="height: 80px; background: #ff6;">box13</div>
    </div>

    <div class="row align-items-start">
      <div class="col-2" style="height: 60px; background: #fa0;">box14</div>
      <div class="col-2" style="height: 80px; background: #fa4;">box15</div>
      <div class="col-2" style="height: 100px; background: #fa8;">box16</div>
    </div>

    <div class="row align-items-center">
      <div class="col-2" style="height: 60px; background: #f0f;">box17</div>
      <div class="col-2" style="height: 80px; background: #f4f;">box18</div>
      <div class="col-2" style="height: 100px; background: #f8f;">box19</div>
    </div>

    <div class="row align-items-end">
      <div class="col-2" style="height: 60px; background: #0ff;">box20</div>
      <div class="col-2" style="height: 80px; background: #4ff;">box21</div>
      <div class="col-2" style="height: 100px; background: #8ff;">box22</div>
    </div>
    
    <div class="row" style="height: 240px">
      <div class="col-2 align-self-satrt" style="height: 80px; background: #a0a;">box23</div>
      <div class="col-2 align-self-center" style="height: 80px; background: #a4a;">box24</div>
      <div class="col-2 align-self-end" style="height: 80px; background: #a8a;">box25</div>
    </div>
  </div>

少し長くなりましたが、見たままの通りです。要素にちゃんと余白の余裕があるときに有効ですね。
それぞれ特徴を挙げていきます。

justify-contentを使用(box1~13)

• 親要素のrowに指定する
• 要素のcolの合計値が12未満のときに有効
• 横方向に対して、始まる位置を左寄せ、中央、右寄せのどれにするか決める
• betweenやaroundも使える。betweenは余白を均等に配置、aroundは左右に余白をつけ、均等に配置

align-itemsを使用(box14~22)

• 親要素のrowに指定
• それぞれの要素の高さがバラバラなときに有効なため、高さが指定されていないと機能しない
• 縦方向でそれぞれの位置を上揃え、中央、下揃えのどれにするか決める

align-selfを使用(box23~25)

• 子要素のcolに指定
• 親要素と子要素それぞれに高さを指定しているときに有効
• 縦方向で始まる位置を上、中央、下のどれにするか決める

余白をうまく活用する

要素がコンテナの中にいっぱいでないときに、余白を活用して要素の位置を決めることができます。

これも先ほど同様ザッと見ていただけると分かりやすいと思います。

  <div class="container my-5 border border-dark">
    <div class="row">
      <div class="col-6 offset-6" style="height: 80px; background: #f22;">box1</div>
    </div>

    <div class="row">
      <div class="col-3 ml-auto" style="height: 80px; background: #ff0;">box2</div>
      <div class="col-3 mr-auto" style="height: 80px; background: #ff9;">box3</div>
    </div>
    
    <div class="row">
      <div class="col-3 ml-auto" style="height: 80px; background: #0ff;">box4</div>
      <div class="col-3" style="height: 80px; background: #9ff;">box5</div>
    </div>

    <div class="row">
      <div class="col-3" style="height: 80px; background: #0f0;">box6</div>
      <div class="col-3 ml-auto" style="height: 80px; background: #9f9;">box7</div>
    </div>

    <div class="row">
      <div class="col-3 ml-auto" style="height: 80px; background: #00f;">box8</div>
      <div class="col-3 ml-auto" style="height: 80px; background: #09f;">box9</div>
    </div>

    <div class="row">
      <div class="col-3 mr-auto" style="height: 80px; background: #fa0;">box10</div>
      <div class="col-3 mr-auto" style="height: 80px; background: #fc9;">box11</div>
    </div>
  </div>

offsetを使用(box1)

offsetはcolと同様、1~12の数字で指定します。colと一緒にその要素に対してclass名に用いることで、要素の左側に指定した数字分の余白を持たせることができます。

ml(mr)-autoを使用(box2~11)

ml=margin left、mr=margin rightです。
要素の数に応じて、右や左に余白を自動でつけてくれます。

コードの例のように、左端の要素にml、右端の要素にmrとつければ、rowは中央寄せになります。
左端の要素だけにmlでrowは右寄せに、右端の要素だけにmrでrowは左寄せになりますね。

また、全てにmlやmrをつけることで。均等な余白の付け方もできます。
表示結果がjustify-contentと似ているので記述が少なくて済むこちらは便利そうです。

要素の順序を変えてみる

要素の順番は基本的にはHTMLに記述した順なので、単純にそう書けば良いのですが、レスポンシブなどでサイトデザインが変わるときに順序を変えたいときなんかに有効ですね。

使うのはorderというclass名です。

orderを使用

  <div class="container my-5">
    <div class="row">
      <div class="col-4 order-3" style="height: 80px; background: #f22">box1</div>
      <div class="col-4 order-2" style="height: 80px; background: #f55">box2</div>
      <div class="col-4 order-1" style="height: 80px; background: #f99">box3</div>
    </div>
  </div>

一番簡単な記述はこんな感じですね。
HTMLにはbox1→2→3の順で書いていますが、表示はbox3→2→1となっています。

普通に使う上ではこのような使用方法は意味がないですが、smやmdなどと一緒に使えるので、実際に使うときはレスポンシブ対応時にorder-md-○といった記述にするでしょうね。

また、orderもcolやoffsetと同じく1~12までの数字を入れることができます。

しかし、実はこれに合わせてfirst、last、0といった指定もできて、優先度は、

first > 0~12 > last という風になります。実質first=-1でlast=13といったところでしょう。

おわりに

今回は要素の自由な配置方法についてまとめました。

整理すると、

• rowの入れ子
• justify-content
• align-items
• align-self
• offset
• ml-auto、mr-auto
• order

以上です。

この辺りとcontainer、row、colの仕組みが分かっていれば、Bootstrapでグリッドレイアウトをそれなりにスムーズに使うことはできると思います！

次回はこれまでの学習を通してトップページのみの簡単な架空静的サイトを作ってみようと思います。

それでは。