
CSSのクラス名ってどんな規則で名前を付けたらいいの?管理しやすいクラス名の一覧を教えてほしい!
そんな問題を解決します。
本記事では、「CSS」の管理しやすいクラス名を一覧で紹介。
カテゴリ別でまとめているのでぜひ参考にしてみてください。
・クラス名の命名について
・コンテンツ内
・要素を囲む
・テキスト関連
・ナビゲーション
・メディア関連
・位置や形
・フォーム
・ステータス
・コンテンツ内
・要素を囲む
・テキスト関連
・ナビゲーション
・メディア関連
・位置や形
・フォーム
・ステータス
スポンサーリンク
【CSSのクラス名】管理しやすいクラス名一覧
「CSS」は正式に「Cascading Style Sheets(カスケーディングスタイルシート)」といい、
HTMLで作成した文章の装飾、レイアウトの変更ができる、スタイルシート言語です。
HTMLとセットでCSSを覚えることがほとんどなので、WEB系言語を学ぶ初心者の方はまずここからスタート。
クラス名は自由に命名することができるのですが、適当な名前で作ると「わかりずらい」「管理しにくい」という問題が出てきます。
第三者が見て「あ、これを変更するならココのクラス名を変更だな」パッと理解できるクラス名にすることがとても重要です。
CSSのクラス名一覧を解説
カテゴリ別で解説します。
・コンテンツ内
・要素を囲む
・テキスト関連
・ナビゲーション
・メディア関連
・位置や形
・フォーム
・ステータス
・要素を囲む
・テキスト関連
・ナビゲーション
・メディア関連
・位置や形
・フォーム
・ステータス
コンテンツ内に使えるクラス名
クラス名 | 用途・使いどころ |
main | メインコンテンツ |
side | サイドコンテンツ |
data | 日付 |
profile | プロフィール |
user | ユーザー情報 |
post | 投稿/記事 |
news | お知らせ/最新情報/ニュース |
work | 実績/作品 |
service | サービス内容 |
contact | 問合せ/連絡 |
event | イベント/行事 |
information/info | 情報 |
category | カテゴリ/分類 |
comment | コメント |
shop | 店舗情報 |
history | 歴史/沿革 |
archive | 保管/記録 |
recommend | おすすめ/推奨 |
related | 関連する |
result | 結果 |
feature | 主要商品/目玉商品 |
timeline | 年表 |
download | ダウンロード |
gallery | 画像一覧 |
product | 製品 |
faq | 質問 |
recruit/hiring | 求人情報 |
about | 紹介/~について |
guide | 案内/利用ガイド |
favourite/fav | お気に入り |
要素を囲む時に使えるクラス名
クラス名 | 用途・使いどころ |
container | 入れ物 |
wrapper/wrap | 包むもの |
box | ボックス |
content | 内容物/コンテンツ |
area | 範囲 |
item | 項目/アイテム |
colimn/col | 楯列 |
テキスト関連で使えるクラス名
クラス名 | 用途・使いどころ |
title | タイトル |
heading | 見出し |
description | 概要文 |
text | 文章/テキスト |
caption | 画像の補足/キャプション |
list | 一覧/リスト |
copyright | 著作権の表示 |
ナビゲーションで使えるクラス名
クラス名 | 用途・使いどころ |
navigation/nav | ナビゲーション/メインメニュー |
menw | メニュー |
tab | タブ/表示切替 |
breadcrumb | パンくずリスト |
pagination | 番号付きナビゲーションリング |
メディア関連で使えるクラス名
クラス名 | 用途・使いどころ |
image | 画像 |
photo | 画像 |
picture | 画像 |
icon | アイコン |
thumbnail/thumb | 縮小画像/サムネイル |
logo | ロゴ画像 |
map | 地図 |
video | 動画 |
chart | グラフ |
advertisement | 広告 |
document | 文章/ドキュメント |
位置や形に使えるクラス名
クラス名 | 用途・使いどころ |
smal | 小 |
medium | 中 |
large | 大 |
right | 右 |
left | 左 |
top | 上 |
bottom | 下 |
middle | 真ん中 |
round | 丸みのある |
circle | 円 |
rectangle/revt | 長方形/四角 |
square | 正方形/四角 |
reverse | 反転/反対 |
next | 次の |
previous/prev | 前の |
フォームに使えるクラス名
クラス名 | 用途・使いどころ |
label | ラベル/項目 |
button/btn | ボタン |
login/signin | ログイン |
logout/signout | ログアウト |
message | メッセージ |
ステータスに使えるクラス名
クラス名 | 用途・使いどころ |
success | 成功 |
alert | 注意 |
error | エラー/失敗 |
danger | 警告 |
warning | 警告 |
overlay | 上にかぶせる |
current | 現在の |
active | 有効になっている |
disabled | 無効 |
show | 見せる |
hide | 隠す |
open | 開く |
close | 閉じる |
loading | 読み込み中 |
fixed | 固定した |
最後に
「管理しやすいCSSのクラス名の一覧」を紹介しました。
単語ごとに使い分けたり、用途によって組み合わせて使ってみて下さい。
「main-img」や「news-wrap」といった感じ
参考になれば幸いです、最後まで読んでいただきありがとうございました。