Part 1. Let's begin CSS : Appendix A

A.2 長さ指定とアクセシビリティ

 ここまで CSS について見てきて,“長さを指定”するケースがかなり多いことにお気づきだろう。ここでは,読みやすい・利用しやすいサイトにするため,デザインに整合性があるサイトにするために,長さ指定をどのように行うかという指針について,ヒントを述べる。

アクセシブルな長さ指定

 CSS では,長さ指定について,さまざまな方法が提供されている。思い描くレイアウトを簡単に実現するためには,すべての長さを絶対長さ指定で“決め打ち”してしまえばよい。ただしこの場合,往々にしてアクセシビリティの低下を引き起こす。

 たとえば,フォントサイズが特定の絶対長さで固定されている場合,一般にブラウザ側でこれを変える手立てを実装する義務はない。“文字が小さくて読みづらいので調整したい”と思ってもできなければ,スタイルシートを読者側で上書きするか,フォント指定に関してスタイルシートを無視するように設定することになる。このような手段を講じられた場合,スタイルシート設計者の意図は伝わらない。

 2002 年 11 月現在,Netscape 6 以降,Opera 6,および Mac OS 版 Internet Explorer 5 では,テキストサイズまたはページサイズの拡大・縮小ができる。しかしこの場合も,一貫性のないフォントサイズ指定はブラウザの諸設定との兼ね合いで,デザインの乱れにつながる。さらに,拡大・縮小の操作がどこまで及ぶか(フォントサイズのみ,あらゆる長さ,絶対長さと画面上の画素数の換算率など)によって,意図しないデザインになってしまう可能性もある。したがって,拡大・縮小ができるからと絶対長さの指定を多用することは,あるいは危険因子をはらむことといえる。

 このほかにも,要素が特定のサイズで固定されている場合,表示領域の広さ(画面の解像度,ウィンドウの大きさ)によっては煩雑なスクロールを余儀なくされるかもしれない(場合によっては間抜けなレイアウトになることもありうる)。

 このような点を考えたとき,閲覧者の環境などを考慮することは,レイアウトにある程度の自由度を持たせることと言えるだろう。フォントサイズにおいては,絶対サイズまたは相対サイズで指定する,もしくは,相対長さ指定 または百分率指定を用いて初期値のフォントサイズ(BODY 要素が初期値として持つフォントサイズ)からの比率で次々に指定していく方法を採ることがあげられる。要素の寸法に関しては,表示領域の大きさを基準として指定していく方法があるだろう。

 このような考慮は,デザイン・レイアウトに関して未知の項目を考えることであり,あるいは難しいことである。さまざまな場合においてアクセシブルで,なおかつ不自然にならない,間の抜けないデザインにすることがひとつの目標としてあるだろう。

 このアクセシビリティに関する問題では,あるいはブラウザの実装に配慮を求める面もあるかもしれない。たとえば,表示を全体として拡大・縮小する機能を備えるなどの機能が望まれる。

長さ指定における考慮

 さて,長さ指定を行う際,閲覧者に対して考慮する要因として(閲覧者が変更可能な要因として),

  • フォントサイズ
  • 表示領域のサイズ

があげられる。指定した種々の長さを,これらの変化に対してどのように(追従して)変化させるのか(あるいは,固定するのか)が考えるべき事項である。

 CSS では,長さを指定するケースにおいて,おもに 3 つの場合がある。

固定する
フォントサイズ,表示領域のサイズの変化のいずれでも変化しない
フォントサイズを基準とする
フォントサイズの変化に追従して変化しうる
収容ブロックの寸法を基準とする
フォントサイズまたは表示領域のサイズに追従して変化しうる

まず,これらの指定方法について,整合性・一貫性を保つことを考えないと,乱れた出力または間の抜けた出力になってしまう。一例として,1.9 で述べたフォントサイズと行送りの関係がある。このとき,フォントサイズが閲覧者側で可変で,行送りを固定すると,期せず行どうしが重なったり(フォントサイズが行送りを上回ったとき),または行間があきすぎたり(フォントサイズが行送りに比べて小さすぎるとき)という状況が起こりえた。また,一部だけフォントサイズを固定してしまったりすると,閲覧者のフォントサイズの変更で,フォントの大きさに対するデザインの意図(フォントサイズの序列)が大きく崩れてしまうことになる。

 整合性・一貫性のある長さ指定ができたところで,考えるべきは,“どの部分の長さを何に追従させるか”である。つまりは,閲覧者が変化させうるフォントサイズと表示領域のサイズに対して,各部の長さがどう変化すれば適切な,意図どおりのデザインを保てるかを設計することである。たとえば,

  • そのマージン・パディングは,フォントサイズに追従させるか,ウィンドウ幅に追従させるか?
  • その画像(オブジェクト)は,固定されたサイズがよいのか,フォントサイズと整合するサイズに変化するのがよいのか?

などがある。これらの考慮を重ねて,さまざまな環境・状況下でアクセシブルかつ意図どおりとなるデザインを行っていくのがよいだろう。

 もっとも,熟慮したとはいえあまりに極端な状況には対処しかねる場合もあるし,あるいは予測不可能な状況もあるだろう。また,後述する min-widthmax-widthmin-height および max-height プロパティなどを用いて,寸法をある範囲に規定するのがよい場合もあるかもしれない。

 スタイルシートの利用は,視覚デザインを行うと同時に,可読性の高い,アクセシブルなページ作成の一助となるものであろう。配慮ある WWW サイトの作成が望まれる。