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

カラーミーショップで、レスポンシブデザイン ECサイトを作成する その2

掲載日: / 更新日:
カラーミーショップで、レスポンシブデザイン ECサイトを作成する その2

「カラーミーキット(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>」で括れば、この塊りの中で画面サイズに合わせて表示の並びが変わっていきます。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA