nicepaper @ ウィキ
nicepaper @ ウィキ

「CSSでのid名やclass名の付け方」の編集履歴（バックアップ）一覧はこちら

「CSSでのid名やclass名の付け方」(2015/07/04 (土) 22:01:30) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

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名 ではよく使われる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名やクラス名にすると理想かを考える 複数ページにまたがる場合、レイアウトの統一を複数ページにわたり作っておくと名前が付けやすくなります。 ~ ~ 以上
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>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で指定した者両方が読み込まれる形になってしまいます。 ~ こんな感じ #image(width=400,name_CSS.png) ~ ~ 要素に対してのプロパティ指定はよっぽどのことがない限り、block要素などの定義しか使わない方が吉です。 ~ ~ *よく使われるid名やclass名 ではよく使われる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名やクラス名にすると理想かを考える 複数ページにまたがる場合、レイアウトの統一を複数ページにわたり作っておくと名前が付けやすくなります。 ~ ~ 以上

表示オプション

横に並べて表示：
変化行の前後のみ表示：