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

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

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

ネスト

ネスト(入れ子)

  • 内側のグリッドシステムも12列に等分されています
<div class="container">

<h1>Grid system (ネスト)</h1>

<div class="row">
<div class="col-xs-9" style="border:solid 1px #000;height:650px;">
<div class="row">
<div class="col-xs-12" style="background:#CCC;height:200px;"><h3>新着情報</h3></div>
</div>
<div class="row">
<div class="col-xs-6" style="background:#999;height:150px;"><h3>商品A</h3></div>
<div class="col-xs-3" style="background:#CCC;height:150px;"><h3>商品B</h3></div>
<div class="col-xs-3" style="background:#999;height:150px;"><h3>商品C</h3></div>
</div>
<div class="row">
<div class="col-xs-4" style="background:#CCC;height:150px;"><h3>商品D</h3></div>
<div class="col-xs-4" style="background:#999;height:150px;"><h3>商品E</h3></div>
<div class="col-xs-4" style="background:#CCC;height:150px;"><h3>商品F</h3></div>
</div>
</div>
<div class="col-xs-3" style="border:solid 1px #000;height:650px;">
<h2>Side Bar</h2>
</div>
</div>

</div><!-- /.container -->


間隔の指定

  • ブロックとブロックの間を空ける
  • col-xs-offset-N クラス
  • Nには1〜12の数値を指定する
<div class="container">

<h1>Grid system (間隔の指定)</h1>

<div class="row">
<div class="col-xs-6" style="background:#CCC;height:150px;">商品A</div>
<div class="col-xs-6" style="background:#999;height:150px;">商品B</div>
</div>
<div class="row">
<div class="col-xs-3" style="background:#999;height:200px;">商品C</div>
<div class="col-xs-offset-6 col-xs-3" style="background:#CCC;height:200px;">商品D</div>
</div>
<div class="row">
<div class="col-xs-6" style="background:#CCC;height:150px;">商品E</div>
<div class="col-xs-6" style="background:#999;height:150px;">商品F</div>
</div>

</div><!-- /.container -->


ブロックを左右にずらして配置

  • 「col-xs-pull-N」や「col-xs-push-N」を使用すると、グリッドシステム全体の幅(12列)より左右に飛び出させて配置することが可能
<div class="container">

<h1>Grid system (位置をずらす)</h1>

<div class="row">
<div class="col-xs-4" style="background:#CCC;height:150px;">商品A</div>
<div class="col-xs-4" style="background:#999;height:150px;">商品B</div>
<div class="col-xs-4" style="background:#CCC;height:150px;">商品C</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-pull-1" style="background:#999;height:150px;">商品D</div>
<div class="col-xs-4" style="background:#CCC;height:150px;">商品E</div>
<div class="col-xs-4 col-xs-push-2" style="background:#999;height:150px;">商品F</div>
</div>
<div class="row">
<div class="col-xs-4" style="background:#CCC;height:150px;">商品G</div>
<div class="col-xs-4" style="background:#999;height:150px;">商品H</div>
<div class="col-xs-4" style="background:#CCC;height:150px;">商品I</div>
</div>

</div><!-- /.container -->


  • 逆方向にブロックをずらした場合は、ブロックが重ねて配置されることになります
  • 以下は、2行目の最初のブロックを右方向へ1列分、最後のブロックを左方向へ2列分ずらして配置した場合の例
<div class="container">

<h1>Grid system (位置をずらす)</h1>

<div class="row">
<div class="col-xs-4" style="background:#CCC;height:150px;">商品A</div>
<div class="col-xs-4" style="background:#999;height:150px;">商品B</div>
<div class="col-xs-4" style="background:#CCC;height:150px;">商品C</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-push-1" style="background:#999;height:150px;">商品D</div>
<div class="col-xs-4" style="background:#CCC;height:150px;">商品E</div>
<div class="col-xs-4 col-xs-pull-2" style="background:#999;height:150px;">商品F</div>
</div>
<div class="row">
<div class="col-xs-4" style="background:#CCC;height:150px;">商品G</div>
<div class="col-xs-4" style="background:#999;height:150px;">商品H</div>
<div class="col-xs-4" style="background:#CCC;height:150px;">商品I</div>
</div>

</div><!-- /.container -->


  • 「col-xs-pull-N」や「col-xs-push-N」はと、ブロックの並び順を入れ替える場合にも活用できます
<div class="container">

<h1>Grid system (位置の入れ替え)</h1>

<div class="row">
<div class="col-xs-6 col-xs-push-6" style="background:#CCC;height:150px;">商品A</div>
<div class="col-xs-6 col-xs-pull-6" style="background:#999;height:150px;">商品B</div>
</div>

</div><!-- /.container -->


文章構造としての優先順位
  • ブラウザに先読ませるコンテンツ内容を、PCでの表示は右側に配置したい
  • スマートフォンでの表示の順番に影響する