学ぶ 稼ぐ 楽しむ 「豊な人生を考える」ブログ

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

CSSのクラス名ってどうやって決めるの?
自由だからこそ迷ってしまう。修正や管理がしやすい例があればおしえてほしい!

 

 

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

 

本記事ではHTML/CSSを学び始めの方や忘れてしまった方のために、CSSの管理しやすいクラス名を一覧で紹介します。

用途ごとにまとめているので「あ…ここのクラス名どうしよう」など、迷った時に利用しやすく作成しました。

 

・CSSってなんだっけ?
・CSSのクラス名一覧を解説

 

スポンサーリンク

CSSってなんだっけ?を簡単に解説

 

「CSS」は正式に「Cascading Style Sheets(カスケーディングスタイルシート)」といい、HTMLで作成した文章の装飾、レイアウトの変更ができる、スタイルシート言語です。

HTMLとセットでCSSを覚えることがほとんどなので、WEB系言語を学ぶ初心者の方はまずここからスタートになります。

 

CSSの基本的な書き方

 

<h1>メインタイトル</h1>
<p class=”main-Sentence”>サイトの紹介文</p>

h1 {
color: blue
}

.main-sentence {
color: red
}

メインタイトル
サイトの紹介文

 

 

上記のとおり「h1」のセレクターをそのまま指定する方法もあれば、「class=”*****”」とクラス名を指定することもできます。

そしてクラス名を基本的に自由に命名することができるのですが、適当な名前で作ると「わかりづらい」「管理しにくい」という問題が出てきます。

第三者が見て「あ、これを変更するならココのクラス名を変更だな」パッと理解できるクラス名にすることがとても重要です。

 

 

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」といった感じ

 

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

 

スポンサーリンク
サボり気味です、でもたまにつぶやきます。
NO IMAGE

晴耕雨読な生き方

『晴れた日には畑を耕し雨の日には本を読む』株式投資、FX、仮想通貨、ネットビジネスで晴耕雨読な生活を目指すブログです。