カラーミーキットのグリッドレイアウト

「カラーミーショップ」には有料31種類、無料46種類合わせて77種類のテンプレートが用意されており、htmlやcssの知識が無くても簡単に見栄えの良いショップが作れるようになっていますが、正直無料テンプレートはSEO面であまり良くないです。古いし。

知識があって自分で好きなようにカスタマイズして使いたい！ という人のために「カラーミーキット」というカスタマイズ用テンプレート（無料）があります。

私もカラーミーキットを利用しており、なお且つカラーミーキットを元にした「カラーミーSEO＋」というテンプレートまで作って販売していますが、昨日カラーミーキットのマニュアル（？）のようなページがあることに初めて気が付き目を通していました。

カラーミーキットはBootstrap(*注)によく似た独自のグリッドレイアウトを採用しているのですが、説明が「.rowの子要素に.col .col-lg-[n]のclassを適用させます。」のみ。

知らない人がこれ見て分かる？ と思ったので例を交えて解説してみます。

*注　BootstrapはTwitter社が開発したレスポンシブデザイン構築のフレームワークです。

雑な説明すると、Bootstrapを読み込んでそのルールに従えば自分でcss作らなくても簡単にサイトが作れますよという便利なものです。

グリッドレイアウト

グリッドレイアウトは画面を縦に12分割し、それを基に要素を振り分けていきます。
エクセルなど表計算ソフトのセル、エクセル苦手な人は方眼紙を思い浮かべてください。

よくあるサイトレイアウトをグリッドレイアウトで図にするとこんな感じです。

ヘッダーとフッターは横幅いっぱい（12目盛り）
メインは9目盛り、サイドは3目盛り、
この図を先ほどの説明「.rowの子要素に.col-lg-[n]のclassを適用させます。」 に従ってコーディングします。（[n]は任意の数字）

<div class="row">
　<header class="col-lg-12"> ヘッダーが12目盛り </header>
　<article class="col-lg-9"> メインが9 </article>
　<aside class="col-lg-3"> サイドは3 </aside>
　<footer class="col-lg-12"> フッター12 </footer>
</div>

これでOKです。

12目盛りに収まるように勝手に横並びになるので、 floatや positionを使うことなく、レイアウトを整えることができます。（カラーミーグリッドレイアウトのcssに最初からfloatが入っている）

12を超えてしまったら横並びでなく下にずれます。

仮に、上の例でメインを「10」にすると、サイドの「３」は12目盛りを超えてしまうので横並びにならず、メインの下にきます。

レスポンシブに対応させる

classに使用する col-lg-[n]の真ん中の部分(-lg)は対応させるデバイスサイズを表しています。

カラーミーキットではブレイクポイントを以下のように定義しています。

xs (x-small :480px以下：スマホ端末)
sm (small :768px以下：スマホ〜タブレット）
md (medium :980px以下：タブレット〜デスクトップ）
lg (large :全てのデバイスサイズに適用)

先ほどの例でいえば、-lg がついているので、デスクトップPCで見ても、スマホで見ても同じように表示されてしまいます。

そこで例えば -sm のclassも付けてやることで768px以下のデバイスで見たときの表示を切り替えることができます。

768px以下でアクセスしたときに上図のように全て横100％に表示したいとする場合、

<div class="row">
　<header class="col-lg-12"> ヘッダー12 </header>
　<article class="col-lg-9
col-sm-12"> PCではメイン9 タブレットでは12</article>
　<aside class="col-lg-3 col-sm-12"> PCではサイド3 タブレットでは12</aside>
　<footer class="col-lg-12"> フッター12 </footer>
</div>

としてやればOKです。

カラーミーキットcssのメディアクエリはmax-widthで切り替えています( = 大から小)。

CSSに不慣れな方の為に書いておきますと、上の例ではcol-xs-の指定がありませんが、その場合はcol-sm-の指定が継承されます。

わざわざcol-lg-12 col-md-12 col-sm-12 col-xs-12のような指定をする必要はないということです。

今回分かりやすくページで説明しましたが、実際触るとなるとコンテンツ内部になると思います。

グリッドレイアウトを使えば、

PCではバナーを4つ並べる
798px以下のタブレットでは3並びにする
480px以下のスマホでは縦並びにするなどもcss編集なしで簡単にできます。

cssに追記編集することなくレスポンシブ対応できるので使えれば便利です。
ご参考になりましたなら。