Bootstrapを使ったレスポンシブコーディングについて
Bootstrapとレスポンシブデザイン
Bootstrapではレスポンシブデザインに対応したCSSクラスが用意され、中でもグリッドシステムが注目を浴びています。一般的に必要となる表示のコントロールがHTMLの簡単な記述で出来るようになるので、Web開発の時間短縮に役立っているのです。
グリッドシステムとレスポンシブコーディング グリッドシステムとは、ページを格子状(グリッド)に区切ってレイアウトするデザイン手法です。Bootstrapでは横列を12分割し、それを基準にレイアウトすることが基本となります。1行分を <div class=”row”>要素で括り、 <div class=”col-md-xx”> のxxの部分でそのブロックを何列分で表示するか指定します。例えば、
という記述だと、12列分を4:4:4に分割、即ち1:1:1の割合で表示されることになります。割合の合計が12を超えた場合は、複数行で表示されます。そして、どの割合で設定した場合も、画面幅が一定より狭くなるとグリッドレイアウトが解除され、そのブロックが縦並びに表示されます。
次に、デバイス別の設定方法ですが、
Bootstrapではレスポンシブデザインに対応したCSSクラスが用意され、中でもグリッドシステムが注目を浴びています。一般的に必要となる表示のコントロールがHTMLの簡単な記述で出来るようになるので、Web開発の時間短縮に役立っているのです。
グリッドシステムとレスポンシブコーディング グリッドシステムとは、ページを格子状(グリッド)に区切ってレイアウトするデザイン手法です。Bootstrapでは横列を12分割し、それを基準にレイアウトすることが基本となります。1行分を <div class=”row”>要素で括り、 <div class=”col-md-xx”> のxxの部分でそのブロックを何列分で表示するか指定します。例えば、
1 2 3 4 5 6 7 |
<div class="row"> <div class="col-md-4"> ………………………</div> <div class="col-md-4"> ………………………</div> <div class="col-md-4"> ………………………</div> </div> |
次に、デバイス別の設定方法ですが、
の「md」の部分を変更させることでデバイスごとの割合を設定出来ます。「xs」はスマートフォンで表示幅が768px未満、「sm」はタブレットで表示幅が768px以上、「md」はデスクトップで表示幅が992px以上、「lg」はデスクトップ(大)で表示幅が1200px以上です。例えば、
<div class=”col-md-4 col-sm-6″>
は992px以上の表示幅では4/12、768px以上992px未満では6/12の割合で表示され、768未満であれば全てのブロックが縦並びに表示されるということになります。
<div class=”col-md-4 col-sm-6″>
は992px以上の表示幅では4/12、768px以上992px未満では6/12の割合で表示され、768未満であれば全てのブロックが縦並びに表示されるということになります。
最新の記事
- ユーザーの視認性・可読性・判読性を意識した英文フォント選びのコツとは?
- 案外知られていないJavaScriptの歴史
- Webサイト制作に欠かせない標準フォントの知識とは?(スマホサイト編)
- Webサイト制作に欠かせない標準フォントの知識とは?(PCサイト編)
- Webコーディングの共通ルール!?「Web標準」とは
- 高齢者・障害者を含むすべての人の使い勝手の良さに配慮したアクセシビリティの規格『JIS X 8341-3:2016』とは?
- 余計な作業を自動化し、開発をスムーズにしてくれるタスクランナー『gulp』とは?
- メンテナンス性と再利用性がアップするOOCSS(オブジェクト指向CSS)とは?
- 勘違いしていませんか!?モバイルファーストの本当の意味とは?
- 脱・なんとなく!CSSでサイズ指定するときに押さえておきたい5つの単位とは?