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