フリートーク > 2003年9月5日バックナンバー
Site Renewal ver.1.02とブレストファイヤァァァ！
サイトリニューアルしたのはいいんだけど、ソースを見ると「おいおいおい、これXHTML1.0で推奨されてねーぞ！」なんて記述がわんさかあったり、「でもそうしないと思った表示結果が得られないからしかたないじゃーん！」とか言い訳してみたり、「でもやっぱりこれは見る人が見たらアカンやろ」ということで、ちょくちょく水面下でソースの手直しをしておりました。
ついでに、見栄えを分離するために外部CSSできっちり見栄えのみを記述するのはいいんだけど、本体のほうではDIV要素以外の要素がclassに頼りすぎなのがアレ。更新に手間がかかるばかりか、レイアウトを思い切り（例えば色とかね）を替えたいというとき、ほかのclassとの色味のバランスなんか見てらんねーぞ、ということで、CSSセレクタの整理をしましたです。
例えばDIV要素の中にPという段落要素があって、DIVにはIDの替わりにAというCLASSが振られていてついでにスタイルも指定されている、その中に含まれるP要素にも別名のBというCLASSでスタイルが振られているっていう状態になっていたわけ。だけど、そうするとなにがめんどうって、次にこのAというCLASSの要素の中にBとは違う要素が入ってきたときにまた別名でCLASSを作らなきゃいかんので、要素が増えれば増えるほどCLASSが増えていく、という無間地獄に陥るわけです。そのたびに、PにCLASSを指定したり、別のCLASSを指定したりとめんどうです。
また、要素自体を定義してスタイルづけしたとしても、A以外のDIV内に収まったときにぜんっぜん意図しないスタイルづけがされるなんてことも（フリートーク内でよくあるけどね。いきなり左寄せになってたり、行間詰まったり）。
これはめんどい。
つまりこんな感じ↓だったのを、
CSS部分
.maincolumn{ /* メインのコラムの名前とスタイルが記述される /*
適当なスタイルを記述
}
p.main{ /* メインの本文のスタイルが記述される /*
適当なスタイルを記述
}
h1.main{ /* 見出し要素のスタイル */
適当なスタイルを記述
}
XHTML内本文の記述
<div class="maincolumn">←メインのコラム
<h1 class="main">見出し</h1>←見出し要素
<p class="main">←本文のコラム
本文</p>
と、いちいち要素にCLASS指定しなきゃいけない。
でもこんなふうに↓セレクタをまとめると、
CSS部分
.maincolumn{ /* メインのコラムの名前とスタイル /*
適当なスタイルを記述
}
div.maincolumn p{ /* メインコラム内に記述されるP要素すべてに適用されるスタイル /*
適当なスタイルを記述
}
div.maincolumn h1{ /* メインコラム内に記述される見出し要素すべてに適用されるスタイル */
適当なスタイルを記述
}
XHTML内本文の記述
<div class="maincolumn">←メインのコラム
<h1>見出し</h1>←見出し要素
<p>←本文のコラム
本文</p>
となって、とっても更新がしやすくなるばかりか、特定のDIV要素内でのみ適用されるスタイルができて、デザインしやすくなるというわけ。
セレクタのまとめかたがいまいちわからなかったので、おいらの書くCSSは最悪だったんですけれども、すごく勉強になりました。やはりCSSは神！
というわけで話が長くなりましたけれども、若干うちのサイトがバージョンアップしてます。でもまだA要素にTARGET属性なんて平気で使ってるけどな。(;´Д`)
でもこれだけではなんだというので、ついでに番外編競作企画用に書き下ろしたやつをアップしときました。更新履歴見たら、二カ月も小説更新してないんですねわたし。これを更新というのか。これでいいのか、樋渡よ。しかも書き直したいところ山ほどあるってのに放置してアップとはどういう了見だと。
すんません。ようやく落ち着いてきたので、そろそろ本編の続きに手をつけようと思います。
本日の夢のある話題。
◆前田建設 ファンタジー営業部
http://www.maeda.co.jp/fantasy/index.html
マジンガーZ格納用プールの建設企画だって！ すげー！ アレゲなのが好きな人はすぐに見に行くべし！