takumart.net link

takumart.net - Takuma saitou Art works |  Art Works  |  Photo Works  |  Profile  |  Download  |  Mail  |  Blog  |  Link  |  Sitemap  

2009年6月24日水曜日

「エラスティックレイアウトについて」

固定幅レイアウト最近の主流です。
リキッド・レイアウト本来あるべき姿かな。
Takumaです。
 

【elastic】
1 ゴム(製)の;〈ゴム・ばね・気体などが〉伸縮性[弾力]のある;しなやかな;《理》弾性(体)の
2 融通のきく, 順応性のある;寛容な
3 はずむ;軽快な
4 〈人・性格が〉(失望などから)すぐ立ち直る;屈託のない.
5 《経》(需要と価格間に)弾力性のある.(by Yahoo!辞書)


大きく二つが有名なHTMLの基本的な構築指針。
☆固定幅レイアウト:固定
☆リキッド・レイアウト:可変

様々なユーザー環境に対して、どのような見せ方をしたいか。
掲載する情報のタイプによって中期(場合によっては初期)での用件定義が必要なテーマです。

しかし、第三の刺客がいたりします・・・そやつの名は!!


■エラスティック・レイアウト■■■■■■■■■■■■■■■■■■■■■

「エラスティック(elastic)」の語源からすると、
「ゴム/融通/はずむ/すぐ立ち直る/弾力性/」という意味がある言葉です。
Webデザイン用語では「可変レイアウトの一種」にあたるレイアウト方法だとの事。
(※国内ではあんまり馴染みがないタイプのレイアウト方法だそうです。)

どんな感じかとまとめてみると・・・

☆固定幅レイアウト:横幅を固定にしてレイアウト優先
      ↓
★エラスティック・レイアウト:レイアウトを崩さない可変レイアウト
      ↑
☆リキッド・レイアウト:可変にして、ユーザ環境対応度を優先

という感じでしょうか。


■その実態は!?■■■■■■■■■■■■■■■■■■■■■■■■■■■

それは、em指定に他ならないとの事。
他のレイアウトとの指定の違いを比べてみましょう。

☆固定幅レイアウト:width: 800px;
      ↓
★エラスティック・レイアウト:max-width: 70em;
      ↑
☆リキッド・レイアウト:width: 80%

em(s)は、そもそも1文字分の幅を単位とするサイズの指定方法。
(※親要素が100%[一般的には12pt/16px相当]指定の場合、font-size:120%はfont-size:1.2emという形になります。)

例えば30emとした場合は30文字分の長さ相当の指定という事になります。
これで、横幅を指定する場合。記事本文を表示するボックスを20emに指定すると、20文字分相当の大きさになります。


■どう見え方がちがうの?■■■■■■■■■■■■■■■■■■■■■■■

エラスティック・レイアウトのサイトで、文字サイズを「中」から「最大」にする。
すると、ボックスの幅は文字サイズにあわせて、最大サイズの文字で20文字分の幅にリサイズされます。

という事は、見た目的にはレイアウト全体が文字サイズの変更に伴い拡大するので拡大表示したように見えることになるのです。
(※固定や、リキッドだと文字列の並び文字サイズの変更によってスライド[雪崩みたいの]するので、みずらいという意見もある)

サンプルサイトを見てみましょう。
ちなみにFirefox3等では、ズーム機能が実装されている為、エラスティックの挙動を確認するには解除をお忘れなく。


▼Yahoo!JAPANトップページ▼
http://www.yahoo.co.jp/

CSSは、外部CSSでなく直書きです。
特徴としては、レイアウトブロックの最小サイズはpx指定にしており、その他はem指定にしています。
これにより、文字が小さくなっても過度にページが小さくなるのを防いで、大きくなる際にはエラスティックの効果を活用する、実践的なハイブリットレイアウト指定になっているようです。


■弱点もある■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

一見、いいとこ取りのレイアウト方法に見えますが・・・

「拡大しすぎるとブラウザに収まらなくなる(横スクロールバーがでてくる)
という弱点があります。

どこまでも小さくなるということは、Yahoo!のソースのように最小サイズのCSS指定で歯止めをつければいいですが、この観点からすれば「リキッドレイアウト」が優れているのかもしれません。
いずれにせよ、サイトのタイプや掲載情報の内容によって、なるべき早期に考えるべき課題であることには違いが無いようです。

前に、この点について書いた記事ですが・・・

▼takumart.net「リキッドレイアウトとAjaxの親和:前半」▼
http://www.takumart.net/wordpress/archives/774

▼takumart.net「リキッドレイアウトとAjaxの親和:後半」▼
http://www.takumart.net/wordpress/archives/776

Ajaxの登場で、そもそものレイアウトタイプ。加えてそのあとの拡張的な自由度も多くのパターンがでてきています。
各種レイアウトの特徴と掲載情報のタイプ。加えて開発/運用負荷についても総合的な判断が設計者/ディレクターには、求められそうです。

勉強する課題が日に日に多くなってきている今日この頃です。


■参考リンク集■■■■■■■■■■■■■■■■■■■■■■■■■■■■


▼エラスティックレイアウトって何?:ITpro▼
http://itpro.nikkeibp.co.jp/article/COLUMN/20070514/270876/
⇒定義と概要の解説が充実。

▼ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介▼
http://labs.unoh.net/2007/04/elastic-layout.html
⇒ソースコードと実例の紹介。

▼エラスティックレイアウト|ユージック▼
http://www.u-ziq.com/blog/2007/02/post_5.html
⇒ソースと一緒に横幅指定等の一覧表もあって参考になります。

▼最適なレイアウトとは何か? 固定か、可変か、エラスティック・レイアウトか :: gerenuk.crazyphoto.org▼
http://gerenuk.crazyphoto.org/2009/06/10/600/
⇒概念を図で分かりやすく説明してあって、実例も豊富にのっています。

▼エラスティックレイアウト > ブログ | The Designium - デザイニウム▼
http://www.thedesignium.com/blog/skill/712
⇒豊富な情報量です。別件ですが、このサイトのレイアウト方法も面白い。

▼エラスティックレイアウトのベーシックテンプレート - Webテンプレート - 仮想空間▼
http://www.thedesignium.com/blog/skill/712
⇒なんとテンプレートを配布しているのに加えて、作成の際の注意点も紹介されています。



■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼三菱ジュエリーコレクション:DIAMOND BAR▼
http://www.e-mjc.jp/Public/diamond-bar/

●んで、一言
三菱ジュエリーコレクション:DIAMOND BAR(ダイヤモンドバー)ブランドウェイブサイト。
Flashで作られてます。基本的な日本語の文字組みが美しくモダンシンプルカッコイイです。

各所、影の演出を取り入れて空間演出したり、さりげないながらツメがしっかりされているサイトに思います。
加えて、バック右上に流されている抽象的なサイクルムービーとBGMが幻想的な世界観を広げています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■