「カラーミーキット（2カラム）」の基本

カラーミーショップで用意されているドキュメントはこちら

必要十分な情報が記載されているのですが、「CSSフレームワーク」を使ったことのある方以外は、取っ掛り難いかもしれません。

出来上がり想像してコーディングし易く、レスポンシブデザインが組みやすいように配慮して、予め沢山のclassが定義されたcssと考えればよいでしょう。

ワイヤーフレームで出来上がりをPC/タブレット/スマホで作って、それに合わせてフレームごとに作ったhtmlに必要なclassを並べていく感じで組みあげていけます。予め定義されたclassについては、テキストのスタイル、パディング、マージン、など沢山あります。cssを見れば、コメントもありますし、htmlでコーディングする最低限の知識があれば難しくないでしょう。

レスポンシブデザインで実際に組んだことがないとグリッドというのが意外にわかりにくいかもしれません。

デバイスのサイズに応じたclassの書き方は以下の表をご参照ください。

それぞれの画面の幅を１２等分していますの、nは１～１２の数字になります。

n=12なら画面幅、n=3なら画面に残りn=9分横に並ぶ（n=3のフレームなら4つ横に並ぶ）

これを必要に応じでそれぞれの画面サイズごとにclassに並べていけばよいだけです。

例えば、

「デスクトップでは4列、タブレットでは2列、スマホなら1列にしたい」なら、「class=”col col-lg-3 col-md-6 col-sm-12″」とすればよいだけです。これらのグループを「<div class=”row”></div>」で括れば、この塊りの中で画面サイズに合わせて表示の並びが変わっていきます。

そのほか、タイポグラフィー、テーブル、ボタン、アイコンなどあります。これはカラーミーキットの説明で必要十分でしょう。

伊予鉄高島屋地下階の延長にある「まつちかタウン」にあり、愛媛県産の農作物を生かしたジェラートを製造・販売をされている「ジェラテリアUNO」様の自社ショップの作成をさせて頂きました。

ショップ作成にあたり、すでに運用されている楽天市場店のデザインをベースにホームページからショップに移った際に違和感が少ないように考慮して作成しました。

今回は、お客様とご相談の結果で、カラーミーショップ で構築させて頂きました。構築にあたり、全部込みの有料テンプレートもありますが、カラーミーショップのテンプレートは比較的触りやすく自由度も高いので、今回は無料のテンプレートをベースに構築させて頂きました。

お客様の様々なデバイスからアクセスの想定と（読みやすい記事作成にあたり配慮が必要となりますが）携帯端末（スマホ、タブレット）向けショップをPCショップに一元管理できるレスポンシブデザインのECサイトにするために、カラーミーキットを使用した無料テンプレートをベースに作成しました。

使用にしたテンプレートは、カラーミーキット(2カラム)をベースにWASHIの一部を流用して作成しました。

レスポンシブなホームページの作成は、何度もしましたが、テンプレート/テーマのマイナーチェンジで対応した物件が多く、ほとんどのケースでは（出来上がり確認時以外は）レスポンシブデザインを意識しないで構築できていますが、今回は改めてレスポンシブデザインを意識して作成しました。

（次回に続く）

出来上がったショップは↓