CSS クラスの名前付け (個人的)

このページは CSS で使用するクラスの名前付け (個人的な好み) についてまとめる予定のページです。

注意

  • 「どんなクラス名がいいか」「過去にどんなクラス名をつけたか」などの考える時間を減らすための個人的な資料 (早見表) です。
  • 個人的な好みのため BEM, OOCSS などの規則にもとづいたものではありません。

ページレイアウト

クラス名 概要 適用対象要素
page-header ヘッダー (site-header, global-header もあり) header, div
page-main メイン main, div
page-footer フッター (site-footer, global-footer もあり) footer, div
logo ロゴ (page-header 内) h1, div
global-nav グローバルナビゲーション (nav か nav の親 div) nav, div
sidebar サイドバー (nav 等の親 div) div
main-image メイン画像 (ヒーロー画像) の親 div div
footer-logo ロゴ (page-footer 内) div
footer-nav ナビゲーション (page-footer 内にある) nav, div
section-title セクションのタイトル (h2 等) h2
section-inner セクションの内側 div div

構造の例 (コーポレートサイト)

  • body
    • header.page-header
      • .section-inner
        • h1.logo (h1.site-title)
      • (.global-nav)
    • (aside.sidebar)
    • main.page-main
      • section.main-image
      • section.xxx
        • .section-inner
    • footer.page-footer
      • .footer-logo
      • .footer-nav
      • .copyright

パーツ (おおまかなレイアウト用)

クラス名 概要 適用対象要素
xxx-header 何かのヘッダー (複数要素を囲う div) div
xxx-head 何かの見出し (xxx-title もあり) div, h1~h6
xxx-body 何かの本文 (xxx-content, xxx-main もあり) div
xxx-footer 何かのフッター div
xxx-lead リード文 div, p
xxx-message 強調したいメッセージ文 (セクション下部にある大きな文字のテキストなど) div, p
xxx-notice 何かの注意書き (通常の文章と背景色が変わる場所。xxx-note もあり) div
xxx-desc 何かの概要 (notice のようには強調しない。xxx-description もあり) div
xxx-date 何かの日付や時間 (xxx-time, xxx-datetime もあり) div, span
xxx-item 何かの項目 div
xxx-item-01,
xxx-item-02, ...
項目に番号を振って個別にスタイルを当てたい時に使用 div
xxx-item-group 項目のグループ (項目を flex にしたいときなどに使う) div
xxx-wrap 何かを囲いたい時の親 div (xxx-wrapper, xxx-outer, xxx-div, xxx-box, xxx-container もあり) div
xxx-inner 何かの内側を囲いたい時の div div

構造の例 (新着情報)

  • .info (新着情報全体)
    • .info-head (新着情報の見出し。「お知らせ」「新着情報」等)
    • .info-body (新着情報の中身)
      • .info-item (新着情報の項目)
        • .info-item-date (新着情報の日時)
        • .info-item-content (新着情報の内容)
      • .info-item
      • ...

構造の例 (項目)

  • .item-group (項目グループ)
    • .item (項目)
      • .item-head (項目見出し)
      • .item-image (項目画像)
        • img
      • .item-body (項目本文)
        • p
    • .item
    • ...

パーツ (部品など)

クラス名 概要 適用対象要素
xxx-image 画像 (レイアウトか個別にスタイルをつけたい場合) img, div
xxx-table 表 (同上) table, div
xxx-list リスト (同上) ul, ol, div
xxx-link リンク (同上) a, div
xxx-button ボタン (xxx-btn もあり) button, input[type=submit], a
xxx-buttons 複数ボタンの親 div div
xxx-input 入力欄 (file-input, spin-input 等何かのパーツの一部) input
xxx-meta 記事カテゴリ、公開日時などを囲う div div
pagetop トップに戻る (リンクの親 div かリンク自身) div, a
slider スライダー div
slider-slide スライダー内のスライド div
dialog ダイアログ (modal もあり。中身は dialog-header 等前述の方式で名前をつける) div
dialog-backdrop ダイアログの背景 (暗い場所) div
breadcrumbs パンくずリスト div, ul

状態等

クラス名 概要 適用対象要素
active 表示中のスライド画像、選択されたメニューなど (current もあり) すべて
hidden 非表示 (一時的) すべて
required 必須項目 (赤色などで強調) 主に span
error エラー項目 (赤色などで強調) 主に div, span
success 成功、正常終了 (緑色などで強調) 主に div, span

汎用クラス

クラス名 概要 適用対象要素
sp-only スマートフォンなど狭い幅でのみ表示 すべて
pc-only PCなど広い幅でのみ表示 すべて
sr-only スクリーンリーダーでのみ表示 (Bootstrap 等と同じ) すべて
full-width width: 100% (表内の入力欄を手っ取り早く広げたい時などに使用) 主に input, textarea
text-center 中央寄せ (手っ取り早く中央寄せしたい時に使用) すべて
text-right 右寄せ (手っ取り早く右寄せしたい時に使用) すべて

コンテンツにもとづいた名前

※ 前述の「xxx-」の部分や HTML ファイル名などに使用します。

内容 名前の候補
新着情報、お知らせ info, news
代表挨拶、トップメッセージ message, greeting
企業情報 corporate
経営理念 philosophy
沿革 history, outline
概要 about, outline
料金 price
サービス service
製品、商品 product
特徴、機能 feature
流れ (流れ全体) flow, workflow
流れ (流れの中の項目) step
アクセス access, route, map
プライバシーポリシー privacy-policy, pr
採用 recruit
お問い合わせ contact, inquiry
記事 entry, post