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

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

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

■オフセットとビジブル

グリッドシステムは、基本的に「用意されたコンテンツを順番に並べて表示する」というものですが、表示を調整するための機能もいくつか持っています。中でも割と簡単で覚えておくと便利なものを2つ紹介しておきましょう。


●オフセット
オフセットは、指定したブロックだけ間隔をあけて配置するためのものです。これは、「col-種類-offset-数字」という形で記述します。例えば、mdサイズの際に1ブロック間を空けて3ブロック分のコンテンツを配置するなら、
class="col-md-offset-1 col-md-3"
こんな感じでクラスを用意します。これで、その前にあるコンテンツから1ブロック空白の表示を置いて、3ブロック分のコンテンツを表示します。


●ビジブル
これは、指定したデイバイスサイズの場合にのみコンテンツを表示させるためのものです。これは「visible-種類-block」という形でクラス名を指定します。例えば、
class="visible-md-block"
このように記述すると、このタグは、mdで設定される横幅(992~1200px)のときだけ表示され、それ以外の場合は非表示となります。これを組み合わせることで、横幅に応じて異なるコンテンツを表示させたりすることも可能になります。


実際の利用例を下に掲載しておきましょう。これは、オフセットとビジブルを組み込んだサンプルです。

横幅が広いデバイスだと、MENUContentの間に1ブロック分の余白をあけて表示します。一番右には、default optionが表示されます。横幅が狭まると、MENUContentが縦に重なって表示されるようになります(余白は消えます)。そして、表示されていたdefault optionの代りに、small optionが表示されるようになります。

スマートフォンとタブレットやパソコンでのレイアウトを変更するのに、グリッドシステムが非常に有効であることがわかったことでしょう。このグリッドシステムを使うだけでも、Bootstrapを利用する価値はある、といえるでしょう。


※下図説明
 横幅が広いと、MENUとContentの間に1ブロック分の余白をあけて表示する。
 一番右には、default optionが表示される。
 横幅が狭まると、MENUとContentが縦に重なって表示される。
 default optionの代りに、small optionが表示されるようになる。


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

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-1 col-md-2 col-sm-3 col-xs-12" 
                style="border:1px solid white; background-color:#eee;">
                <p>MENU</p></div>
                
            <div class="col-lg-9 col-lg-offfset-1 col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12" 
                style="border:1px solid white; background-color:#eee;">
                <p>Content.</p><p>Content.</p><p>Content.</p></div>
                
            <div class="visible-lg-block visible-md-block visible-sm-block">
                <div class="col-lg-1 col-md-2 col-sm-2 col-xs-12" 
                    style="border:1px solid white; background-color:#dfd;">
                    <p>default option</p></div>
            </div>
            
            <div class="visible-xs-block">
                <div class="col-xs-12" 
                    style="border:1px solid white; background-color:#fdd;">
                    <p>small option</p></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>


※関連コンテンツ

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