基礎19. id名、class名の付け方と記法

2016/05/22 2018/02/22

1 id名、class名の付け方の法則と種類
2 制作会社で見られる名前の付け方

id名、class名の付け方の法則と種類

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

ハイフン記法

文字の区切りにハイフンを使うCSSのスタンダードな記法です。


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

#sub-menu{ }

.item-list{ }

アンダースコア（スネーク）記法

文字の区切りにアンダースコアを使うCSSのスタンダードな記法です。PHPなどのプログラムではハイフンを使うとエラーになるものがあるためプログラマーよりの人が好む記法です。


#sub_menu{ }
.item_list{ }

#sub_menu{ }

.item_list{ }

キャメル記法

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


#subMenu{ }
.itemList{ }

#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

見出しや段落

●見出し
heading01, hedeing02

●段落、セクション
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翻訳」などの翻訳サイトを使って名前を決めるのも良いと思います。また英語で表現が難しい場合はローマ字で考えてみるのも良いでしょう。

まとめ

id名、class名は半角英数、ハイフン、アンダースコアを利用する
id名、class名で内容が分かるようにする
「ハイフン記法」は区切りにハイフンを使った記法
「アンダースコア記法」は区切りにアンダースコアを使った記法
「キャメル記法は」は区切りの文字を大文字にした記法

B!
LINE

- HTML・CSS