WebPGと連携したXHTML/CSSコーディングについて

web

XHTML/CSSにも長けているPGさんというのは意外と稀です。
CやC++、PHPにPerlがバリバリで素のHTMLまでは組めても、CSSはサッパリという人がかなり多いです。やはり処理を行うプログラム言語に加えて、文書構造を定義するHTMLまではともかく、見た目を制御するCSSとなると土俵が違うといったカンジだからでしょうか。
そのためデザイナー・コーダーのレベルでCSSコードの介入によるHTMLソースの複雑化を防ぎ、PGにも…というか誰でも読みやすいコーディングを行う必要があります。

CSSを整理するためには、まずスタイルによる階層分けを明確にする必要があり、CSSの階層は人にもよると思いますが、大きくは3階層あると思っています。

第1階層：大枠レイアウト


ヘッダー、フッター、左右中央のカラムといった大枠構造を指します。
基本的に <div> へIDかクラスによりスタイルが定義されます。機能的にはどちらでも良いのですが、意味合い的にはIDが正しいです。

使用頻度が少なく、目立つコメントを付けて区切る程度で充分ですが、多くの場合は切り離されてモジュール・テンプレート化されるため、CSSに疎くてもあまり関係のない箇所です。

第2階層：コンテンツブロック


カラム内に繰り返し存在する、例えばエントリーのブロックなどの中構造を指します。
主に第1階層、大枠カラム内の下記タグなどの大見出し・ブロックとして定義されるHTMLタグで構成されます。



<h1〜6>　<div>　<dl>　<table>　etc...
これ自体にはID・クラスをあまり設定せず、大枠レイアウトからの継承によってスタイルが定義されるのが望ましいと考えていますが、ここが一番出来ていない人が多いとも思います。
同一のカラム内において同一のブロックを構成するのに、同じクラスを記述し続けることは非常にムダですよね。
ただ、HTMLの構造的にどうしても同一のクラスで構成しなければならないといったことも多々ありますので、それも踏まえて出来るだけクラスの定義を減らすべき場所です。

利用頻度の高い箇所なだけにPGさんに最も混乱を与えやすい箇所のため、ここをいかに素のHTMLだけで組み、入れ子を減らせるかというのが勝負の分かれ目でもあります。



#mainClm div {〜}

#mainClm div div {〜}

#mainClm div div h3 {〜}

#mainClm div div p {〜}

#mainClm div div table {〜}

#mainClm div div td p {〜}

#mainClm div div dl {〜}
#subClm div {〜}

#subClm div div {〜}

#subClm div div h3 {〜}

#subClm div div p {〜}

#subClm div div table {〜}

#subClm div div td p {〜}

#subClm div div dl {〜}

例えば上記のように、第1階層から継承し、さらに継承し、さらに…と書いていくとCSSの構造がどんどん深くなってしまいますが、繰り返し書かれるHTMLと違いCSSは一度定義してしまえば済む話なので、こういった組み方に慣れるとより無駄を減らせると思います。

階層の深いCSSを書く時の注意ですが、以前の記事でも書いたように個々は「あっさり」した定義で書くのがコツです。上層のスタイルであまりガッチガチに組むと、下層のスタイルで上層のスタイルを解除するためのスタイルが必要になってしまうので。

かく言うこのブログ右側のはてなモジュールも、大量のムダなクラスで構成されていますので悪いお手本にどうぞ（ほぼデフォでずっと放置…）

第3階層：個別装飾


見出し、段落、文字、リスト、ほか様々なタグにクラスで定義するピンポイントな装飾スタイルを指します。
場所やタグは問いませんが、主に下記タグなどの文字装飾やボタン化に利用されます。



<p>　<span>　<a>　ほか全タグ
利用頻度はサイトデザインにもよりますが、これは「増えても良いクラス」に当たります。
たとえば「　<span class="fontRed">　」というクラス名ならばHTMLさえ分かっていれば見当は付くと思います。一目でスタイルの見当が付く名前で定義しておくことで、CSSに疎い人でも利用できるクラスとなります。





やはりPGの素養がある程度無いとPGを意識したコーディングというのは辛いようで、グラフィックデザインから入った後輩にこんな進言を促したついでの内容でした。