カラーミーキット

あなたのアイデアをすばやく実現するフレームワーク。

カラーミーキットはテンプレートのデザイン作業をより効率よくするフレームワークです。
制作会社や個人のデザイナーのショップテンプレート作成を強力にバックアップします。

はじめに

カラーミーキット用のテンプレートをダウンロードしカスタマイズしてください。

テンプレートダウンロード方法

テンプレート追加ページ（ログインが必要）から「カラーミーキット（2カラム）」を追加してください。

カスタマイズ方法

「カラーミーキット（2カラム）」は<head>にてカラーミーキットのCSSを読み込んだ後に各テンプレートのCSSが読み込まれる仕様となっています。

HTML

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=euc-jp" />
  ...
  <!-- カラーミーキット -->
  <link rel="stylesheet" href="http://.../colormekit.css" type="text/css" />
  <link rel="stylesheet" href="http://.../colormekit-responsive.css" type="text/css" />
  <!-- 各テンプレートCSS -->
  <link rel="stylesheet" href="http://.../index.css" type="text/css" />
  <link rel="stylesheet" href="http://.../top.css" type="text/css" />
  ...
  <script type="text/javascript" src="http://.../js/jquery-1.7.2.min.js"></script>
  </head>
  <body>
  </body>
  </html>

対応ブラウザ

カラーミーキットが対応するブラウザは以下のとおりです。

グリッド

カラーミーキットなら、PC、タブレット、スマートフォンに対応したレスポンシブなグリッドレイアウトを簡単に作成することができます。

グリッドレイアウトの基本形

.rowの子要素に.col .col-lg-[n]のclassを適用させます。

HTML

<div class="row">
  <div class="col col-lg-[n]"></div>
  ...
  <div class="col col-lg-[n]"></div>
</div>

EXAMPLE

col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1

col-lg-3
col-md-6
col-lg-3
col-md-6
col-lg-3
col-md-6
col-lg-3
col-md-6

col-lg-4
col-sm-12
col-lg-4
col-sm-12
col-lg-4
col-sm-12

HTML

<div class="row">
  <div class="col col-lg-1">
    col-lg-1
  </div>
  ...
  <div class="col col-lg-1">
    col-lg-1
  </div>
</div>

<div class="row">
  <div class="col col-md-6 col-lg-3">
    col-lg-3 col-md-6
  </div>
  ...
  <div class="col col-md-6 col-lg-3">
    col-lg-3 col-md-6
  </div>
</div>

<div class="row">
  <div class="col col-lg-4 col-sm-12">
    col-lg-4 col-sm-12
  </div>
  ...
  <div class="col col-lg-4 col-sm-12">
    col-lg-4 col-sm-12
  </div>
</div>

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

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

デバイスサイズ毎のスタイル適用と表示切り替えについて

/* 全てのデバイスサイズに適用 */

@media (max-width: 980px) {
  /* デバイスサイズ 980px以下に適用 */
}

@media (max-width: 768px) {
  /* デバイスサイズ 768px以下に適用 */
}

@media (max-width: 480px) {
  /* デバイスサイズ 480px以下に適用 */
}
class 768px 以下 980px 以下 981px 以上
.visible-phone 表示 非表示 非表示
.visible-tablet 非表示 表示 非表示
.visible-desktop 非表示 非表示 表示
.hidden-phone 非表示 表示 表示
.hidden-tablet 表示 非表示 表示
.hidden-desktop 表示 表示 非表示

EXAMPLE

ウィンドウのサイズによって表示が切り替わります。

visible
.visible-phone
.visible-phone
.visible-tablet
.visible-tablet
.visible-desktop
.visible-desktop
hidden
.hidden-phone
.hidden-phone
.hidden-tablet
.hidden-tablet
.hidden-desktop
.hidden-desktop

タイポグラフィー

見出し

EXAMPLE

h1. カラーミーショップのお店

h2. カラーミーショップのお店

h3. カラーミーショップのお店

h4. カラーミーショップのお店

h5. カラーミーショップのお店
h6. カラーミーショップのお店

HTML

<h1>h1. カラーミーショップのお店</h1>
<h2>h2. カラーミーショップのお店</h2>
<h3>h3. カラーミーショップのお店</h3>
<h4>h4. カラーミーショップのお店</h4>
<h5>h5. カラーミーショップのお店</h5>
<h6>h6. カラーミーショップのお店</h6>

