htmlとCSSコーディングの話:ページidをふることの大切さについて

htmlとCSSコーディングの話:ページidをふることの大切さについて

共通のcss定義を、各htmlページにて使いまわすことはよくあります。
そういったコーディングはメンテナンスの面でも有利で、効率的です。
ただ、どんなときでも「例外」があることを、考慮しておいたほうがよいものです。

たとえば、共通のcss定義として使っている特定のclassに対して、
例外的に、特定ページに対しては、見た目を若干変更したい、ということになったとします。

「よし!じゃあそのhtmlページのclass名を変更して、あらたなcss定義を追加しよう!」

ということになるかもしれません。
ただ、その場合、htmlとcss両方に修正を加えることになり、少々面倒です。
また、あらたなclass名の命名にも悩むかもしれません。

さらにこの先、例外ページがどんどん増えてきた場合、
どんどん修正が入るため、せっかく共通化していた定義もしだいに統一性がなくなり
html、cssともにメンテナンスもしにくくなっていくことが予想されます。
class名の命名にもさらに頭を悩ませることにもなりかねません。

そこで。。 せっかく見た目についてはCSSで指定しているのですから
できれば、例外ページについてもCSSの修正だけで済ませたいものですよね。。?
さらに、共通化して使っているclass名はそのままに、例外ページにのみ違うcss指定を適用、できればスムーズです。
htmlに修正は加えず、共通化class名を維持しつつ、修正はcssの修正のみとなるのですから。。

そんなとき有効なのがhtmlページへのページid付与なんです。

ページidとは何か?どういうものなのか?
具体的に説明しますが。。。別段変わったものではありません。
ページidとは、ページごとに振った、cssのid属性です。

“id”とは、ひとつのhtmlページ内に
重複して存在することのない(同じものが2つと存在しない)ものです。

ちょっと変なたとえかもしれませんが、思いついたので書きますと、
本には必ずページナンバーが書かれていますが、
あれはどのページも違う数です。(当たり前ですが。)

ページ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ページ作成の初期段階でつけておくものです。

ぜひ参考にして、実際に試してみてくださいね(●´ω`●)

この記事は役に立ちましたか? 役立った 役立たなかった
0 人中 0 人がこの記事は役に立ったと言っています。

★レクタングルWset