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 |
円形 |
