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

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

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

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

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

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

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

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

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

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

CSSのクラス名一覧を解説

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

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

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

要素を囲む時に使えるクラス名

テキスト関連で使えるクラス名

ナビゲーションで使えるクラス名

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

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

フォームに使えるクラス名

ステータスに使えるクラス名

最後に

「管理しやすいCSSのクラス名の一覧」を紹介しました。

単語ごとに使い分けたり、用途によって組み合わせて使ってみて下さい。

「main-img」や「news-wrap」といった感じです。

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

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

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

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