CSS設計などを見直し始めた先々週。いろいろ復習にもなり勉強になったのですが、
その際にCSS命名リスト表作成しました。この一覧を見れば、大概のものは載っている・・・筈っ! これからCSS設計をする際の命名のサンプルにご活用ください。
※SMACSS設計を元にリスト表を作っています。
目次
[quads id=”1″]
ページ構成(レイアウト)の規則命名
レイアウト名 | 規則名 |
---|---|
ページ全体:コンテナ | container |
囲い | wrapper |
コンテンツエリア | contents |
メインコンテンツ | main |
サブコンテンツ | sub-contents |
臨時のコンテンツ | extra-contents |
グローバル | global |
ホーム | home |
TOPの一番目立つポジション、でかいブロック | hero |
ヘッダー サイトのロゴやタイトル、ナビゲーションを搭載する | header |
サービスの特徴や技術紹介 | feature |
サイドバー | side |
フッター | footer |
分野 | field |
区分 | division |
中身 | inner |
囲っているもの | outer |
段落を囲むブロック | sentence |
レイアウトのためのボックス | unit,box,col,area |
他の要素に組み合わせて使う | box, area |
区切り線 | separator |
レイアウトモジュール用命名クラス
モジュール名 | 規則名 |
---|---|
非表示 | hidden, |
現在位置 | current |
リード文 | lead |
奇数列 | odd |
偶数列 | even |
カラム用モジュール名(フルスタック用)
モジュール名 | 規則名 |
---|---|
1カラムのボックス | col1 |
2カラムのボックス | col2 |
3カラムレイアウト | col3 |
4カラムレイアウト | col4 |
5カラムレイアウト | col5 |
6カラムレイアウト | col6 |
7カラムレイアウト | col7 |
8カラムレイアウト | col8 |
9カラムレイアウト | col9 |
10カラムレイアウト | col10 |
11カラムレイアウト | col11 |
12カラムレイアウト | col12 |
ページ送り
内容 | 規則名 |
---|---|
次へ | next |
前へ | prev |
ページトップへ | pagetop |
戻る | return |
最初の項目 | first, first-c (childの頭文字) |
最後の項目 | last, last-c |
モジュール命名
主にヘッダー命名規則
モジュール名 | 規則名 |
---|---|
サイトのタイトル | site-ttl |
新着情報 | news |
過去のニュース | past-news |
ロゴ | logo |
キャッチフレーズ | catch |
スローガン | slogan |
メニュー | menu |
サブメニュー | sub-menu |
タブ | tab |
カテゴリー | category |
ナビゲーション | nav |
グローバルナビゲーション | g-nav |
ローカルナビゲーション | l-nav |
補足ナビゲーション | sub-nav |
ナビゲーション | navbar |
よくある質問 | faq |
お問い合わせ | contact,inquiry |
ドロップダウン | dropdown |
ビデオ | video |
主にメインコンテツ命名規則
モジュール名 | 規則名 |
---|---|
パンくずナビゲーション | breadcrumb |
(記事)タイトル | ttl |
見出し | headline |
もっと見る | more |
お知らせ | info |
案内 | guide |
概要 | outline |
話題 | topic, topics |
注目情報 | spotLight |
選び出す | pickup |
ハイライト | mark |
ご注意 | attention |
警告 | alert |
操作方法 | instructions |
更新情報、更新日 | update |
更新履歴、沿革 | history |
テキストで要約を入れるときに | summary |
説明 | description |
注釈 | notes |
記事 | article |
内側(入れ子構造) | inner |
囲っているもの | outer |
リスト | list |
バナー | bn |
リンク | link |
広告 | pr |
検索ボックス | search |
カード形式デザイン | card |
フォーム関連 | form |
時間・日付要素名
モジュール名 | 規則名 |
---|---|
時間 | time |
タイムスタンプ | timestamp |
制作日、更新日 | created |
日付 | date |
画像要素で使う命名規則
モジュール名 | 規則名 |
---|---|
ユーザーのアイコン画像 | avatar |
アイコン、web fontアイコン | icon |
写真のサムネイル | thumb |
ユーザー要素名
モジュール名 | 規則名 |
---|---|
プロフィール | profile |
ログイン | signin |
ログアウト | signout |
ユーザー登録 | signup |
ユーザー | user |
主にショップ用命名規則
モジュール名 | 規則名 |
---|---|
項目 | item |
商品のリスト | goodsList |
写真エリア | photo, img |
テキストエリア | txt |
図版エリア | figure |
一覧用命名クラス
モジュール名 | 規則名 |
---|---|
記事の一覧 | articles |
コメント一覧 | comments |
ユーザーの一覧 | users |
リンク
モジュール名 | 規則名 |
---|---|
ボタン | btn |
管理画面要素名
モジュール名 | 規則名 |
---|---|
ダッシュボード | dashboard |
タイムライン
モジュール名 | 規則名 |
---|---|
ストリーム | stream |
タイムライン | timeline |
State:状態に使用する命名規則
モジュール名 | 規則名 |
---|---|
最初の画像,通常,マウスアウト時 | bf、out |
最後の画像,マウスオン時 | af、over、hover |
非表示 | hidden |
選択時 | selected |
現在地 | current |
レティナディスプレイ用 | retina |
スマートフォン用 | sp |
ガラケー用 | gr |
ロード中 | loading |
エラー | error |
アクティブ | active |
無効 | disable |
真 | true |
偽 | false |
いかがだったでしょうか?ある程度、必要なものはまとまっているかと思います。最初に命名が決まっていれば、CSSコードを見る際に、どの部分のカスケードかわかりやすくなります。ぜひ、今後の参考の一部にしてみてください。
参考サイト
これらの内容は、以下のサイトを参考にまとめさせて頂きました!ありがとうございます!