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

2019年8月18日2019年11月27日

「カラーミーショップ」には有料31種類、無料46種類合わせて77種類のテンプレートが用意されており、htmlやcssの知識が無くても簡単に見栄えの良いショップが作れるようになっていますが、知識があって自分で好きなようにカスタマイズして使いたい！ という人のために「カラーミーキット」というカスタマイズ用テンプレート（無料）があります。

私もカラーミーキットを利用していますが、昨日そのマニュアル（？）のようなページがあることに初めて気が付き目を通していました。

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

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

グリッドレイアウト

Bootstrapのグリッドレイアウトは画面を縦に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を使うことなく、レイアウトを整えることができます。

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です。

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

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

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

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

カラーミー　テンプレート「SEO+」

• SEO基本設定済み
• サイト回遊性アップ
• トップページにスライド配置
• 商品画像スライド
• 「お気に入り」機能実装
• ご注文後は何度でも最新版を無償ダウンロード
• 2019年内は41%オフ

SEO+ デモサイト