Bootstrapで遊ぶ5(レスポンシブデザインの仕様)
おつかれさまです。
グリッドシステムの基本的なデザイン構成についていろいろ遊んでみましたが、個人的にはここからが本丸、Bootstrapのグリッドシステムの何が優れているかって、これまでと同様、クラス名を指定するだけでレスポンシブ対応したデザインが作成可能だということ。
レスポンシブデザインというと、パソコンで見た画面とスマホで見た画面が異なり、それぞれの画面サイズに合わせていい感じのレイアウトをデザインする、ということ。これをCSSで作ろうと思うとけっこう大変、これを大いに助けてくれるのがBootstrapです。
昔はWebページを見ようと思えばパソコンを開くしかなかったんですが、昨今はスマホ、タブレットが普及し、手軽にWebページにアクセスできる時代になったため、特にこれからはこの考え方が必須になると思われ、
ぬるぽなんて言ってた時代が懐かしい
あ、わたしこの時代まだプログラムどころかインターネットすらしてなかったわ
まあ、前置きはいいとして、なんか書いてみます、まずは今までどおりにコンテンツを3つ並べてみます。
<h1 style="background: blue;">グリッドシステムのテスト</h1> <div class="container-fluid"> <div class="row"> <div class="col-6" style="background: yellow; height:200px;">コンテンツ1</div> <div class="col-3" style="background: red; height:200px;">コンテンツ2</div> <div class="col-3" style="background: green; height:200px;">コンテンツ3</div> </div> </div>
こんな感じ、
各コンテンツ「col-N」の部分を「col-sm-N」に変えてみます。
<h1 style="background: blue;">グリッドシステムのテスト</h1> <div class="container-fluid"> <div class="row"> <div class="col-sm-6" style="background: yellow; height:200px;">コンテンツ1</div> <div class="col-sm-3" style="background: red; height:200px;">コンテンツ2</div> <div class="col-sm-3" style="background: green; height:200px;">コンテンツ3</div> </div> </div>
どうなるか、
変わってない、ワロスw しかし、スマホの画面を想定してブラウザのウィンドウを狭くすると、、、
おお、横並びだったのが縦並びでワイドになった!確かに大きい画面と小さい画面でレイアウトを切り替えることができました。
この画面が切り替わるタイミングは、以前「container-fluid」でメモったブレイクポイントに起因します、まとめておくと、
画面サイズ | クラス名 | 画面用途 |
---|---|---|
576~768px | col-sm-N | スマホ横向き |
768~992px | col-md-N | タブレット |
992~1200px | col-lg-N | パソコン |
1200px~ | col-xl-N | 大画面 |
このレスポンシブデザインについて、ここからもっと突っ込んで調べてみます。