ウェブログ

コラム:class名とid名はどうやってつければいい?


idとclass名の付け方やつかえる名前
CSSを定義する際に便利なのがclassとid。毎回固有のclass名やid名を考えるのは最初は戸惑うものです。

「何かわかりやすい命名規則はないか…」
「自分でつけているこの名前って問題ないのか…」
「毎回名前を考えるのが時間がかかる…」

といった問題は意外と大きいものです。
何が正解というのはないですがある程度自分の中でルール化しておくと修正や更新をする際にラクだし、他の人が読む時もわかりやすくて時間のロスになります。

大きいエリアや広範囲のものに使える名前

メインのコンテンツやヘッダー、サイドバー、フッターなど、わりと大きめのエリアに使うときに使うケースが多い名前です。

header, head, heading

名前の通り、要素の上部分やヘッダー自体に使ったりします。html5になってからはheaderタグが加わったので前程使うケースは少なくなってきました。

使用例:

要素の上部やヘッダー付近に使えるもの一覧

header
head
heading
top
headline
headTop
headerTop
topArea

main, mainArea, contents, mainContents

こちらはそのページの中で主役となるエリアや中心となるコンテンツなんかによく使います。
他にもcenterArea, centerContents, mainBox, centerBlockなどなど。contentsが長いときはcontとか略したりもします。

使用例:

ページの中で主役となるエリアや中心となるコンテンツに使えるもの一覧

main
mainArea
contents
mainContents
mainContainer
blockArea
mainSection
mainBox
contentBlock

side, sidebar, sideOne, sideTwo

サイドバーやサイドに置くコンテンツ用に使います。html5のasideタグがでてきてこちらもそんなに使わなくなりました。
左側のサイドバーという意味で単に「left」とやったりするとcssを眺めた時に「leftってどこのleftだろう?」とごっちゃになることが多いので、その場合はsideLeftなどにしたり、後々サイドバーを入れ替えることが考えられるときはsideOneとかsideTwoとかにすることをお勧めします。
※位置などは変わることが多いのでそもそもleftやrightというのはあまりおすすめではない

使用例:

サイドバーやサイドに置くコンテンツ用に使えるもの一覧

side
sidebar
sideOne
sideTwo
menu
sideMenu
sideContent
sideArea
sideLink
sideBnr
sideBlock

footer, foot, bottom

要素の下部や下エリアに使うときに。ページのフッター部分だけではなく何かのボックス要素のボトム部分とかでも使えるので割と使ったりします。

使用例:

要素の下部や下エリアコンテンツ用に使えるもの一覧

footer
foot
bottom
bottomArea
footerArea
boxFoot
boxBottom
blockFoot
blockBottom

単純な囲いや限定的な要素に使える名前

意味はないけどCSSをかけたいのでclass名をつける場合やfloatする要素で高さを維持したいので限定的にclassをつけるケースなど。意外とこういうのが多くて命名にこまるんですよね。。。

wrap, wrapper, inner

単純になんか囲いたいときなど。場所と組み合わせたりしてmainWrap, mainInnerとかheadWrapper, sideWrap, footerInnerなんかにしたりします。
結構wrapなんかは登場することがおおくて、例えばメインコンテンツを2カラムにしている場合、HTML上は2カラムにしているタグだけでいいのですが、デザイン上どうしてもhtmlを追加して2カラムのタグを囲うタグを作るケースが割りとあります。そういうときにはid=”wrap”とかclass=”wrapper”なんか使うことが多いです。

使用例:

囲う系の名前使えるもの一覧

wrap
wrapper
inner
headWrap
headWrapper
headInner
mainWrap
mainInner
sideWrap
footerInner
topWrap
centerWrap
postWrapper
contentsInner
ttlWrap
blockWrapper
boxInner
bnrWrap

summary, breadcrumb, detail

限定的に「ここだけ」みたいな感じで使える名前です。上記以外の部分など。個人的にはよく使いますね。
下の一覧と今までのエリアごとの区分けで出てきた名前の組み合わせでほとんどいけると思います。

使用例:

限定的なエリアやその他の名前一覧

summary :要約、概要、まとめなど
breadcrumb :パンくずリスト
detail :詳細部分
more :詳しくはこちらエリアなど
bnr :バナー部分
ttl :タイトル
common :共通部分
mainVisual :主要画像部分、メインとなるイメージ画など
slide :スライダー部分
message :メッセージや説明文などが入る部分
info, informaiton :情報やデータ部分
data :データ
gNavi, globalMenu gMenu :グローバルナビゲーション、メインメニュー部分
firstChild :最初の要素
lastChild :最後の要素
date :日付部分
category :カテゴリー部分
tag :タグ部分
division :何かを分けているものやエリア
eachArea :それぞれのエリア(繰り返し表示するブロックなどに)
description :説明文エリア
caption :キャプション、ちょっとした説明
buttom :ボタン系
entry :エントリー、記事部分
genre :ジャンル、種類系
thumb, thumbPic :サムネイル
toTop :トップへ戻るボタン

おまけ:アンダーバーかキャメルケースか

class名やid名を書くときにどっちにしようかと一度は考えたのではないでしょうか?

・アンダーバー
main_contents, head_area, ttl_bnrなど
要素と要素の区切りをアンダーバー(アンダースコア)を使って区切る

・キャメルケース
mainContents, headArea, ttlBnrなど
先頭意外の要素の1文字目を大文字にする

どっちが優れているというのはなくプロジェクト毎にルール化されていることが多いです。あとは個人的に好きな方を使う…という感じ。
ちなみに僕は最初アンダーバーで書いていましたが文字が長くなるのが気になったので今はキャメルケースで書くことが多いです。メリットは文字数が少なくなることですが、しばらくして慣れてきた頃感じたデメリットはCSS以外のプログラミン言語や単純にファイル名などを考慮したときアンダーバーの方が汎用性があるかも…と思いました。今は慣れてしまったので特に不自由はしていませんが、まあ人それぞれですね。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり