エラスティックレイアウトは採用しない方がいいのでは
- 2008年02月25日
- category:Design
- Comment(6)
- Trackback(0)
エラスティックレイアウトとは
エラスティックレイアウトとはコンテンツの幅をemで指定することで、文字の拡大、縮小に合わせてコンテンツの幅も変化するレイアウトのことです。例えばこのブログも現在のデザインはエラスティックレイアウトになってますし、Yahoo!も先日のリニューアルでエラスティックレイアウトになってますね。（2008/5/19追記：現在このブログはエラスティックレイアウトではありません。）
試しに、このブログやYahoo!で文字サイズを変更すると、コンテンツの幅が変わるのがわかると思います。（Yahoo!は拡大では幅が変わるけど、縮小では変わらないみたいです）
結局ズーム機能と同じだよね
要するにエラスティックレイアウトとは、IE7で実装されているページズーム機能のようなものです。つまり、ページズーム機能があるブラウザには必要のない機能だと思うわけです。
IE7、Operaはすでにズーム機能をサポートしていますし、Firefox3でもズーム機能の実装が決まっているようです。Safariの実装はまだのようですが、いずれ実装されるのではないかと思います。（これは僕の勝手な予想です）
結論
つまり、「文字の拡大」と「ページズーム」という二つの選択肢があるのに、文字の拡大という機能をわざわざズーム機能と同じような動作にする必要性がないのではないかという考えです。
そんな感じでエラスティックレイアウトは採用しない方がいいのでは？という結論に達しました。現状ではまだまだズーム機能を実装していないブラウザ（Firefox2、IE6など）が多くのシェアを占めていますが、今後ズーム機能を実装したブラウザが増えてくるとエラスティックレイアウトはなくなっていくのかなと思ってます。
- Prev Entry
- Dreamweaver CS3 10周年記念イベントレポート
- Next Entry
- IE8 Beta1を早速使ってみた
コメント一覧
なかにしゆうすけ 2008年2月26日 14時16分
なるほどー。「Firefox3でもズーム機能の実装が決まっている」のは初めて知りました。確かにそうなるとエラスティックレイアウトが無くなる方向で考えられますね。
マークアップエンジニアとしてはありがたいですね。
ただズームした時の画像がいただけない。
何とかならないかなぁ。
hoka（管理人） 2008年2月26日 18時32分
＞なかにしゆうすけさん
初めまして。コメントありがとうございます。
実は僕もFirefox3がズーム昨日を実装するという記事を見てからエラスティックレイアウトが必要ないのではという考えが出てきたんですよ。
ズームしたときの画像に関しては今のところどうしようもないでしょうねぇ・・・
デッドリー 2008年2月27日 20時07分
ソースが無くて申し訳ないですが、俺の中では「文字の大きさはem、その他の大きさの指定はpx」と成っています。
幅をemで指定するのは初めて聞いた気が・・・ｗ。
hoka（管理人） 2008年2月29日 17時06分
＞デッドリーさん
エラスティックレイアウトについては下記などが参考になりますよ！
http://labs.unoh.net/2007/04/elastic-layout.html
TRANS 2008年3月2日 14時09分
こんにちは。
仰ること、よく分かる気がします。CSSでどこまでUAができる機能を補完するべきなのか、という議論だと思うのです。フォントサイズを拡大するようなJSベースのガジェットのように。
個人的には最近はいらないと思っています。ユーザがサイトによってできる機能、特にサイトの閲覧をより便利にするような機能がAというサイトではあって、Bというサイトではないのでは、あまりよろしくないのかなーと。
hoka（管理人） 2008年3月2日 23時56分
＞TRANSさん
なるほど、大変参考になります。文字拡大みたいなUIはあってもいいかなぁと思っていたのですが、確かにUAで実装されてる機能なので（IEは微妙にアレですけど）なくてもいいかもしれないですね。
むしろ、「文字を拡大するには」というヘルプ的なページを作っておいて、そこにUAごとの文字の拡大方法を書いておく、とかの方法も考えられますよね。