2016.12.07カラーミーショップにてサイト制作中(その4)カラーミーキットとは?ツイートシェアはてブ送るPocketネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。制作中に気づいた点・感じたことなどを書きます。*カラーミーショップカラーミーキットとは?カラーミーショップには、「カラーミーキット」という公式のCSSフレームワークがあります。*カラーミーキットBootstrapの改変版・簡易版みたいなやつで、Bootstrapに慣れている人ならすぐに理解できると思います。Bootstrapに比べるとバーツ群が貧弱ですが、とりあえずレスポンシブでグリッドだけ使いたいという人にはピッタリかもしれません。導入は、設定のテンプレート追加画面から「カラーミーキット(2カラム)」を追加するだけでOKです。PCファーストのグリッドカラーミーキットのグリッドの記述方法は、クラス「col-xs-6」みたいな感じでBootstrapと同じですが、2つ大きな違いがあります。全てのデバイスサイズに適用されるクラスはBootstrapの場合、col-xs-[n]となりますが、カラーミーキットの場合は逆に、col-lg-[n]になってます。Bootstrapの場合はモバイルファースト。カラーミーキットの場合は、ECサイトという性質のためか、発想がPCファーストになってます。ブレイクポイントとクラスの規定が違う2つ目。ブレイクポイントとクラスの規定が違います。768pxcol-xs-[n]:480px以下モバイルファーストとPCファーストの違いのため、順番も逆に書いてます。カラーミーキットはBootstrapに比べて、一段階小さめにブレイクポイントを規定していますね。◇グリッドの発想が逆(PCファースト)◇ブレイクポイントとクラスの規定が違う◇パーツが貧弱この3つになります。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。