公開日: 2009年10月05日(Mon)
ウェブページを印刷するときに、表示を印刷ように調整できる印刷用CSSはすでに広く普及している(まともに対応しているブラウザは残念ながら少ないが・・・)。さらに、ケータイ端末の高性能化や ニンテンドーWii のようなテレビ用ネット端末の登場で、HTMLの利用シーンは今後どんどん広がっていくことが予想される。
1枚のウェブページが、こうした様々な端末から参照されること(マルチデバイス対応)を考慮すると、現在の一般的なウェブデザインのままでは、対応しきれない場面が出てくるだろう。
そこで、ウェブページをマルチデバイスに対応させるために、何に気をつける必要があるのか考えて、仮説を立ててみた。
ドキュメントとスタイルを物理的に分離したデザインは、かなり普及してきたように思う。しかし、論理的に分離できている例は少ない。物理的に分離しているだけでは、メディア別の書き分けは困難だ。
見た目のスタイルをそのままクラス名にしたような、スタイルのショートカット的なクラス(.mt10など)にはなるべく頼らず、構造や意味でスタイルを管理するコーディングを心がけよう。
ページ全体の調和を取るのは重要だが、ページ個別に書き下ろすようなデザイン作業は、効率がよくない。まずは、パーツ単位の設計を基本にし、ページのデザインは、パーツの組み合わせだけで成立できるような設計を目指すべし。
また、パーツ設計に際して幾つか注意すべき点がある。
screen以外のメディアを考慮すると、テキストベースの情報にしかアクセスできない環境がある。逆に、テキストであれば全てのメディアで再生が可能なはずだ。
Flashや画像などによる表現を組み立てる前に、まずテキストだけで成立する構成を確立しておくことが重要だ。それから、スクリーン向けにFlashなどによる表現を追加していけばいい。
装飾用のメニュー画像など、img要素を使う必要のない部品は、すべて画像置換で対応するべきだ。このような画像は、メディアタイプによっては逆に使いづらくなったり、画面が重くなったりすることが多いが、img要素の画像はCSSで変更することができない。
CSSでどうしても表現できない、あるいはブラウザが対応していないCSSの機能を使う必要がある場合は、JavaScriptが使える。onloadイベントでHTMLをスキャンして、スタイルを動的に調整するようにしてしまう方法だ。
ただし、この方法は、ロード完了直後に画面がちらついたように見えることがあったり、処理が重くなる可能性があり、多様は避けるべきだ。
様々なテクニックを駆使しても、どうしても成立できないデザインもあるだろう。
そういうときは、仕方がないので、両方コーディングして、メディアタイプによって出し分けてしまおう。
しかし、HTML上に同一の内容を2重に記述することになるため、冗長になってしまう欠点は否めない。
下記は過去の関連記事。
公開日: 2009年10月05日(Mon)