読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

グリッドシステム

グリッドシステムの基本

  • ページ全体を12列に分けて構成するグリッドシステムが用意されています
2列-6列-4列
<h1>Grid system (列幅の指定)</h1>
<div class="col-xs-2" style="background:#CCC;height:250px;">カラムA</div>
<div class="col-xs-6" style="background:#999;height:250px;">カラムB</div>
<div class="col-xs-4" style="background:#CCC;height:250px;">カラムC</div>


3列-3列-3列-3列
<h1>Grid system (列幅の指定)</h1>
<div class="col-xs-3" style="background:#CCC;height:250px;">カラムA</div>
<div class="col-xs-3" style="background:#999;height:250px;">カラムB</div>
<div class="col-xs-3" style="background:#CCC;height:250px;">カラムC</div>
<div class="col-xs-3" style="background:#999;height:250px;">カラムD</div>


合計が12列より少ない場合

  • 残りの列数が余白として表示されます
<h1>Grid system (12列以下の指定)</h1>
<div class="col-xs-5" style="background:#CCC;height:250px;">ブロックA</div>
<div class="col-xs-4" style="background:#999;height:250px;">ブロックB</div>


合計が12列より多い場合

  • 合計12列の幅に収まらない場合は、以降のブロックが次の行に送られて配置されます
<h1>Grid system (12列以上の指定)</h1>
<div class="col-xs-6" style="background:#CCC;height:250px;">ブロックA</div>
<div class="col-xs-4" style="background:#999;height:250px;">ブロックB</div>
<div class="col-xs-5" style="background:#CCC;height:250px;">ブロックC</div>
<div class="col-xs-3" style="background:#999;height:250px;">ブロックD</div>


行の指定

  • div要素にクラスrowを適用する
<h1>Grid system (行の指定)</h1>
<div class="row">
<div class="col-xs-8" style="background:#CCC;height:250px;">ブロックA</div>
<div class="col-xs-4" style="background:#999;height:250px;">ブロックB</div>
</div>
<div class="row">
<div class="col-xs-3" style="background:#CCC;height:250px;">ブロックC</div>
<div class="col-xs-3" style="background:#999;height:250px;">ブロックD</div>
<div class="col-xs-6" style="background:#CCC;height:250px;">ブロックE</div>
</div>



  • 横スクロールバーが表示される場合があります
1行だけのブロック配置を行う場合もdiv要素で囲む
  • 正しい記述方法
<div class="row">
<div class="col-xs-2" style="background:#CCC;height:250px;">カラムA</div>
<div class="col-xs-6" style="background:#999;height:250px;">カラムB</div>
<div class="col-xs-4" style="background:#CCC;height:250px;">カラムC</div>
</div>