基礎19. ID名、Class名の付け方と記法

ID名、Class名の付け方の法則と種類

ID、Class名の付け方には法則があり、半角英数、-(ハイフン)、_(アンダースコア)の組み合わせで名前をつけます。
どんな名前、文字でも使用できますが、どのような設定なのか内容が判別しやすい名前にするのがよいでしょう。
大文字と小文字どちらでも利用できますが、基本は小文字で統一します。
プログラムでは、大文字、小文字は区別されるため、CSSでも大文字、小文字を使い分ける習慣をつけておきます。
他にも、セレクタ名の先頭に数字を使わないようにしましょう。JavaScriptなどのプログラムは、変数名、関数名の先頭に数字を使うとエラーになるからです。CSSでも、そのルールに慣れておくとプログラムを学習する時に役立ちます。
使用してはいけない記号は、ファイル名、フォルダ名と同じです。「初級4. ファイル名、フォルダ名のルール」を確認しておいてください。
以下は、セレクタ名の記法の種類です。

ハイフン記法(ケバブケース)

文字の区切りにハイフンを使うCSSのスタンダードな記法です。
ハイフンが串のように見えることから、ケバブケースとも呼ばれます。


#sub-menu{ }
.item-list{ }

アンダースコア記法(スネークケース)

文字の区切りにアンダースコアを使うCSSのスタンダードな記法です。
アンダースコアで区切った形が、へびのように見えることから、スネークケースとも呼ばれます。
JavaScriptやPHPなどのプログラムは、ハイフンを使うとエラーになるため、プログラマー寄りの方が好む記法です。


#sub_menu{ }
.item_list{ }

キャメル記法(キャメルケース)

文字の区切りに大文字を使うCSSの記法です。
プログラマー寄りの方が好む記法です。区切りの大文字がラクダのコブにみえるところから名付けられました。


#subMenu{ }
.itemList{ }

制作会社で見られるセレクタ名の付け方

ここでは制作会社でよく使われているセレクタ名の付け方の一例を紹介をします。
ハイフン記法で紹介していますが、他の記法に変更しても問題ありません。

ブロック、範囲

  • 全体を囲むボックス・・・wrapper, wrap, container, page, page-body
  • ヘッダー・・・header, header-area
  • フッター・・・footer, footer-area
  • メインコンテンツ・・・main, main-contents, contents
  • コンテンツ・・・content, contents, container, layout, sec, section, block
  • サブコンテンツやサイドバー・・・sub, sub-content, side-bar

ナビゲーション

  • ナビゲーション・・・navi, nav, navigation, menu
  • グローバルナビゲーション・・・gnavi, gnav, global-nav
  • パンくずナビゲーション・・・pankuzu, topicpath, breadcrumbs
  • その他のナビゲーション・・・sub-menu, sub-navi, list-menu, footer-navi

見出しや段落

  • 見出し・・・heading, midashi
  • 段落、セクション・・・section, sec, entry-body
  • ロゴ・・・logo
  • キービジュアルやメインビジュアル・・・key-visual, main-visual
  • 画像や写真・・・image, photo

具体的な範囲

  • エントリー記事・・・entry
  • コメント・・・comment, comments
  • 案内文・・・lead<
  • 概要・・・outline
  • 要約・・・summary, abstract
  • 説明・・・description
  • 話題、新着、ニュース・・・topic, topics, news
  • お知らせ・・・info, infomation
  • 注目記事・・・spotlight
  • ピックアップ・・・pickup
  • 検索・・・search
  • プロフィール・・・profile
  • コピーライト・・・copyright

このようにID名、Class名は、名前で内容が分かるようになっています。
英語が苦手な方は「Google翻訳」などの翻訳サイトを使って名前を決めるのも良いと思います。
また英語で表現が難しい場合はローマ字で考えるのもよいでしょう。
見出しやコンテンツなど、見た目によって区別したいなら、後ろに-a, -bや通し番号などをつけるなどの工夫してみましょう。
heading-a, heding-b, heading01, heading02
sec-a, sec-b, sec01, sec02

まとめ

  • ID名、Class名は、半角英数、ハイフン、アンダースコアを利用する
  • ID名、Class名は、どのような設定なのか内容が判別しやすい名前にする
  • 「ハイフン記法」は、区切りにハイフンを使った記法
  • 「アンダースコア記法」は、区切りにアンダースコアを使った記法
  • 「キャメル記法」は、区切りの文字を大文字にした記法