【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」など、

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

クラス名省略用途・使いどころ
titletlタイトル
headinghead見出し
information
info情報
imageimg画像
navigation
navナビゲーション/メインメニュー
buttonbtnボタン
wrapperwrap包むもの
message
msgメッセージ
colimncol縦列
downloaddlダウンロード
documentdoc文章/ドキュメント
rightr
leftl
errorerrエラー
description
desc概要文

 

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

 

スポンサーリンク
NO IMAGE

晴耕雨読

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