itデザインはグリッドに始まりグリッドに終わるといわれるように、Bootstrap3でもグリッドシステムは単なるコーディングにとどまらず、デザインの一部として非常に重要な要素となっています。グリッドをうまく使えるかどうかがデザイナーとしての評価の分かれ道にもなるため、デザイナーとしてしっかり覚えておきたいBootstrap3のグリッドシステムの使い方を確認しておきましょう。Bootstrap3のグリッドレイアウトとは?Bootstrap3にはモバイルファーストで作られたレスポンシブなグリッドシステムが搭載されています。Bootstrap3のグリッドシステムは、画面幅を12分割して作られており、1〜12のカラムを指定することでレイアウトを作っていきます。グリッドを作るにはHTMLタグ(divなど)にclassを追加するだけ。class="col-xs-4"&gt;&lt;/div&gt;グリッドはPC画面だけでなく、モバイルやタブレット用にも作ることができます。このように複数の画面サイズに対応したレイアウトをレスポンシブ(可変)レイアウトと呼んでいます(レスポンシブの作り方については次回の記事参照)。Bootstrap3のグリッドを使ったレイアウトの作り方Bootstrap3では画面幅を12分割したレイアウトを作ることができます。分割されたグリッドの列をカラムといい、カラムはRow(行)の中に入れて作成します。12列のグリッドを作りたいときは以下のようになります。12列なので1カラムのグリッドを12個作ればOK。class="col-xs-1"&gt;&lt;/div&gt;&lt;/div&gt;同様に3列のグリッドを作りたいときは以下のようにします。4カラムのグリッドを3つ(4*3=12)作るだけ。class="col-xs-4"&gt;&lt;/div&gt;&lt;/div&gt;以下のように合計が12を超えてしまう場合は、3つ目のdiv要素が次の行にずれます。横幅は必ず12(以下)になるよう注意が必要ですね。class="col-xs-5"&gt;&lt;/div&gt;&lt;/div&gt;逆に、ずれることを利用して3*3のイメージギャラリーのような表示も可能。class="col-xs-4"&gt;&lt;/div&gt;&lt;/div&gt;また、通常のwebサイトのようにメインカラムとサイドカラムを作るとこんな感じになります。以前ならfloatやpositionなどを駆使して作ってたものが、簡単に表示できます。class="col-xs-4"&gt;&lt;/div&gt;&lt;/div&gt;このように横幅は最大12カラムになるということに注意すれば簡単にグリッドを作成できますね。デモページはこちらカラムの書き方について.col-xs-4と何も説明せずに書きましたが、この書き方をもう少し細かく書くとこんな感じ。カラムを作るときはこれで始める。レスポンシブの際に必要。この場合は「モバイルサイズ以上で」という意味。横幅が12以下になるようにします。1〜12まで使用可能。レスポンシブって何か難しそうなイメージですが、やることは簡単。このxsの部分を変更するだけで、タブレットで有効なレイアウトやPC画面のみ有効なレイアウトなどを作ることができるんです。レスポンシブについてはまた次回。SugimoriBootstrapやCMSを使ったテンプレートの作成やカスタマイズ、既存サイトのレスポンシブ化など、多くの案件でフロントエンドを担当。現在はテンプレートエンジニアとしてTetraThemesでテンプレートを開発中。最近ブログの記事はMarkdownで書いているのですが、ふと思ったのが、Markdownで書いたブログ記事ってSEO的に大丈夫なの?ってことです。前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。一度間違ってないか確認しておきましょう。classic1はカラーミーショップ向けレスポンシブテンプレート。カラーミーキットに対応、高品質なスライダー対応、スマートフォンに最適化されたナビゲーションメニューを搭載。CubeMartはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。こちらのメインテーマはベージュです。minimal1はカラーミーショップ向けレスポンシブテンプレート。カラーミーキットに対応、高品質なスライダー同梱、スマートフォンに最適化されたナビゲーションメニューを搭載。CubeMartはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。こちらはシンプルな白をベースとしたテーマカラーとなっています。minimal2はカラーミーショップ向けレスポンシブテンプレート。カラーミーキットに対応、高品質なスライダー同梱、スマートフォンに最適化されたナビゲーションメニューを搭載。TetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。お知らせ【お知らせ】サイトを移行しました。{td_theme_css.after(splited_css);}}});}})();。