back
グリッドシステムをマスターしよう (2/4)
■横幅調整に関するクラスについて
グリッドシステム最大のポイントは、row内に配置するコンテンツに設定する「クラス」です。
このクラスは、「col-種類-数字」という形で記述されます。「種類」というのは、デバイスの種類で、これはデバイスの横幅に応じて４種類のものが用意されています。以下に整理しておきましょう。
パソコンの大画面ならばlg、スマートフォンでの縦型表示ならxsのクラスが適用される、と考えておくと良いでしょう。タブレットの場合は、解像度によってlg～smのいずれかが使われることになるでしょう。
その後の「数字」というのは、そのコンテンツがrow内に占める割合と考えて下さい。rowでは、横幅全体を「12」のブロックに分けて管理します。この最後の数字は、「そのコンテンツがブロックいくつ分になるか」を示します。
例えば、２つのコンテンツを横に並べるなら、「6」と「6」にすればちょうど半分ずつになりますね。「4」と「8」にすれば１：２の割合で表示されることになります。「合計が12以上になったら？」と思った人。その場合は、後のコンテンツは次行に回されます（つまり、改行して表示されます）。
例として、「768～992pxサイズで、４：８で表示される」という場合のタグを下に挙げておきましょう。これで、２つのコンテンツが４：８（１：２）で表示されます。なお、見やすいようにstyle属性で背景に色を付けてあります。
このクラスは、「col-種類-数字」という形で記述されます。「種類」というのは、デバイスの種類で、これはデバイスの横幅に応じて４種類のものが用意されています。以下に整理しておきましょう。
lg 1200px以上
md 992～1200px
sm 768～992px
xs 768px未満
パソコンの大画面ならばlg、スマートフォンでの縦型表示ならxsのクラスが適用される、と考えておくと良いでしょう。タブレットの場合は、解像度によってlg～smのいずれかが使われることになるでしょう。
その後の「数字」というのは、そのコンテンツがrow内に占める割合と考えて下さい。rowでは、横幅全体を「12」のブロックに分けて管理します。この最後の数字は、「そのコンテンツがブロックいくつ分になるか」を示します。
例えば、２つのコンテンツを横に並べるなら、「6」と「6」にすればちょうど半分ずつになりますね。「4」と「8」にすれば１：２の割合で表示されることになります。「合計が12以上になったら？」と思った人。その場合は、後のコンテンツは次行に回されます（つまり、改行して表示されます）。
例として、「768～992pxサイズで、４：８で表示される」という場合のタグを下に挙げておきましょう。これで、２つのコンテンツが４：８（１：２）で表示されます。なお、見やすいようにstyle属性で背景に色を付けてあります。
(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-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>
| << 前へ | 次へ >> |