Bootstrapのレスポンシブルを使ってみった

初めに

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。
ソースコードが分からなくても、見やすいサイトを簡単に作れるとのことです。
今回はBootstrapのレスポンシブ対応を試してみます。

レスポンシブ対応とは

閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。つまり、PCブラウザ、スマートフォンなど、異なる画面でWebサイト表示を柔軟に調整し、最適な表示することが可能です。

Bootstrap導入

ホストされたファイルをインターネットから読み込む

HTMLのheadタグに下記のコードを挿入

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

col-xs、col-sm、col-md、col-lgの仕組み

Bootstrapは画面の横幅を12等分にしたグリッドを用いて、PCブラウザやスマートフォンなどの異なる画面の表示を調整できます。
具体的には、col-xs、col-sm、col-md、col-lgを用いて各サイズ画面のレイアウトを役に立ちます。
- col-xs:スマートフォン (<768px)
- col-sm:ファブレッ (≥768px)
- col-md:PC (≥992px)
- col-lg:PC (≥1200px)

例えば、

    <div class="row">
        <div class="col-xs-6 col-sm-3">
            <h3>first col</h3>
        </div>
        <div class="col-xs-6 col-sm-3">
            <h3>second col</h3>
        </div>
        <div class="col-xs-6 col-sm-3">
            <h3>third col</h3>
        </div>
        <div class="col-xs-6 col-sm-3">
            <h3>fourth col</h3>
        </div>
    </div>

"col-xs-6 col-sm-3"の数字は、画面の横幅を12等分にしたグリッドの数とのことです。
つまり、画面の横幅が<768pxの場合は、横幅の二分の一(6/12)を使うことになる

画面の横幅が>=768pxの場合は、横幅の四分の一(3/12)を使うことになる

まとめ

今回はBootstrapのレスポンシブル機能を使ってみった、@mediaと結構似ているイメージがありますが、確かに@mediaより画面を柔軟に調整できます。