【CSS】Class名でよく利用する単語リスト

HTML, CSSを記述する際、CSS設計が大切ですが、
どのような単語で命名するかも重要だと考えています。

名前と機能の意味が推測しやすい単語を使い、
名前のつけ方にブレがないようにしようと思いつつも、
ついついその時々で違う単語を使ってしまうため、自分用によく使う単語をリストアップしました。

#ブロック
BEMのBlockで利用されるような名称

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|section|区分・区画|
|content|文書の内容|
|article|記事|
|post|投稿|
|top|頂上・上部|
|home|トップページ|
|sidebar|補足記事|
|wrapper|内包する（レイアウト的に使用することが多い）|
|wrap|wrapperの略語|
|container|wrapperの類語容器・入れ物（意味的に使用することが多い）|
|group|集まり|
|area|特定の場所・範囲|
|catch|興味を惹く・関心をつかむ|
|note|注釈|
|description|概要|
|desc|descriptionの略語|
|introduction|前置き・導入|
|intro|introductionの略語|
|announce|お知らせ|
|information|情報|
|info|informationの略語|
|more|もっと多くの|
|feature|特徴|
|detail|詳細・細部|
|summary|概要・要約|

#要素・パーツ
BEMのElementで利用されるような名称

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|inner|内側の|
|outer|外側の|
|body|本文要素|
|head|上部|
|foot|下部|
|heading|見出し・表題|
|title|表題・題名|
|lead|見出しの補足・記事の要約|
|list|一覧・表|
|menu|メニュー|
|item|（表やデータなどの）項目|
|unit|1つの単位・1セット|
|column|カラム、縦列|
|col|columnの略語|
|text|文章|
|caption|画像・図表の補足文|
|thumbnail|サムネイル、縮小した画像|
|thumb|thumbnailの略語|
|avatar|アバター、人の顔を示す画像|
|tel|電話番号|
|address|住所|
|date|日付|
|time|日時|
|category|分類・部類|
|cat|categoryの略語|
|tag|識別子|
|next|次の|
|previous|前の|
|prev|previousの略語|
|mask|覆い隠す|
|overlay|かぶせる・上書きする|
|delimiter|アイテムの範囲や境界線を示すインターフェイス|
|separator|delimiterの類語（混ぜないように分離する目的で使用）|
|divider|delimiterの類語（グルーピングするように分割する目的で使用）|

#ユーザーインターフェース（UI）
####テキスト

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|link|アンカーテキスト|
|label|分類する・項目名|
|tag|符号・識別子|
|badge|残数を示す数値|
|copyright|著作権表示|
|tooltip|マウスオーバー時に表示する補足情報|
|button|ボタン|
|btn|buttonの略語|

####画像

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|image|画像|
|img|imageの略語|
|icon|アイコン|
|loading|読み込み中|
|logo|ロゴ|
|map|地図|
|chart|チャート（リストやグラフ等）|
|graph|chartの類語、グラフ|
|hero|キービジュアルになる大型の画像|
|banner|画像をともなうリンク（主に宣伝用）|
|slider|スライダー（選択した一連の要素を順次表示するもの）|

####ナビゲーション

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|navigation|情報へ誘導するリンク|
|nav|navigationの略語|
|global-navigation|主要なナビゲーション（全体で使用）|
|local-navigation|あるカテゴリ内専用のナビゲーション（局所的に使用）|
|mega-menu|多階層の項目を表示する展開可能なメニューの一種|
|breadcrumb|パンくずリスト（トップから現在ページまでの階層構造を示すもの）|
|topicpath|breadcrumbの類語|
|springboard|同じサイズのリンクを2×2や3×3のように配置したナビゲーション|
|list-menu|縦に並んだリスト型のリンクで、階層構造をもったナビゲーション|
|dashboard|グラフやステータスなどを一つの画面にまとめたインターフェイス|
|pagination|分割したページ番号を示すリンク|
|linear-navigation|その画面の前後に移動するためのナビゲーション（ページ指定不可）|
|back-to-top|ページトップに戻るためのページ内リンク|
|tab|画面内のコンテンツ表示を切り替えるインターフェイス|
|tabbar|画面全体を切り替えるタブ（おもに画面下部に固定して使用）|
|segmented-control|機能的にはtabと同じ。見た目がタブではなくボタン|
|off-canvas|表示領域外から画面の大半を覆い隠したり、ずらすようにスライドしながら表示するナビゲーション|
|side-drawer|off-canvasの類語。drawerは「引き出し」の意味|
|toggle-menu|同一の操作で二つの状態を交互に切り換えるインターフェイス|
|sitemap|サイトマップ|
|sns|ソーシャルネットワーキングサービス|

