back
グリッドシステムをマスターしよう (4/4)
■オフセットとビジブル
グリッドシステムは、基本的に「用意されたコンテンツを順番に並べて表示する」というものですが、表示を調整するための機能もいくつか持っています。中でも割と簡単で覚えておくと便利なものを２つ紹介しておきましょう。
●オフセット
オフセットは、指定したブロックだけ間隔をあけて配置するためのものです。これは、「col-種類-offset-数字」という形で記述します。例えば、mdサイズの際に１ブロック間を空けて３ブロック分のコンテンツを配置するなら、
●ビジブル
これは、指定したデイバイスサイズの場合にのみコンテンツを表示させるためのものです。これは「visible-種類-block」という形でクラス名を指定します。例えば、
実際の利用例を下に掲載しておきましょう。これは、オフセットとビジブルを組み込んだサンプルです。
横幅が広いデバイスだと、MENUとContentの間に１ブロック分の余白をあけて表示します。一番右には、default optionが表示されます。横幅が狭まると、MENUとContentが縦に重なって表示されるようになります（余白は消えます）。そして、表示されていたdefault optionの代りに、small optionが表示されるようになります。
スマートフォンとタブレットやパソコンでのレイアウトを変更するのに、グリッドシステムが非常に有効であることがわかったことでしょう。このグリッドシステムを使うだけでも、Bootstrapを利用する価値はある、といえるでしょう。
●オフセット
オフセットは、指定したブロックだけ間隔をあけて配置するためのものです。これは、「col-種類-offset-数字」という形で記述します。例えば、mdサイズの際に１ブロック間を空けて３ブロック分のコンテンツを配置するなら、
class="col-md-offset-1 col-md-3"こんな感じでクラスを用意します。これで、その前にあるコンテンツから１ブロック空白の表示を置いて、３ブロック分のコンテンツを表示します。
●ビジブル
これは、指定したデイバイスサイズの場合にのみコンテンツを表示させるためのものです。これは「visible-種類-block」という形でクラス名を指定します。例えば、
class="visible-md-block"このように記述すると、このタグは、mdで設定される横幅（992～1200px）のときだけ表示され、それ以外の場合は非表示となります。これを組み合わせることで、横幅に応じて異なるコンテンツを表示させたりすることも可能になります。
実際の利用例を下に掲載しておきましょう。これは、オフセットとビジブルを組み込んだサンプルです。
横幅が広いデバイスだと、MENUとContentの間に１ブロック分の余白をあけて表示します。一番右には、default optionが表示されます。横幅が狭まると、MENUとContentが縦に重なって表示されるようになります（余白は消えます）。そして、表示されていたdefault optionの代りに、small optionが表示されるようになります。
スマートフォンとタブレットやパソコンでのレイアウトを変更するのに、グリッドシステムが非常に有効であることがわかったことでしょう。このグリッドシステムを使うだけでも、Bootstrapを利用する価値はある、といえるでしょう。
※下図説明
横幅が広いと、MENUとContentの間に１ブロック分の余白をあけて表示する。
一番右には、default optionが表示される。
横幅が狭まると、MENUとContentが縦に重なって表示される。
default optionの代りに、small optionが表示されるようになる。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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>
| << 前へ |