htmlとCSSコーディングの話：ページidをふることの大切さについて
htmlとCSSコーディングの話：ページidをふることの大切さについて
共通のcss定義を、各htmlページにて使いまわすことはよくあります。
そういったコーディングはメンテナンスの面でも有利で、効率的です。
ただ、どんなときでも「例外」があることを、考慮しておいたほうがよいものです。
たとえば、共通のcss定義として使っている特定のclassに対して、
例外的に、特定ページに対しては、見た目を若干変更したい、ということになったとします。
「よし！じゃあそのhtmlページのclass名を変更して、あらたなcss定義を追加しよう！」
ということになるかもしれません。
ただ、その場合、htmlとcss両方に修正を加えることになり、少々面倒です。
また、あらたなclass名の命名にも悩むかもしれません。
さらにこの先、例外ページがどんどん増えてきた場合、
どんどん修正が入るため、せっかく共通化していた定義もしだいに統一性がなくなり
html、cssともにメンテナンスもしにくくなっていくことが予想されます。
class名の命名にもさらに頭を悩ませることにもなりかねません。
そこで。。 せっかく見た目についてはＣＳＳで指定しているのですから
できれば、例外ページについてもＣＳＳの修正だけで済ませたいものですよね。。？
さらに、共通化して使っているclass名はそのままに、例外ページにのみ違うcss指定を適用、できればスムーズです。
htmlに修正は加えず、共通化class名を維持しつつ、修正はcssの修正のみとなるのですから。。
そんなとき有効なのがhtmlページへのページid付与なんです。
ページidとは何か？どういうものなのか？
具体的に説明しますが。。。別段変わったものではありません。
ページidとは、ページごとに振った、cssのid属性です。
“id”とは、ひとつのhtmlページ内に
重複して存在することのない（同じものが２つと存在しない）ものです。
ちょっと変なたとえかもしれませんが、思いついたので書きますと、
本には必ずページナンバーが書かれていますが、
あれはどのページも違う数です。（当たり前ですが。）
ページidとは、まさにこれと同じことです。
htmlページについた、ページナンバーなんですね。
ただ、cssのid属性の場合、数字始まりものを設定するのはよろしくないために、
（なんでもよいので何か）英文字でも接頭語として追加しましょう。
仮に、シンプルに a としましょう。
ページごとに
a001
a002
a003
..
..
..
という具合ですね。
これを、htmlページの、決まった場所に書けばいいんです。
例えば。。
<body id="a001″>
<body id="a002″>
<body id="a003″>
..
..
..
といった具合です。
これでページidつきhtmlページは完成しました。
それでは、ページidつきhtmlページに対して
例外的な修正が入ったときの対応を実際にやってみましょう。
●html
<p class="honbun">ここに本文が入ります。</p>
●css（共通のcss定義）
p.honbun {
font-size: 100%;
}
のようなhtmlとcssだったとします。
特定ページのページidは、a002 だったとします。
さらに変更内容は、font-size: 80%; に変更、だったとします。
その場合、以下のようにcssファイルに追記をします。
●css（追記）
#a002 p.honbun {
font-size: 80%;
}
たったこれだけ！
なんとラクなんでしょう。。
htmlページへページidをふることは大切です。
またページidは、htmlページ作成の初期段階でつけておくものです。
ぜひ参考にして、実際に試してみてくださいね(●´ω｀●)