libro
www.tuyano.com
初心者のためのBootstrap入門

グリッドシステムをマスターしよう (3/4)

作成:2017-02-11 08:00
更新:2017-02-11 08:00

■複数の画面サイズに対応させる

グリッドシステムの基本的なクラスの設定の仕方はわかったでしょう。ここで、こういう疑問が湧いたかも知れません。

「4つのデバイスの種類があったけど、自分のサイトではどれを用意すればいいんだ?」と。

そういう人は、勘違いをしています。これらの中から使いたいものを選んで書くのだ、と。そうではありません。

デバイスの種類ごとのクラスは、「全部用意する」のです!

これらは、1つしかないのでは意味がありません。そのコンテンツが、デバイスの横幅に応じて自動的にレイアウトされるよう調整するためのクラスなのですから。どんな横幅でも最適になるよう、すべてのクラスを用意しておくのです。

例として、先ほど作成した「4:8でコンテンツを表示する」というサンプルを、全デバイス向けに修正したものを下に掲載しておきます。ここでは、表示するコンテンツの割合を以下のように設定してあります。

1200px以上―― 2:10 で表示
992~1200px―― 3:9 で表示
768~992px―― 4:8 で表示
768px未満―― 12:12 で表示(それぞれ1行ずつに表示)

いかがですか? このように設定することで、左側のコンテンツ(MENUと表示される部分)はある程度の幅内にまとめ、右側のコンテンツ部分が必要に応じて拡大されるようにしています。またスマートフォンでは、MENUの下にコンテンツが縦に並んで表示されるようになります。

このように、すべてのサイズ用のクラスを用意することで、思った通りのレイアウトが実現できるようになります。「面倒だな」と思った人も、少なくとも「768px未満と、それ以上のどれか」ぐらいは用意するようにしましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

</head>
<body >
    
<div class="container">
    <h1>グリッドシステム</h1>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12" 
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
            <div class="col-lg-10 col-md-9 col-sm-8 col-xs-12" 
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
        </div>
    </div>
</div>

</body>
</html>

※関連コンテンツ

「初心者のためのBootstrap入門」に戻る