Hatena::agenda

CSS、HTML、XHTML、XML、DOM、XSLT、XPath、ECMAScript、Python、ウェブユーザビリティ、その他に関連する文書等のリソースを挙げていったりします。より本質的な議論を志向。
注意:Hatena::agendaの更新は終了しています!過去の記事はagenda のホームページよりどうぞ。今後の更新情報の取得は、agendaのフィード(XML/Atom)から。

 | 

2007-10-05 文書指向ウェブデザインにおけるスタイルシートの定石

スタイルシートの文脈で文書指向ウェブデザインを説明すると、文書を読みに来た閲覧者のみをターゲットにしたデザインということだ。正式版をjintrick.netで公開する前に1時間で書いたプレビュー版を糞ブログに「流して」おこう。

前景色は黒(#000)、背景色は白(#FFF)にすることで、より確実な可読性を確保できる。眩しくて読みづらいというよくある批判に対する答えはこうだ:

  • モニタの輝度を落とせば良い。
  • モニタの輝度を落とさなければならない状況が考慮されていない。

特に後者はまだ誰も言及していないんじゃないかな。

左右のマージンを小さくすることで、より幅広い状況に適応できる。相対指定の2〜3%程度で十分だろう。それでも左右が詰まっていて息苦しいという批判に対する答えはこうだ:

  • その閲覧者はデザインを眺めに来たのであって、文書を読みに来たのではない可能性が高い。
  • CSSにおけるmax-widthプロパティなどを利用して、十分な表示幅がある時のみマージンを取ればよい。

文書を眺めに来た閲覧者というのは、たいていスタイルシート制作者自身に他ならない。文書指向の考え方はこのミスを防ぐ。

枠線はコンテンツの区分にのみ使用することで、枠線に統一的な意味を感じさせることができる。セクション単位や見出し一つに対してボーダーを設けると、画面が窮屈になる。空白をうまく使おう。枠線ばかり使っていると、いざというとき(注意書きなどを目立たせるとき)に枠線の効果が得られない。

文字サイズはユーザーに任せるというのは、当たり前かもしれないが一応挙げておく。CSSでは継承元に100%またはmediumを指定し、見出し等には大きめの相対指定をする。

本文のフォントは一種類に統一する。意味もなく様々なフォントを混在させて脅迫文のような印象を与えてしまう愚は避けよう。例外としてプログラムコードなどのフォントは、l(小文字エル)とI(大文字アイ)、0(ゼロ)とO(オー)のような似ている文字の区別がはっきりとしたもの(例:Consolas)を選んで使う。また見出しには大きめのボールド体でもきれいに見えるフォントを別途指定して良い。

無駄な画像は使わず、表示までの速度を0.1秒でも速くしよう。質の高い画像で閲覧者をだます行為は、文書指向とは何の関係もない。内容で勝負しよう。trustの情報を必要とする閲覧者には、質の高い画像などではなく著者紹介等へのリンクを用意しよう。

文書の理解を補助する画像はふんだんに使おう。これはスタイルシートの話ではないように見えるが、実際にそのような画像を使うときには文書が見栄えするように配置・調整すると一石二鳥で、無駄な背景画像を使うより遥かに有益である。

スクロールは小さく抑え、画面領域という資源を有効に利用する。窮屈にならない程度の最低限の縦幅で済ませるよう、各要素の上下マージンを小さくしたり、テーブルや画像などを浮動させてテキストを回り込ませるなどの工夫をする。

リンクのアンカーには下線を引くのが標準であり、リンクであることを示す最も簡単で確実な方法である。裏を返せば、これ以外の要素に下線を引いてはならない。

未訪問リンクのアンカーは青色にするのが標準であり、これを逸脱するとリンクであるかどうかを判断する労力を強いることになる場合もあり、無駄である。

訪問済みリンクのアンカーは赤紫色にするのが標準であり、未訪問のアンカーと同じ色にして訪問済みかどうかという重要な情報を隠すような馬鹿げた嫌がらせをしてはならない。

要するに、文書指向ウェブデザインのプレゼンテーションスタイルは実に禁欲的で殺伐としていますよ、ということになるが、説明的な画像やビデオなどはふんだんに使って良いので、最終的な見た目の鮮やかさはその文書の内容次第である。一般的なブラウザのデフォルトのスタイルシートとの明らかな違いは、画面領域に対してコンテンツ領域がその多くを占めているということだ。2007年現在、CSSでは不可能だがJavascriptと組み合わせてリキッドレイアウトを実現すれば、特に高解像度モニタに対して画面をさらに有効に使うことが出来る。

リキッドマルチカラムを利用する。この方法は内容が深いので別文書とした。

ちなみにこの糞ブログのリキッドマルチカラム指定は欠陥だらけである意味嫌がらせに近いものがあるが、まあこんなのもあるよくらいの意味なのでよろしく。ウィンドウ幅を小さくすれば1カラムになるよ、というのは言い訳にならないか。

 |