Hatena::Groupoval-plan

思考地図:OVALPLAN このページをアンテナに追加 RSSフィード

2006-12-29エラスティックレイアウト

[][] エラスティックレイアウト  エラスティックレイアウト - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  エラスティックレイアウト - 思考地図:OVALPLAN

f:id:OVALPLAN:20061229213255j:image:w120


11月からちょっと勉強していたCSS、自分なりに基礎知識一区切りというところですが、その途中で<TRANS>という素敵なブログを見つけました。真面目で詳細な調べ方やまとめがとても参考になります。


28日のエントリーは「2xupで実装されているエラステックレイアウトを調べてみた」というもの。「エラスティックレイアウト」(Elastic Layout)とは初耳の言葉です。「リキッドレイアウト」の親戚。


実装例として紹介されているのは別の方のブログ<2xup.org>の「一行あたりの文字数を制限するリキッドレイアウト」というエントリー(写真)ですが、ここ、ウインドウの横サイズを変更するとフォントサイズも変わってくれます。しかも、上限・下限を適度に設定してあるので、その加減が心地いい。(ただし、FireFox, Safari, Operaなど、min-width, max-width をサポートしているブラウザだけの対応。IEは7.0以上で対応とのこと。)


1行当たりの文字数、行幅、フォントサイズの関係など、文字組についてもWebに対応した「読みやすさ」を考える時代なんだなぁと、写植時代にエディトリアルデザインを学んだ世代として感慨です。


CSSを使ったデザインをする時には<TRANS>の「印刷用CSSをまとめてみた。」、<2xup.org>の「スタイルシートを書く時のガイドライン」なども大変参考になります。

ゲスト



トラックバック - http://oval-plan.g.hatena.ne.jp/OVALPLAN/20061229