作成日:  (更新日: )

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
page-sidebar サイドバー (nav 等の親 div) div
main-image メイン画像 (ヒーロー画像) の親 div div
footer-logo ロゴ (page-footer 内) div
footer-nav ナビゲーション (page-footer 内にある) nav, div
footer-address アドレス section, div
section-title セクションのタイトル (h2 等) h2
section-inner セクションの内側 div div

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

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

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

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

構造の例 (グローバルナビ)

  • nav.global-nav
    • ul.global-nav-item-list
      • li.global-nav-item
        • a

パーツ (部品など)

クラス名 概要 適用対象要素
*-image 画像 (レイアウトか個別にスタイルをつけたい場合) img, div
*-table 表 (同上) table, div
*-list リスト (同上) ul, ol, div
*-link リンク (同上) a, div
*-button ボタン (*-btn もあり) button, input[type=submit], a
*-buttons 複数ボタンの親 div div
*-input 入力欄 (file-input, spin-input 等何かのパーツの一部) input
*-meta 記事カテゴリ、公開日時などを囲う div div
page-top トップに戻る (リンクの親 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 右寄せ (手っ取り早く右寄せしたい時に使用) すべて
row flex コンテナ (display: flex) div
col flex アイテム (flex: 1 等) div

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

※ 前述の「*-」の部分や 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