こんにちは、ひろです！
CSSクラス名を決めるのに悩んだことはありませんか？
「この要素、どんなクラス名をつければいいんだろう…」 「似たような名前をつけすぎて、もうネタが尽きた…」
そんな悩みを解決するため、今回は100以上のCSSクラス名の例をカテゴリ別にまとめてみました。 これを参考にすれば、きっとあなたのコーディングライフがもっと楽しくなるはずです！
では、さっそく見ていきましょう！
クリックできる目次
1. Block（主要なUIコンポーネント）
header– ヘッダーfooter– フッターnav– ナビゲーションmain– メインコンテンツsidebar– サイドバーarticle– 記事section– セクションform– フォームmodal– モーダルcard– カードbuttonorbtn– ボタンinput– 入力フィールドtable– テーブルlist– リストmenu– メニューslider– スライダーaccordion– アコーディオンtabs– タブpagination– ページネーションbreadcrumb– パンくずリスト
2. Element（Blockの一部）
header__logo– ヘッダーのロゴnav__item– ナビゲーションの項目form__field– フォームのフィールドcard__title– カードのタイトルcard__image– カードの画像button__icon– ボタンのアイコンtable__row– テーブルの行list__item– リストの項目modal__close– モーダルの閉じるボタンfooter__copyright– フッターの著作権表示sidebar__widget– サイドバーのウィジェットarticle__author– 記事の著者form__submit– フォームの送信ボタンnav__dropdown– ナビゲーションのドロップダウンslider__arrow– スライダーの矢印accordion__panel– アコーディオンのパネルtabs__content– タブのコンテンツpagination__link– ページネーションのリンクbreadcrumb__separator– パンくずリストの区切りmenu__toggle– メニューの切り替えボタン
3. 形容詞（状態や見た目）
active– アクティブdisabled– 無効hidden– 非表示visible– 可視selected– 選択済みhighlighted– 強調表示expanded– 展開済みcollapsed– 折りたたまれたfocused– フォーカス中blurred– ぼかしanimated– アニメーション付きtransparent– 透明opaque– 不透明rounded– 角丸bordered– 枠線付きshadowed– 影付きmuted– 抑えめのbold– 太字italic– イタリック体underlined– 下線付き
4. サイズ
xs– 極小smorsmall– 小mdormedium– 中lgorlarge– 大xl– 特大xxl– 超特大tiny– 微小huge– 巨大full– 全幅・全高half– 半分quarter– 4分の1double– 2倍triple– 3倍compact– コンパクトexpanded– 拡大slim– スリムwide– ワイドnarrow– 狭いthick– 厚いthin– 薄い
5. 色や重要度
primary– 主要なsecondary– 副次的なtertiary– 第三のsuccess– 成功warning– 警告dangerorerror– 危険・エラーinfo– 情報light– 明るいdark– 暗いmuted– 抑えめのaccent– アクセントhighlight– ハイライトneutral– 中立的なpositive– 肯定的なnegative– 否定的なcritical– 重大なoptional– 任意のrequired– 必須のdecorative– 装飾的なfunctional– 機能的な
6. レイアウト関連
container– コンテナrow– 行columnorcol– 列grid– グリッドflex– フレックスblock– ブロックinline– インラインinline-block– インラインブロックwrapper– ラッパーgroup– グループsection– セクションpanel– パネルbox– ボックスlayer– レイヤーstack– スタックcluster– クラスターsplit– 分割island– アイランドsidebar– サイドバーoverlay– オーバーレイ
7. 位置や配置
top– 上bottom– 下left– 左right– 右center– 中央middle– 中間start– 開始位置end– 終了位置fixed– 固定absolute– 絶対配置relative– 相対配置sticky– スティッキーfloat-left– 左フロートfloat-right– 右フロートalign-top– 上揃えalign-bottom– 下揃えjustify-center– 中央揃え（横方向）align-center– 中央揃え（縦方向）stretch– 引き伸ばしoverlap– 重なり
8. 表示・非表示
show– 表示hide– 非表示visible– 可視invisible– 不可視display-block– ブロック表示display-inline– インライン表示display-none– 非表示（空間を占有しない）opacity-full– 不透明度100%opacity-half– 不透明度50%opacity-zero– 不透明度0%transparent– 透明fadeIn– フェードインfadeOut– フェードアウトcollapse– 折りたたみexpand– 展開reveal– 明らかにするconceal– 隠すoffscreen– 画面外clip– クリップ（はみ出し部分を隠す）mask– マスク（一部を隠す）
9. タイポグラフィ
title– タイトルsubtitle– サブタイトルheading– 見出しsubheading– 小見出しbody– 本文caption– キャプションlead– リード文small– 小さいテキストlarge– 大きいテキストbold– 太字italic– イタリック体underline– 下線strikethrough– 取り消し線uppercase– 大文字lowercase– 小文字capitalize– 先頭大文字nowrap– 折り返しなしtruncate– 省略monospace– 等幅フォントserif– セリフ体
10. スペーシング
m-0– マージンなしp-0– パディングなしmt-1– 上マージン（小）mb-2– 下マージン（中）ml-3– 左マージン（大）mr-4– 右マージン（特大）mx-auto– 左右マージン自動my-5– 上下マージン（最大）pt-1– 上パディング（小）pb-2– 下パディング（中）pl-3– 左パディング（大）pr-4– 右パディング（特大）px-2– 左右パディング（中）py-3– 上下パディング（大）gap-1– ギャップ（小）space-x-2– 水平方向の間隔（中）space-y-3– 垂直方向の間隔（大）indent-1– インデント（小）offset-2– オフセット（中）gutter-3– ガーター（大）
11. ユーティリティ
clearfix– クリアフィックスtext-center– テキスト中央揃えtext-left– テキスト左揃えtext-right– テキスト右揃えd-none– 非表示（display: none）d-block– ブロック表示d-inline– インライン表示d-flex– フレックス表示w-100– 幅100%h-100– 高さ100%overflow-hidden– オーバーフロー非表示overflow-scroll– スクロール可能なオーバーフローposition-relative– 相対位置指定position-absolute– 絶対位置指定d-grid– グリッド表示text-truncate– テキスト省略rounded– 角丸shadow– 影bg-cover– 背景カバーtext-nowrap– テキスト折り返しなし
さいごに：あなたのCSSクラス名、もう迷わない！
ふぅ～、長かったですね！でも、おつかれさま！ここまで読んでくれて本当にありがとう♪
さて、こんなにたくさんのクラス名を見てきて、頭がクラクラしてませんか？
でも大丈夫！最初はみんなそうなんです。私も昔は「header」と「footer」を間違えて、Webサイトが逆さまになっちゃったことがあります（笑）。
でも、心配しないでください。このガイドを参考に、少しずつ試してみてくださいね。完璧を目指す必要はありません。まずは自分のプロジェクトで使いそうなものをピックアップして、お気に入りのクラス名を見つけてみましょう！
例えば、明日から「btn–super-kawaii」っていうクラス名を使ってみるのはどうですか？きっとあなたのボタン、宇宙一かわいくなっちゃいますよ！
（※実際のプロジェクトでは使わないでくださいね笑）
大切なのは、一貫性を保つこと。
さぁ、このガイドを片手に、素敵なCSSクラス名の世界を冒険してみてください。迷っても大丈夫、このガイドがあなたの道しるべになりますよ。
それじゃあ、素敵なコーディングライフを！また会いましょう！👋
