System(グリッドシステム)についてを初心者の方にも分かりやすく解説していきます。System(グリッドシステム)とは、Bootstrapで作成できる12カラムのシステムと、5段階のレスポンシブ、Sassとmixinでいくつかの定義されたクラスですべての図形とサイズのレイアウトが作成可能な仕組みの事を言います。初めは理解するのに時間が掛かりますが、理解するとコーディングが一気に楽になります。当記事で”なるべく分かりやすく”を意識して解説してますので諦めかけている方は、是非最後まで読んで下さい。Bootstrapについて理解していない方は以下の記事を初めに読んで下さい。今回はWEB制作でよく使用される「Bootstrap」と言われるものについての説明と使い方の解説をします。WEB制作のリアルな現場ではBootstrapをかなり多用します。WEB制作の経験が浅い方や、これからWEB制作系の仕事をしたいって方は必ず覚えておいた方が良い事です。System(グリッドシステム)を使うと以下の様にカラムレイアウトを簡単に作成でき、尚レスポンシブにも簡単に対応することが出来ます。System(グリッドシステム)を使うには以下のclassを必ず使用しますので覚えておきましょう。System(グリッドシステム)はrow(行)に対して12カラム(列)存在します。HTMLの要素毎に、この12カラムのうち何カラムを使用するかを指定する事が出来ます。containerクラスで一つのグループとしてのコンテナを作成し、rowクラスで横列を作成します。その中にcol-○○のクラスを指定することで、そのサイズ、その数字分のカラムを使用します。以下のHTMLの場合、各ブロックの入ったdiv要素をcol-4のクラスを指定していますので、4カラム使用している事になります。</div>ただし、これだけだと以下のようにスマホ時でも1行に対して4カラムずつ使用する事になります。これだとレスポンシブにはなっていません。そこで次にレスポンシブ対応するために重要なクラスの説明をします。グリッドシステムのレスポンシブ対応グリッドシステムのカラムに関するクラスには、端末サイズ毎に振り分けを付ける事が可能です。いわゆるCSSのブレイクポイントになっており、その指定したサイズに先程のカラムを適応させ、それ意外のCSSを外せる様になっています。これを使ってレスポンシブ対応します。各端末サイズ毎のクラスは以下の様になっています。1200px以上に適応(PC)これを使って先程のHTMLをレスポンシブ化にしたい場合は、以下のようにcol-sm-4を付けてあげれば良いのです。</div>この仕組みを利用して以下の様にクラスを振り分ければ、スマホ時は1カラム、スマホ横時は2カラム、iPadとPCは3カラムと端末毎に最適なレイアウトに可変する事が出来ます。</div>col-sm-6はスマホ横(≥576px)では6カラム使用=2カラム、col-md-4はiPadとPC(≥768px)では4カラム使用=3カラム。それ以外は1カラムになります。言ったように、複数のクラスを端末毎に考えて付けている指示です。以上が「Bootstrapのグリッドシステムの使い方を解説【初心者向け】」でした。これを理解するとBootstrapを一気に好きになると思います。いずれにしても、この仕組みを使ったサイトが非常に多いのでWEB制作の世界では必須な知識です。