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
円形
Author And Source
この問題について(【CSS】Class名でよく利用する単語リスト), 我々は、より多くの情報をここで見つけました
https://qiita.com/Tanaka-Taiki/items/93f0d7732283af7a0a42
著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .