【CSSのクラス名】管理しやすいクラス名一覧【保存版】

CSS
CSSのクラス名の命名に毎回悩む!
どんな規則で命名すべきなのかな?管理しやすいクラス名の一覧を教えてほしい

 

 

そんな問題を解決します。

 

本記事では「CSS」の管理しやすいクラス名を一覧で紹介。

カテゴリ別でまとめているのでぜひ参考にしてみてください。

 

・クラス名の命名について
コンテンツ内
・要素を囲む
・テキスト関連
・ナビゲーション
・メディア関連
・位置や形
・フォーム
・ステータス

 

スポンサーリンク

【CSSのクラス名】管理しやすいクラス名一覧

 

「CSS」は正式に「Cascading Style Sheets(カスケーディングスタイルシート)」といい、

HTMLで作成した文章の装飾、レイアウトの変更ができる、スタイルシート言語です。

 

クラス名は自由に命名することができるのですが、

適当な名前で作ると「わかりずらい」「管理しにくい」という問題が出てきます。

 

第三者が見て「あ、これを変更するならココのクラス名を変更だな」理解し易いクラス名にすることがとても大切です。

 

 

CSSのクラス名一覧を解説

 

CSSのクラス名一覧を画像にしたのでお好きにダウンロードしてお使い下さい。

 

詳しくはカテゴリ別で解説します。

・コンテンツ内
・要素を囲む
・テキスト関連
・ナビゲーション
・メディア関連
・位置や形
・フォーム
・ステータス

 

 

コンテンツ内に使えるクラス名

クラス名 用途・使いどころ
main メインコンテンツ
side サイドコンテンツ
header ヘッダーコンテンツ
footer
フッターコンテンツ
section セクション / 章・節・項などの区間
article
アーティクル / 完結型のコンテンツ
group
集まり
data 日付
profile プロフィール
user ユーザー情報
post 投稿/記事
news お知らせ/最新情報/ニュース
work 実績/作品
service サービス内容
contact 問合せ/連絡
event イベント/行事
home ホーム / トップページ
menu メニュー / 一覧
table
テーブル / 表
information/info 情報
category カテゴリ/分類
comment コメント
shop 店舗情報
history 歴史/沿革
archive 保管/記録
recommend おすすめ/推奨
related 関連する
result 結果
feature 主要商品/目玉商品
timeline 年表
download ダウンロード
test テスト
gallery 画像一覧
product 製品
faq 質問
recruit/hiring 求人情報
address アドレス / 住所
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 番号付きナビゲーションリング
search サーチ/検索
card
カード

 

メディア関連で使えるクラス名

クラス名 用途・使いどころ
image 画像
photo 画像
picture 画像
icon アイコン
thumbnail/thumb 縮小画像/サムネイル
logo ロゴ画像
map 地図
video 動画
chart グラフ
advertisement 広告
document 文章/ドキュメント

 

位置や形に使えるクラス名

クラス名 用途・使いどころ
small
medium
large
right
left
top
bottom
middle 真ん中
center センター / 中央
round 丸みのある
circle
rectangle/revt 長方形/四角
square 正方形/四角
reverse 反転/反対
slider スライダー
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」といった感じです。

 

また、紹介したクラス名でも短縮して記述することも多いです。

「bottom」→「btn」や「information」→「info」など、

慣れてきたらこういう応用もしながら命名も検討してみてください。

クラス名 省略 用途・使いどころ
title tl タイトル
heading head 見出し
information
info 情報
image img 画像
navigation
nav ナビゲーション/メインメニュー
button btn ボタン
wrapper wrap 包むもの
message
msg メッセージ
colimn col 縦列
download dl ダウンロード
document doc 文章/ドキュメント
right r
left l
error err エラー
description
desc 概要文

 

参考になれば幸いです、最後まで読んでいただきありがとうございました。

 

スポンサーリンク
NO IMAGE

晴耕雨読

『晴れた日には畑を耕し雨の日には本を読む』そんな生活を目指すブログです