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