合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

日: 2017年4月4日

「カラーミーキット(2カラム)」の基本

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

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

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

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

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

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

class 参照デバイス デバイスサイズ
.col-lg-[n] デスクトップ 全てのデバイスサイズに適用
.col-md-[n] デスクトップ~タブレット 980px以下のデバイスに適用
.col-sm-[n] タブレット~スマートフォン 768px以下のデバイスに適用
.col-xs-[n] スマートフォン 480px以下のデバイスに適用

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

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の一部を流用して作成しました。

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

(次回に続く)

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

愛媛産ジェラート・アイスクリームのジェラテリアUNOのカラーミーショップ

お気軽にお問合せ下さい
(パソコンのこと、格安システム構築、ホームページ作成、運用サポートなど)




弊社Yahooショップ

ヤフーショップ 百寿健康工房 トマトケチャップ、トマトジュースなど販売