スタイルと文書構造、物理的に分離しただけじゃ意味がない

W3Cの言う「スタイルと文書構造の分離」は、ウェブ標準の名の下にだいぶ浸透してきているんじゃないかと思う。しかし、なんか納得できないんだよな。

というのは、スタイルと文書構造が物理的に分離しただけであって、論理的にはまだまだ完全に一体化した状態のままである、ということだ。

具体的には例えば「文字サイズを12ピクセルにする」という役割を持つ .size12px のようなCSSのクラス名。あるいは、「下にマージンを5ピクセル空ける」.mb5 など。スタイルシートをこういうふうに管理する例は結構一般的だと思われるが、果たしてこれを「スタイルと文書構造の分離」と言えるのだろうか？

W3Cがスタイルと文書構造の分離を推進するのはなぜか？ スタイリングやレイアウトを目的としたマークアップでは、1つのHTML文書から1通りのレイアウトしか表現できなかった。これを分離すれば、1つのHTML文書に対して、メディアタイプ別の複数のスタイルシートを用意することで、あらゆるユーザエージェントに同一の文書を提供することができる。これがおそらく、「スタイルと文書構造の分離」の最大の目的だ。

そう考えたときに、.size12px という、「ユーザやユーザエージェントがいかなる状況にあるかに関わらず必ず文字サイズを12pxとする」クラス名は、非常に扱いにくい。これでは結局、メディアタイプ別に表示を切り替えることはできないのだ。<font size="2"> として表現していたころ(分離以前の混沌としたHTML)と、実質的には何も変わっていない。

スタイルと文書構造が分離された世界では、当然のことながら、文書構造を主軸に物事を捉えなければならない。例えば「段落」という構造のことである。段落の上下には、通常いくらかのマージンが設定されている。これを仮に 5px としよう。重要なのは、この 5px をどう捉えるかという考え方だ。

• 段落を<p>タグでマークアップした結果、上下に5pxのマージンが付いた。
• 上下に5pxのマージンを設定したかったため、段落としてマークアップした。

どちらが正しい考え方だろうか。もちろん前者だ。PCスクリーン上では表示結果はまったく同じものになるかも知れない。しかし、別のメディアタイプに対してはそうとは限らない。前者はメディアタイプによって5pxではない値が適用されても問題は起きないが、後者だとしたら保障はできない。5pxが保障されないと成立しない使い方をしているかも知れないからだ。

マークアップエンジニアにとって、HTML要素は「段落である」ということが重要であって、「5pxのマージン」はまったく重要ではない(というより、後から意識すべき事項だ)。それでこそ、一元化されたCSSファイル1つでサイト全体のスタイルをコントロールできるわけだし、メディアタイプ別の表示の調整も可能になる。ところが、.size12px や .mb5 といったクラス名は、マークアップエンジニアをこうした思考から逆方向へ誘導してしまう一因となっているのだ。

こうしたクラス名ばかりではなく、例えばいわゆるリセットCSSのような考え方も同じように作用している。リセットCSSは、あらゆるタグが本来持っている表示スタイルを全て廃止して、一旦完全にフラットな状態にして再構築しようというものだと理解しているが、「リセット」が目指す無味無臭のぺちゃんこな表示という理想は、完全にビジュアル面からのみ文書を捉えようとすることだと思える(だからぼくはリセットCSSじゃなくてぺちゃんこCSSと呼んでいる)。PCスクリーン上のレイアウトだけを考慮してコーディングするならば、タグが持っている元来の特性を完全に無視できた方が作業効率がいいのかも知れない。しかしそれ以外のメディアタイプに対応しようと考えたときに、一元的な管理はむしろ難しくなる。

そもそも、マークアップの設計が行われる前に、デザイナが完成イメージを起こして、その1枚の静的な画像が絶対的な完成図になってしまうという作業工程が逆なんじゃないかと思う。建築にたとえれば、基礎工事や柱の組み方を無視して、外壁だけを先行して構築し、それに合わせて基礎設計を起こしていくという状態。それで上手くはまるように外壁がデザインされていればいいけれども、設計上の矛盾があっても変更できず、むりやり辻褄を合わせようとする。そういうやり方では、欠陥住宅ができてしまうのも無理はない。

そして、そういう作業工程にならざるを得ない背景には、予算や納期の制約を受けながら、ウォーターフォール型の開発手法しかできないという(おそらく技術的な)制約があると思う。PxFW などのシステムやCMSなどを上手く利用して、アジャイル化できれば、基礎工事から順にウェブデザインを構築していけるようになるかもしれない。

ウェブ環境全体が、ユニバーサルデザインやユビキタスを実現するためには、こういう転換が必要だと思うし、たぶん、できると思う。

• ※Pickles CSS にも、.mb5 のような融通の利かないクラス名が沢山取り込まれている。これらを使うこと自体を必ずしもまずいことだとは思わないが、上記で説明した「スタイルと文書構造の分離」の考え方や、異なるメディアタイプへの対応を意識して使用して欲しい。