期間限定 新規アプリ登録キャンペーン 会員登録で100ポイントプレゼント

トップビジュアル (H2)

フリーページ作成用の標準モジュールです。
本モジュールで使用するスタイルシートは下記URLから確認・参照下さい。

PC版
http://www.cainz.com/css/pages.css

スマホ版
http://www.cainz.com/css/smartpn2.css

汎用の商品一覧を中心としたスタイルセットを用意しています。
今後「こういったスタイルが欲しい」というリクエストがありましたら順次追加予定ですのでご連絡下さい。

リード文には「.lead」を使用します。また段落の最後のブロックには「.end」を追記することで下マージンを余分に確保することが出来ます。

制作時の基本ルール

  1. ページのタイトルには必ず後ろに「 - 」を記載することを共通ルールとします。
  2. 編集エリア冒頭で/js/heightLine.jsを読み込み、大外を「#sp」というボックスで囲みます。そうすることで下記の汎用スタイルを使用することができます。
  3. ページ内において英数字は極力半角で使用して下さい。
    「×:HDDレコーダー 300円」→「○:HDDレコーダー 300円」
    2バイト文字は通常の2倍の文字数を食いますので、半角で済ませられるものはできる限り半角で済ませることでムダな文字数消費を避けましょう。

アンカーメニューメニュー「.lmn」

ページ上部に配置されるアンカーメニューです。(ボタンの矢印が下向き)

外部リンクメニュー「.rmn」

外部ページへのリンクメニューです。(ボタンの矢印が右向き)

商品用1カラム「.p_col1」

汎用1カラム用のスタイルです。商品一覧カラムは基本的にすべて同じHTML構造で、1番外側のdivに設定するクラスを変更することでカラム数を変更することが出来ます。カラム数によって画像のサイズだけは変更となりますのでご注意下さい。
また基本的に「.p_col*」には「.clrfix」と「.heightLineParent」を併記して下さい。(.p_col1は除く)
カラムが複数段に渡る場合は最後の段にのみ「.end」を追記し、次のカテゴリとのマージンをとります。

画像

商品名 (H4)
新発売 限定商品

00,000円(税込)

画像のサイズはスタイルで自動設定になりますので「.p_col*」の商品画像においてwidthとheightの設定は不要です。全カラム共通で使用できる、商品名に簡易的なアイコンっぽい表現をするための「.icn」というスタイルを用意しています。
「.red」「.blue」を併記することでそれぞれ色を設定して使用して下さい。

購入

商品用2カラム「.p_col2」

商品用2カラム用のスタイルです。
2カラムは画像とテキストを上下に並べるタイプと左右に並べるタイプの2種類が存在します。左右並びレイアウトの場合には「.side」を追記することで対応します。
また2カラム以上の共通ルールとして一番左側の商品のボックスには「.fst」を記載して下さい。

画像

商品名 (H4)

0,000円(税込)

これが上下並びです。
画像のサイズはスタイルで自動設定になります。

購入

画像

商品名 (H4)

0,000円(税込)

これが上下並びです。
画像のサイズはスタイルで自動設定になります。

購入

画像

商品名 (H4)

0,000円(税込)

これが左右並びです。
画像のサイズはスタイルで自動設定になります。

購入

画像

商品名 (H4)

0,000円(税込)

これが左右並びです。
画像のサイズはスタイルで自動設定です。

購入

商品用3カラム「.p_col3」

商品用3カラムのスタイルです。

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

商品用4カラム「.p_col4」

商品用4カラムのスタイルです。

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

画像

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

商品用5カラム「.p_col5」

商品用5カラムのスタイルです。

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

商品名 (H4)

0,000円(税込)

画像のサイズはスタイルで自動設定です。

購入

汎用カラム

構成上レイアウトを組む際に利用できるスタイルです。
全体を「.clrfix」で囲い、それぞれのカラムに「.col」を設定して下さい。
2カラム、3カラム、4カラムのサイズパターンを用意しており、それぞれ「.w_1-2」「.w_1-3」「.w_1-4」で指定できます。
最後のカラムに必ず「.last」を指定して下さい。
またカラムが複数段に渡る場合は最後の段にのみ「.end」を追記し、次のカテゴリとのマージンをとります。

 

汎用2カラム

汎用2カラムパターンです。
「.w_1-2」を指定することでカラムのwidthをコンテンツエリアの1/2 (380px) に設定します。

汎用3カラム

汎用3カラムパターンです。
「.w_1-3」を指定することでカラムのwidthをコンテンツエリアの1/3 (250px) に設定します。

汎用3カラムパターンです。
「.w_1-3」を指定することでカラムのwidthをコンテンツエリアの1/3 (250px) に設定します。

汎用4カラム

汎用4カラムパターンです。
「.w_1-4」を指定することでカラムのwidthをコンテンツエリアの1/4 (185px) に設定します。

汎用4カラムパターンです。
「.w_1-4」を指定することでカラムのwidthをコンテンツエリアの1/4 (185px) に設定します。

汎用4カラムパターンです。
「.w_1-4」を指定することでカラムのwidthをコンテンツエリアの1/4 (185px) に設定します。

汎用2カラム+4カラム

4カラムサイズと2カラムサイズは組み合わせての使用が可能です。

4カラムサイズと2カラムサイズは組み合わせての使用が可能です。

汎用テーブル

汎用テーブルはtableタグに「.tbl01」を設定することで使用できます。
全体のwidthは770pxに固定していますがセルのwidthは指定していませんので用途に合わせてインラインで設定して下さい。

見出し
見出し
見出し
見出し 見出し 見出し

その他の汎用スタイル

その他どこでも使える汎用のスタイルとして下記のようなものを用意しています。
上記カラム系のスタイルと併用することでイレギュラーに対応して下さい。

見出しタイプA:.tit_A

見出しタイプB:.tit_B

見出しタイプC:.tit_C

キャッチコピー用:.catch

赤文字「.red」青文字「.blue」

テキスト左よせ「.aleft」

テキスト中央よせ「.acenter」

テキスト中央よせ「.aright」


↑区切り線「.bdr」(divに設定してhrを挟み込んで使って下さい)

文頭にマーカーを付ける「.forward」

枠付ボックス「.bdrbox」

  • 汎用リスト「.list01」
  • 汎用リスト「.list01」
  1. 汎用数字リスト「.list01」
  2. 汎用数字リスト「.list01」

その他、下マージンを調整するためのスタイルとして「.mb5」「.mb10」「.mb15」「.mb20」「.mb30」「.mb40」「.mb50」とインデント用の「.ml20」を用意しています。

また、ショップ導線バナーは以下のテンプレートを流用して下さい。

  • お近くの店舗で探す
  • オンラインショップで購入する

<ul class="btns end">
<li class="toshop"><a href="http://www.cainz.co.jp/shop/" tlte="店舗検索" target="_blank"><img src="/img/pages/common/btn_shop.gif" alt="お近くの店舗で探す" width="375"></a></li>
<li class="toonline"><a href="/shop/" tlte="カインズオンライン"><img src="/img/pages/common/btn_online.gif" alt="オンラインショップで購入する" width="375"></a></li>
</ul>