社畜エンジニア発掘戦線

駆けだしAIエンジニア

Bootstrapで遊ぶ5(レスポンシブデザインの仕様)

おつかれさまです。

グリッドシステムの基本的なデザイン構成についていろいろ遊んでみましたが、個人的にはここからが本丸、Bootstrapのグリッドシステムの何が優れているかって、これまでと同様、クラス名を指定するだけでレスポンシブ対応したデザインが作成可能だということ。

レスポンシブデザインというと、パソコンで見た画面とスマホで見た画面が異なり、それぞれの画面サイズに合わせていい感じのレイアウトをデザインする、ということ。これをCSSで作ろうと思うとけっこう大変、これを大いに助けてくれるのがBootstrapです。

昔はWebページを見ようと思えばパソコンを開くしかなかったんですが、昨今はスマホタブレットが普及し、手軽にWebページにアクセスできる時代になったため、特にこれからはこの考え方が必須になると思われ、

ぬるぽなんて言ってた時代が懐かしい
f:id:sutokun:20180630162742j:plain

あ、わたしこの時代まだプログラムどころかインターネットすらしてなかったわ



まあ、前置きはいいとして、なんか書いてみます、まずは今までどおりにコンテンツを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>

こんな感じ、
f:id:sutokun:20180630213925p:plain

各コンテンツ「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>

どうなるか、
f:id:sutokun:20180630213925p:plain

変わってない、ワロスw しかし、スマホの画面を想定してブラウザのウィンドウを狭くすると、、、
f:id:sutokun:20180630222432p:plain:w400

おお、横並びだったのが縦並びでワイドになった!確かに大きい画面と小さい画面でレイアウトを切り替えることができました。

この画面が切り替わるタイミングは、以前「container-fluid」でメモったブレイクポイントに起因します、まとめておくと、

画面サイズ クラス名 画面用途
576~768px col-sm-N スマホ横向き
768~992px col-md-N タブレット
992~1200px col-lg-N パソコン
1200px~ col-xl-N 大画面

このレスポンシブデザインについて、ここからもっと突っ込んで調べてみます。