####フォーム

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|form|送信フォーム|
|login|ログイン|
|signin|サインイン。loginの類語|
|logout|ログアウト|
|signout|サインアウト。logoutの類語|
|registration|ユーザー登録|
|signup|registrationの類語|
|step-navigation|複数画面にわたるフォームの順序や、現在地を示したナビゲーション|
|search-box|キーワードを入力するためのフォームエリア|
|text-field|テキストを入力するフィールド（改行なし）|
|textarea|テキストを入力するフィールド（複数行）|
|checkbox|チェックボックス|
|radio|ラジオボタン|
|select|セレクト|
|submit|送信ボタン|
|reset|リセット（取り消し）ボタン|
|modify|修正ボタン|

####その他

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|cards|カードのようなインターフェイス|
|dropdown|ドロップダウンリスト|
|pulldown|dropdownの類語|
|accordion|折りたたまれたコンテンツを選択することで表示させるインターフェイス|
|scroll-tab|スクロールすることで非表示部分を見ることができるインターフェイス|
|dialog|（主に）注意や警告を知らせ、ユーザーに操作を要求するメッセージ|
|popup-window|dialogの類語で、小さなウィンドウで表示するインターフェイス|
|toolbar|ユーザーが利用できるツールやアクションをまとめたインターフェイス|
|comment|コメント、記事に対する反応|
|table|テーブル・図表|
|timeline|チャットや年表のように時系列に並べたリスト|

#ステータス
状態を表す単語

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|show|見せる|
|hide|隠す|
|open|開く|
|close|閉じる|
|current|現在の|
|active|活動中・有効な|
|disabled|無効になっている|

#形容詞
| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|main|主要な|
|primary|主要な|
|secondary|補助的な・第二の|
|tertiary|第三の|
|quaternary|第四の|
|common|共通の|
|global|全体的な|
|local|局所的な|
|general|一般的な|
|brand|ブランドの|
|site|サイトの|

#サイト内の分類
サイト内のページやカテゴリーとして使用する名詞。

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|about|〜について|
|work|仕事・任務|
|product|製品|
|service|サービス|
|news|お知らせ・近況|
|event|行事・出来事|
|history|歴史・沿革|
|archive|保存・保管・記録|
|concept|構想・概念・考え|
|recommend|おすすめ・推奨|
|table of contents|目次|
|toc|Table of contentsの略語|
|index|索引・指標|
|contact|問い合わせ・連絡|
|inquiry|問い合わせ・質問・調査|
|access|交通手段|
|shop|店舗|
|related|関連のある|
|privacy|個人情報の利用・保護の方針|
|faq|Frequently asked questions（よくある質問）の略|
|qanda|Question and answer（質問と回答）の略|
|input|フォームの入力画面|
|confirm|フォームの確認画面|
|finish|フォームの完了画面|
|search-result|検索結果画面|
|cart|購入するアイテムを一時的に保存する画面|
|checkout|保存していたアイテムを購入する画面|

#修飾子
BEMのModifierで使われるような名詞や形容詞など。

| 単語　　　　　　　　 | 意味　　　　　　　　　　　　　　　　　　　　　　　　　　　　 |
|:-|:-|
|success|成功|
|alert|注意・警戒|
|attention|配慮・気配り|
|error|間違い・失敗|
|caution|用心・警告|
|warning|警告・予告|
|danger|危険・驚異|
|tiny|とても小さい|
|xs|tinyの類語でExtra small（smallよりさらに小さい）こと|
|small|小さい|
|medium|中間|
|large|大きい|
|huge|とても大きい|
|xl|hugeの類語でExtra large（特大・超大型）のこと|
|reverse|反転する|
|push|押す|
|pull|引く|
|offset|相殺する・埋めあわせる|
|left|左側の|
|center|真ん中|
|right|右側の|
|top|上部|
|middle|真ん中|
|bottom|下部|
|round|角丸|
|circle|円形|