![[画像]](http://vainsystem.net/diary/image/logo.png "[画像]"){kind=logo}
2007/06/07 [Thu]
■ vainsystem.net10周年記念企画(7)
2002 Valid（妥当）なHTMLへ
Netscape6（Mozilla）がCSSをマトモに解釈するようになった影響で、サイトのフルCSSデザイン化を敢行。HTMLは文章の論理構造のみを記述するモノで、レイアウトや装飾は全てCSSに分離。これが正しい方向だ。未だに全く浸透していないが。
フルCSSでデザインするには、まずはHTMLをシンプルに書き直す作業が必要。サイト全体でHTMLを見直し、XHTML1.0 Strict（仕様に厳格）に対してValid（妥当）にした。さすがにStrictはキツい部分が多いので、通常はTransitional（Strictより制限が緩い）で十分。HTML4.01でも構わないが、どうせならXHTMLでしっかりした構造にすることをオススメ。
Validにするというのは、自己満足の割合が大きいのは事実。しかし、本来はなんらかのルールに沿って記述するのが当たり前なんだよな。漠然とNetscapeやIEなどのデファクトスタンダードなブラウザで見られりゃOK、で今まで来てたのが異常。正しいHTMLを書く人がもっと増えればいいが、blogの浸透などでそもそも手書きをする人が減ってしまったな。
XHTMLについては、ユニバーサルHTML/XHTML（神崎正英著）という本でほぼ全てを学んだ。Validを目指すのなら、まず最初に読むべき本。
HTMLの変遷
上記の本は概念を説明したものなので別として、基本的にリファレンスの類の本を購入した事はない。ツールも補助的な物だけで、HTMLエディタは使ったことが無い。ﾓﾓｰｲも言ってるだろ、漢はだまってエディタで手書きだ。わからない事はウェブ検索で補完。よって、かなり我流のHTMLを書いていた。
XHTML化するまでは「Netscapeで見られれば問題ない」というスタンスで、普通に物理マークアップを行っていた。覚えているところでは、左にスキマを開けるために文章全体がblockquote（引用）で囲われてるとか。そもそも、各要素に意味があるなんて知らなかった。
XHTML化は、高性能エディタの置換と一部スクリプトで行った。まず、余分な要素を全て取り除き、ほぼプレーンなテキストを取り出す。行頭と行末をp要素に置換して、段落を作成。最後に論理的に適切なものに置換（b要素→em要素、など）しておしまい。
現在のHTMLのしくみ
突き詰めていくとかなりシンプルになる。日常的に使うのは殆どp要素（段落）とa要素（リンク）だけで済む。hxで見出しをつけて、本文をpで囲んで書く。以上おしまい。br要素で改行するのはなるべく避けたい。ブラウザの横幅によってはぐちゃぐちゃになってしまう。
p要素（段落）はあまり浸透していないように思う。段落（文章のカタマリ）を作り、その間にある程度の間隔を取るべき。段落同士にスキマが無く、上から下まで行が詰まっているサイトがよくあるが、あれはかなり読みづらい。頭を1文字空けたりして本と同じ体裁にしているんだろうが、ウェブブラウザの場合はどうしてもスクロールが伴う。段落同士にスキマがないと、読んでいる場所を簡単に見失う。
デザインコンセプト
CSSに移行してからは、まず文章の読みやすさを第一にデザインしている。行間や左右のインデント幅なんかは、微調整を繰り返して今の体裁に落ち着いている。メニュー類は必要最低限の物だけを配置して、初めて来た人でもわかりやすいナビゲーションを目指した。
メインフォントのサイズは、100%のブラウザ標準。一般にblogのフォントは80%程度が多いが、なんでわざわざ小さく読みづらくするのか。端っこにズラっと並んでいるリンクは本当に必要な物なのか。ここでも、例えば「最近5件のコメント」みたいなのを羅列することは可能だが、こんなのが必要なのは管理者と書き込んだ人だけだ。必要な人だけがリンクを確認すればいい。外部サイトへのリンクも、アンテナへのリンクを張っておけばそれで済む。
MovableTypeに多い3カラム（3段組）はアホのフォーマット。ただでさえ狭いブラウザなのに、真ん中1/3スペースのちっこい文字で読まされるのはかなわない。幸いblogシステムはRSSに対応している事が多いので、RSSリーダーで読めば解決。
全体のデザインについては、ずっと透明感を大事にしている。あまり色を使わず、淡い感じで統一。白背景ってのは意外に難しくて、懲りすぎるとごちゃつくし、シンプルにしすぎても寂しくなる。バランスが大事。ちなみに、背景は真っ白では無くて薄い灰色。モニタの輝度が高いままの設定で使っている人が多いだろうから配慮した。色温度と輝度は下げるべき。
PC環境の変遷
次回蛇足回。全10回予定。
http://vainsystem.net/ Webmaster：こういと