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

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

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

コンテナの適用

コンテナの適用

  • グリッドシステムを使用するときには、ページ全体を囲むにはクラスrowではなく、containerまたはcontainer-fluidで囲む必要があります
container-fluid
  • 左右に余白を設けてページ全体を中央に配置するという書式指定がされています
<h1 style="background:#CCC;">コンテナなしの場合</h1>

<div class="container-fluid">
<h1 style="background:#CCC;">コンテナありの場合</h1>
</div>


横スクロールが出ない指定
<div class="container-fluid">
<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>
</div><!-- /.container -->



  • クラスrowがあることにより、グリッドがブラウザの横幅全体になり左右の余白がなくなります


《bootstrap.css

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
  • row だけ適用(領域が15px広げられる)
  • container-fluid だけを適用(左右に15pxの余白が設けられる)
  • container-fluid と row を適用(左右の余白が相殺されるため、余白は0になる)

container と container-fluid の違い

container-fluid
  • ウィンドウ幅に応じて「内部の幅」を変化させる
container
  • 「内部の幅」を固定してブラウザの中央に配置する