CSSクラス名命名ルール_個人掲示板_zanmai.net

形容詞
名詞の性質や状態を修飾する品詞。「〜の」「〜な」。

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 - qandaの類語、Frequently asked questions（よくある質問）の略。検索する
qanda - Question and answer（質問と回答）の略。検索する
input - フォームの入力画面。
confirm- フォームの確認画面。
finish - フォームの完了画面。
search-result - 検索結果画面。検索する
cart - 購入するアイテムを一時的に保存する画面。検索する
checkout - 保存していたアイテムを購入する画面。検索する
Block
BEMのBlockで使われるような名詞。

section - 区分・区画。
content - 文書の内容。
article - 記事。
post - 投稿。
top - 頂上・上部。
home- トップページ。
sidebar - 補足記事。
wrapper - 内包する。
wrap - wrapperの略語。
container - wrapperの類語。容器・入れ物。wrapperはレイアウト的に、containerは意味的に使うことが多い。
group - 集まり。
area - 特定の場所・範囲。
emphasis - 強調・重視。
catch - 興味を惹く・関心をつかむ。
note - 注釈。
description - 概要。
desc - descriptionの略語。
introduction - 前置き・導入。
intro - introductionの略語。
announce - お知らせ。
information - 情報。
info - informationの略語。
action - Call To Action。重要度の高い。
more - もっと多くの。
feature - 主要なもの。
detail - 詳細・細部。
summary - 概要・要約。
Element
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 - 人の顔を示す画像。
feature - 特徴を補足する画像。
tel - 電話番号。
address - 住所。
date - 日付。
time - 日時。
category - 分類・部類。
cat - categoryの略語。
tag - 識別子。
next - 次の。
previous - 前の。
prev - previousの略語。
mask - 覆い隠す。
overlay - かぶせる・上書きする。
delimiter - アイテムの範囲や境界線を示すインターフェイス。
separator - delimiterの類語で混ぜないように分離する目的で使います。
divider - delimiterの類語でグルーピングするように分割する目的で使います。
Modifier
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 - 円形。
State
状態を示す動詞や形容詞など。

show - 見せる。
hide - 隠す。
open - 開く。
close - 閉じる。
current - 現在の。
active - 活動中・有効な。
disabled - 無効になっている。
UI
利用者に情報を提供するためのインターフェイス。

Text
link - アンカーテキスト。検索する
label - 分類する・項目名。検索する
tag - 符号・識別子。検索する
badge - 残数を示す数値。検索する
copyright - 著作権表示。検索する
tooltip - マウスオーバー時に補足情報を表示するインターフェイス。検索する
button - オン・オフの選択に使うインターフェイス。検索する
btn - buttonの略語。
Image
image - 画像。検索する
img - imageの略語。
icon - 対象の内容や機能などを小さな絵柄で表したもの。検索する
loading - 読み込み中であることを示すインターフェイス。検索する
logo - 社名や製品名などを図案化・装飾化した文字・文字列。検索する
map - 地図。検索する
chart - 理解しやすいような方法で情報を示すリストやグラフのこと。検索する
graph - chartの類語で視覚表現のための手段のこと。検索する
hero - キービジュアルになる大型の画像。検索する
banner - （主に宣伝用の）画像をともなうリンク。検索する
carousel - 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイス。検索する
slider - carouselの類語。検索する
ticker - carouselの類語で自動でアイテムを左右に流しながら表示する。ユーザーは基本的にコントロールできない。検索する
lightbox - carouselの類語で、モーダルのjQueryプラグインのこと。主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること。検索する
Navigation
navigation - 情報へ誘導するリンク。検索する
nav - navigationの略語。
global-navigation - ほとんどの画面で表示されている主要なナビゲーション。検索する
local-navigation - あるカテゴリ内専用のナビゲーション。グローバルナビゲーションの中や下に配置する場合や、サイドバーに配置する場合がある。検索する
mega-menu - 深い階層のカテゴリやページへのナビゲーション。ドロップダウン（クリックやマウスオーバー）で階層を表示していく。カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多い。検索する
breadcrumb - パンくずリスト。トップページから現在ページまでの階層構造を示したリンク。検索する
topicpath - breadcrumbの類語。検索する
springbo

閉じる