CSSはださい

このタイトルはたまたま訪れたAlternative Design Project by Mo3というブログで使われているのを見たことから来ている。このブログは、CSSのTipsを詳細に検討している、素晴らしいサイトだと思うのだが、しかし、同時にまだこのようなデザイン手法の探求が始められたばかりだという印象も持った。

昔はフレームやテーブルを使って段組ふうのレイアウトをするページが多かったが、最近はCSSを使うことが多くなってきた。今や、こういうフレームやテーブルでのデザインをしているサイトは、時代遅れとなりつつある。

　ユーザーにしてみれば、特にテーブルを使ったレイアウトとCSSを使ったレイアウトは、見た目には余り違いが見られないので、気付かないことも多いだろう。しかし、CSSを使うことで、HTML文書の方は、できるだけデータ中心に書き、HTMLのタグを減らすことができるようになり、またデザインの修正は、CSSの方を変更することで一括して変更することができるので、ページの保守性や作りやすさが格段に向上する。

　また、表現力という点でもCSSは非常に自由度が高く、固定されたHTMLのタグを、classを使用することで、無限に拡張できるようになる。

　といったようなことは、今更ここで言うまでもなく、広く知られていることであり、ここで強調するようなことでない。むしろ、CSSがデザインの自由度が高い、と言っても、余りにも自由なので、その中で効果的な使い方の研究がまだ十分に進んでいないように思われるのだ。

　何らかの技術がでてくれば、それによって出来ることが何でも分かってしまうに違いないと、一般の人は考えるかも知れないが、人間の知性というのは、思ったほど完璧なものではない。この単純なデザインツールを使って、実際にWebページをデザインする方法は、まだ探求が始まったばかりで、その可能性の限界まで行くには、まだ時間が必要なのである。

　そういう中で、CSSを使ったデザイン手法を研究している一群の人たちが、様々なテクニックを生み出している。こうやっていくうちに、徐々にデザインの可能性が広げられていくのであって、一挙に何もかもができるようになってしまうわけではない。今、そうやって色々な人が探求した手法を積み重ねている時期だと言ってよい。

　しかし、まだそのデザイン手法の種類は思ったほど多くはない。そのため、ある種のページを作ろうとすると、みんなほぼ同じようなレイアウトになってしまうのである。効果も似たり寄ったりだ。他のページを見て、その手法を真似すれば、これまた似たようなWebサイトが氾濫することになる。

　したがって、CSSはださい、ということになる。

　もちろん、そういうデザイン手法も使いようであって、十分なデザインセンスがあれば、ださくないページを作ることは可能なのだが、いかんせん、Webページを開発している人は、デザインよりも技術に頼りがちで、そうすると、テクニックを使うためにWebページをデザインするということになってしまいかねない。本当はシンプルな技術でも、デザインセンスがあれば、十分ださくないページを作ることは可能なのだ。そして、そのセンスはCSSを使うか使わないかなどに関係なく、その人の資質の問題なのだ。これはいかんともしがたい。

　たとえば、今、必要があって、色々な大学の情報学科の類のページを見ているが、多くが非常に似たレイアウトを採用している。しかも、どういうわけか青を基調にしたデザインになっている。僕の学科も情報学科の一種だが、もし、青を基調としたデザインにすると、他との差別化ができなくなる。ということで、現在、自分のゼミのページをCSSでデザインしているが、少なくとも青を使わないレイアウトにしている。もう少しで出来上がるので（大体、福田ゼミのトップページと僕のプロフィールのページのレイアウトで一日かかった。）、近いうちに、現在の混乱したページに対するナビゲーションのページを公開したいと思う。

HTMLのタグ

　もし、画像を使わず、HTMLのタグだけでWebページを作るとしたら、使える要素はそんなに多いものではない。HTMLにも時代の変遷があって、普通、こういうのはどんどん拡張されて、要素が増えていきそうなものだが、HTMLに関しては、使える要素がどんどん減っていく。そもそも、ある時期まで、増やされていったものが、整理されていくということなのだろう。

　HTMLの後継とも言うべきXHTMLでは、さらに減って、XHTMLのタグとしては極めてシンプルになっている。これだけのタグで、それなりに見栄えのするページを作れるのかと思えるほどである。あるいは数が少ないので、初心者でも簡単に覚えられそうである。

　逆に言うと、HTMLの書き方としては、余計なものがなくて、シンプルに構造を書けばいい、ないしは書かなければならない、ということを意味している。構造とデザインを分離する、と言っても、なかなかその切り分けが難しいが、要は、HTMLをできるだけシンプルに、構造的に書くことを心がけるのが、早道なのだろう。

　そして、デザインについては、ほとんどのタグについてCSSでデザインをしていくことになる。こちらは、これまでのHTMLよりも格段に自由度が高い。これまではそれぞれのタグでのデザインが固定されていて、属性などで少し変更できたにすぎないが、CSSでは、特にボックス・モデルのおかけで、ほとんどのタグについて共通の属性が使えるようになっている。かなりのことができるのだ。

　もちろん、画像として作るのよりは自由度はないが、それでも、元々のタグの意味を全く無視してさえ、デザインできるというのは強力だ。強力すぎるので、実際にどうデザインするか、というコツをつかむまでが大変である。Webページにもいくつかタイプがあり、画像中心、ヴィジュアル重視だったり、テキスト中心、情報提供型だったり。そのタイプによって設計されるCSSにも違いが出てくる。

　だから、主に自分がよく作るタイプのページについてのCSSを作り慣れることが必要だ。そうこうしていくうちに、自分なりに各タグについての基本的なデザインが決まってくる。自分のページで汎用になるCSSが出来てくる。そうなればしめたもので、後は非常に楽になる（はずだ。）。

