「CSSでのid名やclass名の付け方」の編集履歴（バックアップ）一覧に戻る
CSSで名前を付けるときに、どうつけるか迷ったりします。より具体的なものにしても汎用性が効かないですし、より抽象的な名前してしまうと、なかなか他で使えなかったり、前に設定したCSSが読み込まれてしまい、デザインを再定義しなおすことにめんどくさくなってしまうことがあります。今日はそんな中でid名やclass名の付け方について考えていきたいと思います。7月4日記事
~
~
目次
#contents
~
~
----
~
*CSSのおさらい
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>ontentsの見出し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で指定した者両方が読み込まれる形になってしまいます。
~
こんな感じ
#image(width=400,name_CSS.png)
~
~
要素に対してのプロパティ指定はよっぽどのことがない限り、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など他のページにも使えそうな名前にしておくとわかりやすいと思います。
~
~
**色々なサンプルや表示イメージを作ってからどのID名やクラス名にすると理想かを考える
複数ページにまたがる場合、レイアウトの統一を複数ページにわたり作っておくと名前が付けやすくなります。
~
~
