カラーミーSEO+の構成（レイアウト）について

SEO+テンプレートはシンプルな構成です。

上から順番に

と並んでいるだけです。（カッコ内は商品詳細ページのみ）

各要素の中はflexで配置しているので、ウィンドウサイズに合わせて自動で伸縮、または段組みします。

商品詳細ページのみサイドバー（Aside）が表示されるようになっています（*PC表示のみ）が、不要なら削除しても良いかと思います。

レイアウトはカラーミーGrid + flexbox

ページレイアウトや、商品一覧のようなリスト表示は全てカラーミー独自のGridシステムを流用し、flexで再定義しているので、クラス名「col-」を書き換えることでレイアウトを変更することができます。

カラーミーGridシステムの詳細や変更法については「カラーミーキットのグリッドレイアウト」をご参照ください。少しだけ違いますがBootstrap v2のレイアウトとほとんど同じです。

SEO+テンプレートは、ブラウザのウィンドウサイズによって表示を変えるレスポンシブデザインです。

【SEO+の基本ブレイクポイント】

PC　　　　・・981px以上

タブレット　・・601px以上 980px以下

スマホ　　　・・600px以下

先述のGridシステムについては、カラーミー共通のCSSに従うことになるため以下のような分け方となります。

初期状態のSEO+テンプレートでは、col-md- は使用していないので、 -xs- -sm- -lg- のみでレイアウト決めしています。