かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

Bootstrapコードを速く書く


わたしはレスポンシブデザインに大事なグリッド構造を、Bootstrapを利用して組んでいます。

css・jsともにあらゆるデバイスにフィットするWebサイトを構築するのに必要なものがパッケージされたとても便利なフレームワークで、SoyCMSとの相性も最高にいいです!

今年最後のエントリーとして、Bootstrapの構造と、簡単に複雑なBootstrapのレイアウトコードが書ける便利なサイトをご紹介していきます。

まずBootstrapのフレーム組みの考え方ですが、

container(大枠の幅)>row(横並び区切り)>col(カラムレイアウト)

という入れ子式になっています。

  • 大枠の幅…PCディスプレー幅全体にサイトデザインをするならば「.container-fluid」というclass名を使用します。従来馴染みのあるwrapperを設けるならば「.container」というclass名です。両脇に15pxのpaddingを持っています。
  • 横並び区切り…「.row」を説明するよい日本語が思い浮かばなかったのですが、PCサイズのときは横並びで、パッドやスマホサイズになった時にセットで動き伸縮したり縦並びになるカラムを、ロープで括っておくイメージです。両脇に-15pxのmarginを持っており、containerのpaddingを消しています。
  • カラムレイアウト…「.col-サイズ-数字」のclass名でどのディスプレー幅の時はどの大きさになる、あるいは非表示になる、などスタイルを設定できる、Bootstrapの要です。両脇に15pxのpaddingを持っています。

長々と書いてもなかなか難しいので、container(大枠の幅)の中にrow(横並び区切り)、その中にcol(カラムレイアウト)を置き、その余白は両脇に15px存在すると理解します。


では早速ですが、ブログページで多い以下のようなカラム構造のサイトデザインを、ディスプレーサイズごとに組んでみましょう!ご一緒に紹介するサイトを開いて作業を進めてもらうと、わかりやすいと思います!

1.メインカラムと右カラムが大枠の構造である。
2.メインカラム内部は、左側にサムネイル画像、右側にエントリータイトルと導入文が並ぶ。タブレットサイズでは、それが縦に並ぶ。
3.タブレットサイズでは、右カラムはメインカラムの下に回り込み、右カラム内のカテゴリーリンクと広告バナーは左右に並ぶ。フォンサイズになると、カテゴリーリンクと広告バナーは再び縦に並ぶ。

まず入れ子式レイアウトで上記3クラスの扱いですが、

container(大枠の幅)>row(横並び区切り親)>col(カラムレイアウト親)>row(横並び区切り子)>col(カラムレイアウト子)

というように、colのなかにrowを繰り返します。

仮にうっかりとrowを入れないとどうなるかというと、

両脇の-15pxのネガティブmarginがないため、さらに15px狭くなっていまいます。


さて、上記の例を自力で書こうと思うとするとめちゃくちゃ面倒くさいので、わたしは

Shoelace - Visual Bootstrap 3 Grid Builder 

を使わせていただいております。

入れ子式は一発では書けません。まず大枠の構造を組んで、そこに入れ子の部分のコードを生成して組み込んでいきます。

使い方はとにかく触って慣れてください。分かってくるととても便利です!わたしはラージデスクトップサイズから作っていきますが、お好みでどうぞ。


1.まず大枠のメインカラムと右カラムをドラッグで作ります。rowやcolにはclass名をつけられますので、仮でもつけておくと便利です。

ラージデスクトップサイズでは左右に1グリッドの余白をとり、デスクトップサイズでは余白をなくしています。containerでwrapperを設けるよりも、container_fruidでこのようにするのがわたしは好きです。マウスを左ボーダーの上に乗せるとcolをドラッグできます。


タブレットサイズとフォンサイズでは、自動的に表示されたようにメインカラム・右カラムは縦並びでOKですので、これで大枠のHTMLが書けましたのでコピーしましょう!

<div class="container">
  <div class="row">
    <div class="main_col col-md-8 col-lg-offset-1 col-lg-7">メインカラム</div>
    <div class="right_col col-md-4">右カラム</div>
  </div>
</div>

2.次メインカラムの中を作ります。入れ子も12グリッドで考えるので、1同様の方法で大丈夫です。ラージデスクトップとデスクトップサイズでは右カラムとの間に余白を設けたかったので、12番目のグリッドを空にしました。このように入れ子のグリッドを使ってmarginをとると楽です。

入れ子部分を作る時は、上の画像にあるように右上の「include container」のチェックを外します。row以下のコードのみ生成されて便利。

<div class="row">
  <div class="thumb col-md-3">サムネイル画像</div>
  <div class="entry_title col-md-8">エントリータイトル</div>
</div>


3.右カラムを作ります。カラムの幅に関係なく入れ子部分も12グリッドで考えるので、慣れるまでは複雑に感じるかもしれませんが、とても簡単です。カテゴリーリンク部分とバナー部分の2カラムを同じrowに作ります。ラージデスクトップ、デスクトップサイズでは縦2段、タブレットでは横2列、フォンサイズではまた縦2段に戻るという複雑なレスポンスをさせたいのですが…。

<div class="row">
  <div class="category_link col-sm-6 col-md-12">カテゴリーリンク部分</div>
  <div class="banner col-sm-6 col-md-12">広告バナー部分</div>
</div>

とても簡単に書けますね!


入れ子として作ったコードを、親コードに入れていきましょう。

<div class="container">
  <div class="row">
    <div class="main_col col-md-8 col-lg-offset-1 col-lg-7">
      <div class="row">
        <div class="thumb col-md-3">サムネイル画像</div>
        <div class="entry_title col-md-8">エントリータイトル</div>
      </div>
    </div>
    <div class="right_col col-md-4">
      <div class="row">
        <div class="category_link col-sm-6 col-md-12">カテゴリーリンク部分</div>
        <div class="banner col-sm-6 col-md-12">広告バナー部分</div>
      </div>
    </div>
  </div>
</div>


大変スピーディに書けました!

実際は、表示非表示、左右の入れ替えなどのclass名もBootstrapには用意されています。(これはのちほど扱いたいと思います)残念ながらこのサイトでの作業はここまではできないのですが、ここまででも時間の大幅短縮となりますね!

あらかたここで作って細かいところは加筆しましょう。


それでは本年も大変お世話になりありがとうございました!来年も精進してまいります。どうぞよいお年をお迎えくださいませ。