リスト

EXAMPLE

  • リストテキスト
  • リストテキスト
  • リストテキスト
  1. リストテキスト
  2. リストテキスト
  3. リストテキスト

HTML

<ul>
  <li>...</li>
</ul>

<ol>
  <li>...</li>
</ol>

.unstyled

EXAMPLE

  • リストテキスト
  • リストテキスト
  • リストテキスト
  1. リストテキスト
  2. リストテキスト
  3. リストテキスト

HTML

<ul class="unstyled">
  <li>...</li>
</ul>

<ol class="unstyled">
  <li>...</li>
</ol>

.inline

EXAMPLE

  • リストテキスト
  • リストテキスト
  • リストテキスト

HTML

<ul class="inline">
  <li>...</li>
</ul>

<ol class="inline">
  <li>...</li>
</ol>

テーブル

通常

EXAMPLE

色 在庫
ブラック ◯
ブルー 残りわずか
パープル ×
レッド ×

HTML

<table class="table">
  ...
</table>

.table-striped

EXAMPLE

色 在庫
ブラック ◯
ブルー 残りわずか
パープル ×
レッド ×

HTML

<table class="table table-striped">
  ...
</table>

.table-bordered

EXAMPLE

色 在庫
ブラック ◯
ブルー 残りわずか
パープル ×
レッド ×

HTML

<table class="table table-bordered">
  ...
</table>

.table-hover

EXAMPLE

色 在庫
ブラック ◯
ブルー 残りわずか
パープル ×
レッド ×

HTML

<table class="table table-hover">
  ...
<table>

.table-condensed

EXAMPLE

色 在庫
ブラック ◯
ブルー 残りわずか
パープル ×
レッド ×

HTML

<table class="table table-condensed">
  ...
<table>

ボタン

<a><button><input>等に.btnというclassを適用させることでボタンが形成されます。

EXAMPLE

HTML

<button class="btn">.btn</button>
<button class="btn btn-xlg">.btn .btn-xlg</button>
<button class="btn btn-lg">.btn .btn-lg</button>
<button class="btn btn-sm">.btn .btn-sm</button>
<button class="btn btn-xs">.btn .btn-xs</button>
<button class="btn btn-block">.btn .btn-block</button>
<button class="btn disabled">.btn .disabled</button>

アイコン

16pxと24pxの2サイズ用意されています。
適用するclassによって、アイコンの色を切り替えることができます。

カラーミーキット（2カラム）では一部のアイコンCSSのみ実装しているので、使用するアイコンのCSSを以下より選んでテンプレートに追加してください。

EXAMPLE

HTML

<i class="icon-b icon-phone"></i> <!-- 16px 黒アイコンを表示 -->
<i class="icon-w icon-phone"></i> <!-- 16px 白アイコンを表示 -->
<i class="icon-lg-b icon-phone"></i> <!-- 24px 黒アイコンを表示 -->
<i class="icon-lg-w icon-phone"></i> <!-- 24px 白アイコンを表示 -->

カラーミーキットではアイコンに「Entypo」を採用しています。「Entypo」のアイコンはCC BY-SA 3.0のライセンスの基で使用されています。
Pictograms designed by
Daniel Bruce ― Twitter, Dribbble & e-mail

/* 16px black */
.icon-b.icon-text_doc {
  background-position: -208px -96px;
}
/* 16px white */
.icon-w.icon-text_doc {
  background-position: -208px -96px;
}
/* 24px black */
.icon-lg-b.icon-text_doc {
  background-position: -312px -144px;
}
/* 24px white */
.icon-lg-w.icon-text_doc {
  background-position: -312px -144px;
}
/* 16px black */
.icon-b.icon-text_doc_inverted {
  background-position: -224px -96px;
}
/* 16px white */
.icon-w.icon-text_doc_inverted {
  background-position: -224px -96px;
}
/* 24px black */
.icon-lg-b.icon-text_doc_inverted {
  background-position: -336px -144px;
}
/* 24px white */
.icon-lg-w.icon-text_doc_inverted {
  background-position: -336px -144px;
}
カラーミーショップ by GMOペパボ
サービス情報
制作会社・提携会社さまへ
運営ノウハウ
GMOペパボ株式会社

カラーミーショップ © 2005 GMOペパボ株式会社