CSSで名前を付けるときに、どうつけるか迷ったりします。より具体的なものにしても汎用性が効かないですし、より抽象的な名前してしまうと、なかなか他で使えなかったり、前に設定したCSSが読み込まれてしまい、デザインを再定義しなおすことにめんどくさくなってしまうことがあります。今日はそんな中でid名やclass名の付け方について考えていきたいと思います。7月4日記事
目次
CSSで要素に対してCSSを記述していくとその要素にクラスを作った場合に、要素とクラスのプロパティ両方が適用される形になってしまいます。
HTML部
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> <title>二つのh1</title> </head> <body> <h1>見出し１</h1> <div id="contents"> <h1>contentsの見出し1</h1> </div> </body> </html>
CSS部
@charset "utf-8";
/* CSS Document */
h1{
color:red;
}
#contents h1{
font-size:50px;
text-decoration:underline;
}
h1は赤字に対して、#contents h1は以前に指定したh1＋#contents h1で指定した者両方が読み込まれる形になってしまいます。
こんな感じ
要素に対してのプロパティ指定はよっぽどのことがない限り、block要素などの定義しか使わない方が吉です。
ではよく使われるid名やclass名についてまとめていきます。
wrapper wrap page container all body box layout
wrapperやwrapやpageがよく使われています。
head headline header_contents header_inner HeaderInner HeaderContents top pagetop
headerという名前はHTML5のheaderとかぶってしまうのであまり好ましくありません。つけるのであればアンダーバーやハイフンなどをつけてあとはそこからの要素に対して抽象的な名前をつけていくことがわかりやすいです。そのような記述をよく見かけます。
globalNavi gnavi gnav navigation navi topNav navcontainer contentNavi
navはHTML5でのnavとかぶってしまうのであまり好ましくありません。つけるのであればアンダーバーやハイフンなどをつけておくとわかりやすいです。
menu sidebar links linkList sub left right
entry Item column list ContentsArea
footer_nav footer_contents footer_inner foot copyright
ヘッダー部分やフッター部分やナビゲーション部分のプロパティについては、おおよそ使う名前は困らないと思うのですが、本文やメイン部分の名前に関しては時々悩む場合があります。どのようなクラス名を使っていけばよりわかりやすくなるのでしょうか。
「～Area」や「～Column」や「～List」にしたりする。
これはどっちでもいいとは思いますが、「～Area_Inner」「～Column_List」などという名前にしておくとわかりやすいと思います。
entryやitemやsummaryやdescriptionやfocusなど他のページにも使えそうな名前にしておくとわかりやすいと思います。
複数ページにまたがる場合、レイアウトの統一を複数ページにわたり作っておくと名前が付けやすくなります。
以上
