【Bootstrap】の使い方②便利なグリッドシステム！画像＆動画付き「過保護説明」

Bootstrapの導入～使い方の基礎の基礎については、下記の記事に書きました。

【Bootstrap】の使い方①初心者向けの画像＆動画付き「過保護説明」

今回はBoostrapの要である「グリッドシステム」について、説明したいと思います(^^)

これ、めちゃくちゃ便利ですっ！！！動画を見てから読むと、分かりやすいかと思います。

グリッドシステムとは？

グリッドシステムとは、レイアウトをブロックごとに配置し、無駄なくすっきりとデザインする方法のこと。

Boostrapでは、横幅を12等分してデザインしていくシステムを導入しています。

まずはスキームを覚えよう！

Container（箱）の中に、row（行）とcol（列）があるという感じです。Colについては12列と決まっています。

また、ブレークポイントごとに、Containerのサイズも決まっています。

特に、レスポンシブデザインでは、横並びや横幅に苦労しますが、横が12列と決まっているため、ブロックを配置するように、簡単にデザイン出来ちゃいます♪

上記に出てくる用語を一つづつ確認していきますね！

Container

読んで字のごとく、箱のことですね！この中に、rowとcolを組み立てていく感じです。

row

行のことです。そのまんまですね！下に並んでいきます。

colum

列のことです。Bootstrapでは12等分し、この数を指定することで、横幅を決めて行きます。

Breakpointとは？

次に、ブレークポイントについて、簡単に説明します。

ブレークポイントとは、レスポンシブデザインにおいて、画面が切り替わるポイントのこと。例えば、PC画面が、スマホ画面に切り替わるポイント。

このブレークポイントは、Bootstrapでは、すでにサイズが5段階と決まっており、下記の通りになります。

通常だと、pxで数値を細かく設定しないとですが、Boostrapでは、上記のそれぞれの画面幅になった時に、箱と幅がすでに計算された、コミコミパックになっています。

ブレークポイントの記述には、xs、sm、md、lg、xlが使用されます。

コードをこのまんま覚えてしまおう！

スキームのデザイン（Containerの中に、rowとcolがある）のイメージそのまんまのコードになります。これはもう、そういうものだと覚えてしまうといいかと思います。

上記3番目の「colの部分」の記述の説明は、下記のようになります。

通常のhtmlの書き方とちょっと異なる点と言えば、colとブレークポイントとサイズの間が、”ー（半角ハイフン）”であることでしょうか。

また、シンプル過ぎるくらいシンプルなので、逆に戸惑うかもしれません(^_^;)

marginとpaddingの記述方法

ブレークポイントと同じ要領なのですが、例えば、margin-topは「mt」、padding-bottomは「pb」など、シンプルにそれぞれの頭文字を取っただけです( ﾟДﾟ)

※指定なしのmarginは「m」、paddingは「p」です。

記述方法は、colと同じで、下記の通りになります！

ちなみに、このサイズというのも、Bootstrapでは決まっておりまして、0～5の5段階となっています。

0	0	0
1	1rem	約10px
2	2rem	約20px
3	3rem	約30px
4	4rem	約40px
5	5rem	約50px

サイズの記述方法

ここまで来たら、もうお気づきかもしれませんが、width（幅）とheight（高さ）も、頭文字で指定していきます。

width（幅）

こちらものサイズも、Bootstrapでは決まっておりまして、25%、50%、75%、100%、autoの5種類になります。

height（高さ）

幅と同じく、25%、50%、75%、100%、autoの5種類になります。

サイズに関しては、「Documentation」→「utilities」→「sizing」にて、記載方法が紹介されていますので、是非参考にしてみてください(^^)

色の記述方法

色の指定は、通常の記述ではなく、上記のように「primary＝blue」だったり、Boostrap内での定義があります。

公式サイトの「Documentation」→「utilities」→「color」にて、カラーやデザインの見本と、記載方法が紹介されていますので、是非参考にしてみてください(^^)

まとめ

とりあえず、Bootstrapの基礎は、こちらの記事とこの記事で十分かなと思います。

レスポンシブデザインが、各段に楽になるので、これらだけでも、是非使いこなしてみてください！

以上です「！