コーディングルール

命名ルール

• id名
  パスカルケースを使用（各単語の先頭を大文字）
  （例）InfoArea、SubmitBtn　など ※ただし、idは基本的に使用しない。
• class名
  キャメルケースを使用（先頭が小文字、それ以降の単語の先頭を大文字）
  （例）detail、personNameなど
  
  /css/common.css で使用するclassには、以下の接頭語を必ず付加する。
  ・汎用クラス：「.c_xxx」（common）
  ・フレームモジュール：「f_xxx」（frame）
  ・モジュール：「m_xxx」（module）
  ・モジュール内のパーツ：「.p_xxx」（parts）
  ・モジュールの状態：「.s_xxx」（state）
  ※JSのみで使用：「.js_xxx」

CSSについて

• 各ページに個別のCSS設定が必要な場合は、専用のCSSファイルを作成して使用する。
  ※個別CSSでは上記の接頭語は使用しない。

html記述ルール

• 自ページよりも上位のフォルダへのリンクは「ルートパス」、自ページと同階層および下層へのリンクは「相対パス」で記述する
• リンク設定の際、「index.html」は省略し、「/」終わりとする

テキスト系

• .c_fontL
  font-size: 1.8rem; （18px）
• .c_fontLL
  font-size: 2rem; （20px）
• .c_fontXL
  font-size: 2.2rem; （22px）
• .c_fontS
  font-size: 1.4rem; （14px）
• .c_fontSS
  font-size: 1.3rem; （13px）
• .c_fontXS
  font-size: 1.2rem; （12px）
• .c_fontBold
  font-weight: bold;
• .c_colorRed
  color: #e90000;

レイアウト系

• .c_clearfix
  clearfix
• .c_ofHidden
  overflow: hidden;
• .c_floatL
  float: left;
• .c_floatR
  float: right;
• .c_taLeft
  text-align: left;
• .c_taCenter
  text-align: center;
• .c_taRight
  text-align: right;
• .c_vaTop
  vertical-align: top;
• .c_vaMdl
  vertical-align: middle;
• .c_vaBtm
  vertical-align: bottom;

マージン・パディング

• .c_mt0
  mergin-top: 0px;
• .c_mt3
  mergin-top: 3px;
• .c_mt5
  mergin-top: 5px;
• .c_mt10
  mergin-top: 10px;
• .c_mt15
  mergin-top: 15px;
• .c_mt20
  mergin-top: 20px;
• .c_mt25
  mergin-top: 25px;
• .c_mt30
  mergin-top: 30px;
• .c_mt35
  mergin-top: 35px;
• .c_mt40
  mergin-top: 40px;
• .c_mt45
  mergin-top: 45px;
• .c_mt50
  mergin-top: 50px;
• .c_mt60
  mergin-top: 60px;
• .c_mt70
  mergin-top: 70px;
• .c_mt80
  mergin-top: 80px;
• .c_mt90
  mergin-top: 90px;

同様に、c_ml0～c_ml90、c_mr0～c_mr90、c_mb0～c_mb90

レスポンシブ表示切り替え

• .c_ov1300
  幅1300pxを超える場合に表示
• .c_ov1200
  幅1200pxを超える場合に表示
• .c_ov1100
  幅1100pxを超える場合に表示
• .c_ov1000
  幅1000pxを超える場合に表示
• .c_ov900
  幅900pxを超える場合に表示
• .c_ov800
  幅800pxを超える場合に表示
• .c_ov767
  幅767pxを超える場合に表示
• .c_ov700
  幅700pxを超える場合に表示
• .c_ov600
  幅600pxを超える場合に表示
• .c_ov500
  幅500pxを超える場合に表示
• .c_ov400
  幅400pxを超える場合に表示
• .c_ud1300
  幅1300px以下の場合に表示
• .c_ud1200
  幅1200px以下の場合に表示
• .c_ud1100
  幅1100px以下の場合に表示
• .c_ud1000
  幅1000px以下の場合に表示
• .c_ud900
  幅900px以下の場合に表示
• .c_ud800
  幅800px以下の場合に表示
• .c_ud767
  幅767px以下の場合に表示
• .c_ud700
  幅700px以下の場合に表示
• .c_ud600
  幅600px以下の場合に表示
• .c_ud500
  幅500px以下の場合に表示
• .c_ud400
  幅400px以下の場合に表示

その他

• .c_iBlock
  display: inline-block;
• .c_liquid
  width: 100%;
• .c_breakall
  word-break: break-all;
• .c_nowrap
  white-space: nowrap;
• .c_over
  opacity: 0.7;（hover時）

セクション

見出し

テキスト

リンク

リスト

ボタン

ボックス

画像

レイアウト

表組み

ニュース

ページング

xxxxx