2xup.org

一行あたりの文字数を制限する elastic layout （エラステックレイアウト）

今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。

div#container {
  width: 80%;
}

icy icy icypx で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。

flexible (フレキシブル) レイアウト

div#container {
  width: 80%;
  min-width: 400px;
  max-width: 1100px;
}

コンテンツの幅に最大と最小を指定する為に、CSS の min-width, max-width を利用することにしました。このように指定すると、両プロパティに対応しているブラウザでは、いつまでも小さくなったり、大きくなったりするわけではなく、min-width, max-width 各々で指定した幅以上にはなりません。min-width, max-width に対応していない Windows Internet Explorer7 以前の Windows Internet Explorer ではこの 80% で幅が表示されますが、普通に閲覧するレベルであれば、表示が崩れるということはありません。非対応のブラウザでも min-width, max-width 両プロパティを有効にするスクリプトも公開されているので、利用しても良いかもしれませんね。

余談ですが、Read/WriteWeb でも取り上げられていましたが、最近ではソーシャルニュースサイト digg が fixed (フィクスト) レイアウトから、こうしたフレキシブルレイアウトに変更していました。

Digg moves from a fixed-width layout to a flexible layout allowing users to make use of screen real-estate on larger monitors. Navigation has also been moved to the top allowing users to quickly switch between sections.

elastic (エラステック) レイアウト

min-width, max-width をサポートしているブラウザでは、最小・最大の幅を指定したフレクシブルレイアウトを実現できました。しかし、ユーザーが設定しているフォントサイズが小さい場合、一行あたりの文字数がフォントサイズが多くなってしまうという可能性はあります。ユーザーが選択したフォントサイズに応じて、コンテンツの幅も変化させることができれば、この問題を解決できると考え、最小・最大幅を指定する min-width, max-width プロパティの値の単位を em (エム) で指定してみました。この方法はリニューアル前のサイトでも利用していた方法です。

div#container {
  width: 80%;
  min-width: 50em;
  max-width: 65em;
}

min-width, max-width プロパティの値の単位を em で指定しておくと、若干の差はあるものの、フォントサイズの大小に関わらず、一行あたりの文字数は固定され、目で終えなくなるようなことは無くなりそうです。実際に現在のこのブログにも適用しているので、Firefox や safari, Windows Internet Explorer7 などでフォントサイズを変更したりしてみてください。実際利用しているスタイルシートファイルへのリンクも用意しておきます。

ブラウザの対応状況は？

min-width, max-width だけでなく、min-height, max-height プロパティを含め、最近のブラウザでチェックして対応表を作成してみました。まだまだ Internet Explorer 7 以前のブラウザのシェアが多いのが現状ですが、閲覧に大きな支障が発生しない部分では導入しても良い状況のように感じました。

min-max-width, min-max-height プロパティ対応表
ブラウザ IE5 IE5.5 IE6 IE7 IE5 (mac) NN7 OP7 OP8 OP9 SF FF CM
min-width no no no yes no yes yes yes yes yes yes yes
max-width no no no yes no yes yes yes yes yes yes yes
min-height no no no yes no yes yes yes yes yes yes yes
max-height no no no yes no yes yes yes yes yes yes yes

レイアウトもデザインも目的あってこそ

今回のリニューアルの目的の一つに『文章は下手だけれど、なるべく読みやすさを重視しよう。』というものがありました。一行あたりの文字数の制限や、レイアウトの選択を導入したのもその実践のひとつです。デザインについてはまた別の記事で触れますが、こうしたレイアウトも、デザインもサイトの目的に応じて選択するという意識も必要だなあ。と実感しました。ですので、幅を固定したデザインがいけないというわけではありません。

こうしたレイアウトについて、世界中にはどんな意見があるのかといろいろ調べていると、CSS によるリキッドレイアウト推進し、実際にを集めている Liquid Designs というサイトを見つけました。ちょうど12月14日から、イカしたリキッドレイアウトサイトの投票が始まっているようです。

ノミネートされているサイトの中にはエラステックレイアウトのサイトもいくつかありました。ギャラリーにはたくさんのサイトがリストされていて、おもしろいです。

7 Comments

e-luckDecember 20, 2006 12:32 PM

僕も elastic なレイアウトが最適な解だと思ってるくちです。
ウチのサイトでは、max が 64em、min が 40em に設定しているんですが、個人的には、だいたい最小20文字、最大40～50文字くらいを目安にすれば良さげな感じですね。

BarDecember 20, 2006 5:43 PM

「遠回りして、結局
　“幅固定の90年代型デザイン”
　に戻ってきました」
という以上の結論が読み取れないのですが、いかがなもんでしょう。

kaminogoyaDecember 20, 2006 6:13 PM

> e-luck さん

こんにちはー。e-luck さんのウェブサイトも elastic なレイアウトですね。一行あたりの文字数に関する考え、参考になります。
いろいろ調べたくなりますねー。

> Bar さん
ご意見ありがとうございます。

幅固定のデザインが90年代なのかどうかは解りませんが、遠回りして戻ってきた感はあるかもしれません。しかし少なくともただ幅を固定したデザインという訳ではないですよね。
例えば、Bar さんは、その90年代型という幅固定のデザインはどういう目的でおこなわれていたと思いますか？ここに書いてあるレイアウト方法と、Bar さんの考えていらっしゃる90年代型幅固定のデザインをおこなっていたと思われる理由が違えば、それはただ『戻ってきた』とは言えないと思います。

reaDecember 21, 2006 12:31 AM

はじめまして。

今はまだIE6以前のシェアが高いので迷っていますが、IE7が普及すれば導入してみたいと思います。そういえば、Mozillaのサイトでは以前から取り入れていましたね。

「比対応のブラウザでも…」とありますが、「非対応」ではないですか？

kaminogoyaDecember 21, 2006 9:43 AM

> rea さん

はじめまして。こんにちは。
IE6 以前のシェアについては検討しましたが、非対応でも大きく表示が崩れるわけではないので、思い切ってみました。
教えていただいた、mozilla.org のウェブサイトは elastic ですね。しかし、mozilla.com のサイトは flexible レイアウトで、なぜ違うのか気になりました。

typo のご報告ありがとうございました！修正しました。

飴March 9, 2007 2:24 AM

はじめまして。
自分のとこのサイトをリキッドデザインにしようと思っていてたどり着きました。
いつもOpera(9.02)でブラウジングしているのですが、Operaでブラウザ枠を狭めるとどうも文字まで一緒に小さくなるのですが、widthと連動してfont-sizeまで変化するような仕様にしているのですか？
最大化した時、最大化を外して画面幅いっぱいにした時、さらに小さくした時でだいぶ変わるようです。

tennojiMarch 16, 2007 8:05 AM

はじめまして。
こういう記事を読んでいると、デザインに関する好奇心がむくむく湧いてくるのを感じます。
それから下らない事なのですが、flexibleレイアウトのところで「min(max)-widthがIE7以前では非対応」という旨の文章があります。一方、対応状況でIE7はyesになってます。
IE7以前と言うとIE7自身も含む気がします。どうでしょうか？　ただの書き損じならばすいません。
去年の記事にコメントするのも気が引けましたが、一応……。