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