適切な id 名や class 名のつけ方

意味のある名前にしよう、というお話。

適切な名前のつけ方

class 名や id 名には、どんな名前を付けたらよいでしょうか。

例えば、文字を赤くしたいところに <span class="red">赤文字</span> と書いてしまうのは、「赤い文字にする」という見栄えの指定が HTML の中に記述されていることになってしまい、意味的には <font color="red"> と同じになってしまします。

適切な名前を付けるには、見た目優先に考えず、構造的な意味を考えることが大切です。

「何で文字を赤くしたいのか」を考え、「目立たせたいから」だとしたら、.attention だとか .notice というような class 名にすることで、見た目優先ではなく、構造を示した名前になります。また、「目立たせる (強調)」という意味では、em 要素や strong 要素もありますので、まずは HTML の要素でマークアップできないかをチェックしてみるとよいでしょう。

他にも段組レイアウトなどで、左に置きたいから #left、右に置きたいから #right という名前のつけ方は、見た目優先のつけ方なのでよくありません。#contents と #navi といった名前なら、「コンテンツ部分」と「メニュー部分」という意味が伝わります。

よくある名前

場所や用途ごとに、使えそうな名前をリストアップしてみました。単語と単語の間はハイフン (-) で区切りましたが、区切り方はアンダーバー (_)、大文字小文字などで区切ってもよいですし、繋げてもよいでしょう。

  • class-id
  • class_id
  • ClassId
  • classid
ページ全体を囲う
  • wrapper
  • wrap (wrapper の略)
  • container
  • page
  • contents
  • body
ヘッダー系
  • header
  • head
メニュー系
  • menu
  • main-menu
  • sub-menu
  • navi
  • global-navi
  • list
  • topic-path (パンくずリスト)
コンテンツ系
  • contents
  • body
  • main
フッター系
  • footer
  • foot
  • copyright
広告スペース系
  • ad
  • banner

今度は、特定の文章に使える class 名を紹介。

文章の強調系
  • em 要素、strong 要素
  • emphasis (em 要素の略)
  • attention
  • alert
  • caution
  • notice
注釈・メモ

強調とは逆に、蛇足とか備忘録とか、あまり重要でないことを表すときに。括弧の文章を span.memo などで囲って、文字色を少し薄くしたりして使えます。

  • note
  • notes
  • memo
  • memos

その他考えられるもの。こんな感じで、その文章の意味を考えて名前をつけましょう。

  • code 要素のソースコードが、何の言語のコードかを示すクラス。
  • 顔文字や AA のように、それぞれの記号が本来の意味で使われていない文章であることを示すクラス。