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

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

作成:2017-02-11 07:58
更新:2017-02-11 07:58

■横幅調整に関するクラスについて

グリッドシステム最大のポイントは、row内に配置するコンテンツに設定する「クラス」です。

このクラスは、「col-種類-数字」という形で記述されます。「種類」というのは、デバイスの種類で、これはデバイスの横幅に応じて4種類のものが用意されています。以下に整理しておきましょう。
lg    1200px以上
md    992~1200px
sm    768~992px
xs    768px未満

パソコンの大画面ならばlg、スマートフォンでの縦型表示ならxsのクラスが適用される、と考えておくと良いでしょう。タブレットの場合は、解像度によってlgsmのいずれかが使われることになるでしょう。

その後の「数字」というのは、そのコンテンツがrow内に占める割合と考えて下さい。rowでは、横幅全体を「12」のブロックに分けて管理します。この最後の数字は、「そのコンテンツがブロックいくつ分になるか」を示します。

例えば、2つのコンテンツを横に並べるなら、「6」と「6」にすればちょうど半分ずつになりますね。「4」と「8」にすれば1:2の割合で表示されることになります。「合計が12以上になったら?」と思った人。その場合は、後のコンテンツは次行に回されます(つまり、改行して表示されます)。

例として、「768~992pxサイズで、4:8で表示される」という場合のタグを下に挙げておきましょう。これで、2つのコンテンツが4:8(1:2)で表示されます。なお、見やすいようにstyle属性で背景に色を付けてあります。

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

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-sm-4" 
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
            <div class="col-sm-8" 
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
        </div>
    </div>

</div>

</body>
</html>

※関連コンテンツ

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