趣味Web 小説 2005-03-06

ウェブサイト製作のステップと CSS 記法の選択

あきやんさんの提案の素晴らしさがようやく理解できたので、あらためてご紹介。

CSS の記法には大きく2つの方式があります。

  1. セレクタを基準に整理する
  2. プロパティを基準に整理する

たいていの方は前者を用います。それは何故か? 一般に「直感的にわかりやすいから」と説明されますが、それでは言葉が足りないでしょう。より正確には、「CSS を書き上げていく段階において、セレクタを基準に整理していく方が自然だから」となるのではないでしょうか。文書を腑分けし構造化するのが HTML の役割、その HTML の各要素型を装飾するのが CSS の役割。HTML あっての CSS であって、プロパティ先行では話が逆です。

ゼロからの CSS 構築は、ジグソーパズルを完成させていく作業に似ています。見出しは見出しらしく、段落は段落らしく、リストはリストらしく……。そうしてパズルが完成したとき、ピースのひとつひとつは絵柄の中に埋没していきます。CSS のメンテナンスは、絵柄の調整に相当します。このときピース単位で色など指定していたのでは埒があきません。色の方を基準に、関連するピースを集めたくなります。

なるほど、構築からメンテナンスへ段階を移すにしたがって、CSS を整理する基準をセレクタからプロパティへ変更することには大きな意義があるわけです。

とはいえ、従来、それは難題でした。過去、CSS を再整理する試みがたいてい成功しなかったのは、手作業ではあまりにも面倒だからです。だからといって、最初からプロパティ基準で CSS を書く不自然さ・わかりにくさといったらない。

あきやんさんは、ここにひとつの技術革新をもたらしました。蓄々CSS自動整形は、セレクタ基準の CSS をプロパティ基準へ自動で再整理するツールです。さらに逆変換も可能なので、自在にセレクタ基準とプロパティ基準を使い分けることが可能。これは CSS 記法の革命といっても過言ではないでしょう。CSS の見方・考え方を一変させる破壊力があります。

これは面白い! わくわくしてきます。当サイトの扱うレベルにおいては、CSS は作ってお終い、メンテナンスという段階は存在しません。だから当サイトで今後、プロパティ別整理法をフィーチャーする機会はほとんどないでしょうが、ヘビーなカススタイラーの方々には、非常に魅力的な提案だと思いますね。(改訂 2005-05-30)

Information

注意書き