id / class の命名規則
- 作成日 :
- 更新日 :
XHTML CSS ガイドライン
- Package の内容
- index.html
- asset.html
- jquery.js
- add_event.js
- import.css
- reset.css
- base_layout.css
- skin.css
コンテナ（レイアウトのベースとなるブロック要素）
入れ子構造になる場合は、親要素の名前+"-inner"にする。
| コンテナ |
id/class名 |
備考 |
HTML5 Element |
| 全体コンテナ |
#container |
body要素の直下 |
|
| ヘッダー |
#header |
ヘッダー |
<header> |
| フッター |
#footer |
フッター |
<footer> |
| コンテンツ |
#contents |
コンテンツ |
|
| 第1汎用コンテナ |
#alpha-block |
マルチカラム用など |
|
| 第2汎用コンテナ |
#beta-block |
| 第3汎用コンテナ |
#gamma-block |
| 第4汎用コンテナ |
#delta-block |
| 第5汎用コンテナ |
#zeta-block |
| ポップアップコンテナ |
#popup-block |
このページの上部へ
その他、共通で使用する項目
入れ子構造になる場合は、親要素の名前+"inner"にする。
| ブロック |
id/class名 |
備考 |
HTML5 Element |
| ヘッダーナビゲーション |
.primary-nav |
サイトマップなど |
|
| メインナビゲーション |
#nav |
（グローバル）ナビゲーション |
<nav> |
| ローカルナビゲーション |
#local-nav |
ローカルナビゲーション |
<nav> |
| フッターナビゲーション |
.footer-nav |
フッターナビゲーション |
|
| パンくずナビゲーション |
#topic-path |
パンくずナビ |
|
| ロゴ |
#site-id |
サイトのロゴ |
|
| チャンクレベル1 |
.article |
ページ内にある情報のひと固まり |
<article> |
| チャンクレベル2 |
.section |
チャンクレベル1内にある情報の固まり |
<section> |
| チャンクレベル3 |
.unit |
チャンクレベル2内にある情報の固まり |
|
| チャンクレベル3 |
.unit-2col |
チャンクレベル2内にある左右対象2カラムレイアウト |
|
| チャンクレベル3 |
.unit-2col-m |
チャンクレベル2内にある左右対象2カラムレイアウトの左右逆レイアウト |
|
| チャンクレベル3 |
.unit-2colasy |
チャンクレベル2内にある左右非対象2カラムレイアウト |
|
| チャンクレベル3 |
.unit-2colasy-m |
チャンクレベル2内にある左右非対象2カラムレイアウトの左右逆レイアウト |
|
| チャンクレベル3 |
.unit-3col |
チャンクレベル2内にある3カラムレイアウト |
|
| チャンクレベル3 |
.unit-4col |
チャンクレベル2内にある4カラムレイアウト |
|
| チャンクレベル3 |
.unit-[alphabet] |
チャンクレベル2内にある汎用レイアウト |
|
| チャンクレベル4 |
.box |
チャンクレベル3内にある情報の固まり |
|
| チャンクレベル4 |
.box-[alphabet] |
チャンクレベル3内にある汎用レイアウト |
|
ページ上部へ
| テキスト |
id/class名 |
備考 |
HTML5 Element |
| 子見出しを持つ見出し |
.hgroup |
子見出しを持つ見出し |
<hgroup> |
| 並列に要素を持つ見出し |
.h-unit |
moreリンクなどfloatを使用する見出し |
|
| 大見出し |
#title |
見出しは基本的にはh1～h6のタグのみを使用。 |
|
| 見出し |
.heading-[alphabet] |
| インラインリスト |
.list-inline |
見た目上は文章中にあるリスト構造 |
|
| コピーライト |
#copy |
コピーライト |
|
| 要約 |
.description |
サイトの要約 ヘッダーの上にSEO対策で置くテキストなど |
|
| リード文 |
.lead |
リード文 |
|
| 段落を囲むブロック |
.sentence |
段落毎にマージンを付ける等の処理 |
|
| キャプション |
.caption |
写真や画像を補完するテキスト |
|
| 注意 |
.note |
注意文など |
|
| 警告 |
.alert |
警告文 |
|
| 日時 |
.time |
日時 |
<time> |
| ハイライト |
.mark |
文章中でハイライトさせたい部分 |
<mark> |
| 検索窓 |
.search |
検索窓 |
|
| ボタン |
.button |
ボタン |
|
| ログイン |
.login |
ログインフォームブロック |
|
このページの上部へ
| アンカーリンク |
id/class名 |
備考 |
HTML5 Element |
| ページ内リンク |
.fragment-nav |
ページ内リンク |
<nav> |
| ページ上部へリンク |
.to-top |
ページ上部へリンク |
|
| ページ送り |
.pagination |
ページ送り |
|
| 詳細ページへのリンク |
.more |
aタグに直接classをふる |
|
| 外部へのリンク |
.blank |
|
| PDFへのリンク |
.pdf |
|
| メールへのリンク |
.mail |
|
| 電話番号 |
.tel |
|
このページの上部へ
| その他 |
id/class名 |
備考 |
HTML5 Element |
| 現在位置 |
.current |
ナビゲーションの現在地 |
|
| バナー類（サイト内） |
.banner |
バナー類 |
<aside> |
| 広告類（外部リンク） |
.aside |
広告類 |
<aside> |
| プラグインバナー |
.plugin |
プラグインバナー |
|
| フロート解除 |
.clear |
フロートの継承を解除 |
|
このページの上部へ