リキッドデザイン

WEBデザインということで・・・。
「デザイン」と言う言葉は「設計する」などの意味ですから、本来はサイト構築全般をさすはずなのですが、およそこの業界では、レイアウトやイラストレーティングなどをさすことが多く、プログラミングなどはささないようです。

ホームページを作成する上で、アクセシビリティの一つに
「イメージ安全圏内におさめる」
というものがあります。
これは、クライアントPCのスペックによるもので、画面解像度が800*600ピクセルのディスプレイを使っている人もまだかなりいるということを考えると、横幅は800ピクセル(正確にはスクロールバー表示部分などを考慮して780ピクセル程度)におさめることが大切だということです。
千秀小HPでは以上の理由で横幅を750ピクセルにおさえています。
しかしながら、現在ユーザーで一番多い環境は1024*768ピクセル。そして1280*1024ピクセル環境のユーザーもたくさんいます。その際、横幅が800ピクセルまでだと今度は格好がつかなくなってしまいます。
サミットのときにも話しましたが、アクセシビリティというのは、「画像を使わず、テキストを大きくし、ハイコントラストのページ」などと言ったものではありません。全ての人にとって情報を得やすい環境を整えることが大切ですよね。

そこで、ここのところ流行っているのがリキッドデザイン。
リキッドとは流体ですから、流動的レイアウトをさします。CSSレイアウトで実現することがほとんどですが、何をするかっていうと非常に簡単。テーブルレイアウトなど、横幅をピクセルでしていしていたものを、パーセンテージで指定するだけです。
ページの横幅を80%を指定しておけば、どのパソコンでも、画面横幅の80%で表示をしてくれます。

ただし、相当のCSSテクニックをお持ちでなければ、リキッドデザインにする代償として、「おおざっぱなレイアウト」を黙認しなくてはならなくなるでしょう。
DTPがミリ指定でレイアウトすることによって見栄えのするものをつくりあげるのと同様、ホームページはピクセル指定でレイアウトすることが、「誰にでも同じように見える」ことを実現する最良の手段なのです。それをパーセンテージで指定するということは、画像の横にまわりこんでいるテキストの量がどれくらいかなど想定しづらくなります。よく考えずにCSSレイアウトをおこなうと、今度はfloatを使ったがための縦のレイアウト崩れに悩まされることになるかもしれません。
レイアウトにこだわらず、だいたいでいいやと言う方は、ぜひリキッドデザインを試してみてください。
レイアウトをくずしたくない人は、stopdesignなど著名なサイトを研究するなど、少なくともDIVをしっかりコントロールできるようになる必要があるでしょう。


ちなみに注意点として、DIVで二段組レイアウトをした場合、左右のボックスのパーセントが100%であるとレイアウト崩れをおこすことが非常に多いです。複数のブラウザで確認をしながら、合計90%くらいになるようにするとよいかと思います。
2005年11月18日(金) 22:14:15 Modified by web_encounter




スマートフォン版で見る