【マナブログ】Bootstrapのグリッドシステムをサクッとおさらい【ロードマップ】

プログラミング

こんばんは、あおです。

今回は「Bootstrapのグリッドシステム」についてお伝えしていきます。

 

Bootstpap、またはBootstrapのグリッドシステムをざっくり知りたい!
または、マナブさん(@manabubannai)のロードマップを勉強してる!
という方を想定して書きました。

マナブさん(@manabubannai)のロードマップを勉強されている方は、

今回は、9.Bootstrapを理解しようの項目です!
読むべき記事の、1本目のまとめになります。

時間がたって忘れっちゃったり、復習するときに参考になれば幸いです!

 

スポンサーリンク

Bootstrapとは

・Twitter社が開発しているCSSフレームワーク
ウェブサイト制作時に使用頻度の高いスタイルをひとまとめにしたパッケージ
Bootstrap

あらかじめ見栄えのいいスタイルが色々準備されており、
デザインに自信のない人でもおしゃれなウェブサイトが作れる。

複雑なレイアウトでも爆速でレスポンシブデザインを実現してくれる。
→肝になるのが「グリッドシステム」

 

グリッドシステムとは

サイトの横幅を均等に分けるガイドラインを「グリッド」と呼ぶ。
(Bootstrapでは12本のグリッドがある)

グリッドに沿って表示物を配置すると画面幅が異なってもレイアウトを組み替えやすくなる。

このグリッドを活用してレイアウトできる仕組みのこと。

 

3つのCSSクラス

.container

・.rowと.colを格納している。

・決められてサイズを持っている

ブレイクポイント:レイアウトが切り替わる画面幅

.container-fluid

ブラウザのウィンドウ幅いっぱいに広がる。
(ウィンドウサイズを変えると、.container-fluidも流動的に変化する)

.row

・行を与えるクラス
・上から下へ並ぶ
・.rowの中に.colを定義してレイアウトを組む

.col

・列を表すクラス
・右から左に並ぶ
・「.col-画面幅-グリッド数」で、「この画面では、この個数のグリッド」ということを指定する。

ex)
<div  class=”.col-md-6″>
<div  class=”.col-md-6″>

→画面サイズMedium、グリッド6個を使ったカラムが2個ある。

★レスポンシブを作るときは、ブレイクポイント毎にサイズをクラスを複数与える。


※注意ポイント※

Bootstrapはモバイルファースト!
モバイルからスタイルを定義していくので、レスポンシブさせるときは
「この画面より大きい場合は、このスタイル」という感じで書く。

3つのクラスの実例

《HTML》

<div class=”container”>
<div class=”row”>
<div class=”col-lg-8″>
<div class=”row”>
<div class=”col-xs-6″></div>
<div class=”col-xs-6″></div>
<div class=”col-xs-6″></div>
<div class=”col-xs-6″></div>
</div>
<div class=”col-lg-4″></div>
</div>
</div>

画面サイズが「Extrasmall」の場合

画面サイズが「Large」の場合

 

 

 

以上が、Bootstrapとbootstrapのグリッドシステムのざっくりとしたまとめでした!

マナブさん(@manabubannai)のロードマップを勉強されている方は、

ここまでが、Bootstrapでの読んでおくべき記事の1本目

Bootstrapのグリッドシステムの使い方を初心者にむけておさらいする

のざっくりまとめでした!

アウトプットすると自分の頭にもしっかり入りやすことに気づいたので、
マナブさん(@manabubannai)のロードマップを進めていく上で、
躓いた個所の解説や、まとめたものを記事にしていこうと思います!

そこで躓いてた!って時や、復習、忘れっちゃったって時に参考になれば幸いです!
また、そこ理解の仕方違うよ~っというのがありましたら、教えていただけると嬉しいです!

更新時にslackとTwitterで発信していこうと思います。
興味あるけどslack登録してないって方は、
Twitterのあお(@aaaaa500000o)をフォローして頂けると幸いです。

コメント

タイトルとURLをコピーしました