　まだ僕はそこまでは作り込んでいない。その場限りのCSSを作っているだけで、時期が違うと、違うパターンになっている。ないしは、別のところで同じようなCSSを何度も一から書いている。もう少し整理して自分用の汎用のデザインを確立したいものだ。

Webスタンダード

　HTMLとCSSを組み合わせて、構造的なWebページを作ることによって、Webサイトの統一性とメンテナンスの容易さを実現する、というようなことを何度か書いた。

　それと同じ趣旨の考え方が、具体的なノウハウとともに書かれている本を見つけた。

Designing with Web Standards―XHTML+CSSを中心とした「Web標準」によるデザインの実践

• 作者: ジェフリー ゼルドマン
• 出版社/メーカー: 毎日コミュニケーションズ
• 発売日: 2004/10
• メディア: 単行本

　まだ読み始めたばかりだが、さすがにWeb先進国のアメリカの本だけはある（もちろん、翻訳で読んでいるが。）。原書は2003年に出ている。

　本の最初に、「明日はどうなろうとも、とりあえず目先の問題を解決するというのが、今までの僕らのやり方だった。本書では、その“今建てて、料金は後払い（build-now pay-later）”という手法が、もはや非生産的であり、また不必要でもあることを説明し、先延ばしすることなく、今日の問題は今解決できることを説明する。」という言葉がある。

　この先のことを考えることなく、見た目を何とかしてしまう、というやり方は、ソフトウェアを作るときに、多くの人たちが取っている態度だ。ことはWeb制作の問題だけではない。そもそも2000年問題だってそういうことだった。等分2000年なんてこないだろうと、そのソフトを作った人たちは考えた。そこまで見通すことが出来ず、目の前の業務ソフトを、何の根拠もなく数年のスパンでしか考えずに作ってしまったのだ。

　Webページも、現在HTMLを手書きで作っている人は少ない。そして、ヴィジュアルなHTML作成ソフトは、見た目だけのために、つまり自由なレイアウトとデザインのために、HTMLのタグを使用する。作る人は、今自分がどういうタグを使って、Webページのその部分を作っているのか分からない。ただ見た目だけをデザインする。後はソフトがその見た目を実現するために、必要なタグを組み合わせる。

　しかし、HTMLのタグは基本的にはデザインのためにではなく、構造のためにある。デザインはCSSで実現すべきものである。HTMLソフトは、構造とデザインを分離しては決して作ってくれない。全ては見た目のためのみに作られている。

　それが目先の解決を優先しているということだ。しかし、そのツケは、HTMLのバージョンが上がり、より厳密になり、それにブラウザーが対応するようになったときに、払うことになる。またページ数が増え、古いページのリニューアルをしたくなったときに払うことになる。Webページは日々古びていくので、必ずツケは払わなければならなくなる。

　それを解消するのが、現状では、HTMLを構造記述のためのみに用い、デザインはCSSに任せる、という方法をとることだ。

　もちろん、構造といっても、デザインを考慮して構造を考える必要はある。ある部分を太字にしたいとしたとき、それを太字にするためのスタイルを定義することになる。しかし、それは「太字」にしたいというスタイルではなく、ある意味があることを示すクラスを考え、そのクラスに対して太字というデザインを割り当てることになる。だから、構造を考えるときに、その単位はデザインを考慮して切り分ける必要があるのである。

　まあ、抽象的な方針はこんなところでいいとして、では具体的にどういうタグを用い、どういうスタイルを用いたらいいのか、またWebページのどういうところに注意をはらったらいいか、というノウハウについては、自分で考えるよりも、既に豊かな経験を踏まえた本やサイトを参考にするのがいいだろう。

ブロック要素をセンターリングするには

　table要素を使って、表組みを行い、それをセンターリングして表示するために、CSSを書こうとしたのだが、どこをどう探しても、適切な属性が見つからない。要するにブロック要素全体をセンターリングするための属性が、現在のCSSにはないようなのだ。

　そこで、Web検索を行い、Web標準普及プロジェクトというサイトにたどり着いた。このサイト自体は、ブラウザーを選ばないHTMLを書くためのTipsを提供しているサイトだが、そこにブロック要素をセンターリングするためのスタイルシートの書き方が掲載されていた。

　たとえば、table要素をセンターリングするには、

body { width: 700px; }
table { margin-left: auto;
            margin-right: auto;
            width: 660px;}

とすればよい。

　ポイントは、左右のマージンをそれぞれautoにしておき、テーブルの横幅を明示的にサイズ指定する、ということだ。こうすると、2つのautoは、テーブルの外側を包む箱（上の場合はbody自体）の幅から、テーブルのサイズを引いた残りを、ちょうど二等分することになる。つまり、テーブルの両側のマージンが同じ長さになり、テーブルが中央に配置されるのだ。

　これは、上のサイトによると、Internet Explorer 6のバグで正しく表示されないそうだ。僕はMacを使っているので試していないが、上の説明はCSSの正しい解釈なので、それを表示できないとすればIEのバグと言うことになるだろう（確認はしていない）。

　しかし、世の中で最も大きいシェアを占めているのは、そのバグをはらんだIEである。だから、上に挙げたような、「ブラウザーに依存しないHTMLを書く」にはどうしたらいいか、というサイトが必要となるのだろうが、これはあくまで必要悪であって、まずは正しいHTMLやCSSを書き、最も普及しているものでも確認して、意図通りに見えるように調整をするようにすべきだ、というのが上のサイトでの提案である。