blog home
- エントリーの表示を切り替える
- センサー講座 Lec.003 PhidgetsインストールLink
- Jakob Nielsen博士Link
- エントリーメニュー
- この記事のコメント一覧へScroll
エラスティックレイアウト
2009.02.06 - スキル
前回の記事では、ウェブサイトのレイアウト方法には固定幅レイアウトとリキッドレイアウトというものがある、という事を説明しましたが、今回はそれに続くもう一つのレイアウト法をご紹介したいと思います。
それは「エラスティックレイアウト」という手法です。
「エラスティック（elastic）」というのは「伸縮する」という意味の英単語ですが、このレイアウト法で作られたサイトは、ブラウザで指定された文字サイズを元にサイトのサイズを変更させます。実際に事例を見てもらった方が早いので、エラスティックレイアウトを採用している有名なサイトを2つ後紹介します。
以上のいずれかのサイトを開いて、ブラウザの文字のサイズを変更してみてください。IEなら「表示」→「文字のサイズ」、FirefoxならCtrl+「+」、Ctrl+「-」で文字サイズを変更できます。
これらのサイトは基本固定幅のレイアウトですが、文字のサイズを大きくすることでサイト全体の幅が広く、小さくすることで狭くなるようになっています。これがエラスティックレイアウトの特徴です。
固定幅やリキッドレイアウトのサイトでは、文字サイズをデフォルトのサイズから変更させてしまうと、非常に読みづらくなってしまったり、酷い時にはデザインが崩れてしまったりするものもありますが、エラスティックレイアウトではデザインの印象を変えないままで文字サイズの変更が可能です。遠視、老眼の方など文字のサイズを大きくして読まれている方も居ますので、そのような方へのユーザビリティを考慮するなら大変有用な手法です。
技術的なことを言うと、普段HTMLやCSS使用している長さの単位は「px」ですが、これを全て「em」という単位に変換する、という事をしています。CSSの中で「px」で指定されているブロックや余白、文字のサイズなどを全て「em」指定に直してやることでエラスティックレイアウトのサイトが作れます。
「em」は文字のサイズを基準に定められる数値で、そのサイトの基準文字サイズが12pxならば1em=12px、16pxならば1em=16pxとなります。ブラウザの方で文字サイズが変更されると、サイトの基準文字サイズが大きく（小さく）なるので、それに合わせて1emの数値も大きく（小さく）なります。
例えばサイトの横幅が760pxで基準文字サイズが12pxの場合、em換算に直すと760÷12＝60なので、横幅は60emです。なので「760px」となっている箇所を「60em」と置き換えます。この作業を全てのプロパティに対して行なえば、エラスティックレイアウトの完成です（本当はいろいろ細かいことがあるのですが・・・）。
ただし、画像やFlashなどは文字サイズの変更についてきてくれないので、そのあたりはレイアウトを崩さないための考慮が必要になります。
この手法は最近（昨年あたりから）になって知られるようになった新しい技術なのですが、まだまだ馴染みがないため、特に日本ではこの手法を採っているサイトは少ないようです。
しかし、それもさもありなんというか、エラスティックレイアウトのサイトを構築する際には、デザインをかなりシンプルなものにしておかないと、文字サイズの変更時のデザインの整合性を保つのは難いです。特に背景に画像を貼っている場合などは、伸縮される場合のことを考慮しなければならないので、デザインの制約はかなり大きいです。正直商業レベルのサイトでこの方法を採用したサイトを作れるデザイナーは、日本国内で見てもかなり少ないのではないかと思います。3桁居ないかも知れません。
バリバリにデザインされたサイトをエラスティックレイアウトで作るのはかなり無理があるのですが、逆に言うと、ブログサイトなどのシンプルで、かつ文字情報の多いサイトで使うのは適切でしょう。個人でサイトを作るのを趣味とされている方は試してみてはいかがでしょうか。
・・・ただ、最近のブラウザ（IE7やFirefox、Opera）は、もう基本機能としてズーム機能が付いているので、拡大縮小したいならそちらを使えばいいんじゃない？という事情もあったりしますが・・・
デザイニウムの仕事では、日本料理技術専門学校のサイトで一部エラスティックレイアウトを取り入れています。ただ、完全にエラスティックではないので、やっぱり一部表示がおかしくなったりします。試す際はお手柔らかにお願いします・・・
link: http://www.thedesignium.com/blog/skill/712
TrackBack: http://www.thedesignium.com/blog/skill/712/trackback
autor: sakuma comment: 0件
tags: Webデザイン, レイアウト
この記事へのコメント一覧
コメントはありませんRSS
-
01:
-
02:
-
03:
-
04:
-
05:
-
06:
-
07:
-
08:
-
09:
-
tg:wevy(38) wevyムービー(22) イベント(20) 待ち受けFlash(16) Flash(15) Tips(11) 地域(11) ミズタニキリンのクレイジーセンサー(7) SNS(6) 会津大学(5) javascript(5) mixiアプリ(5) WordPress(5) wevy待ち受け特集(5) Webデザイン(5) wevy週間ランキング(5) アート(4) 社内教育(4) phidgets(4) 会津しこん(4) センサー講座(4) HTML/CSS(3) actionscript(3) WEBユーザビリティ(3) webアプリ(3) レイアウト(3) 地域、会津(3) GAINER(2) CSR(2) wiimote(2) Wii(2) DSN(F)シリーズ(2) mootools(2) 会津漆器(2) マルチタッチディスプレイ(2) 取材(2) ハッカソン(1) Google App Engine(1) OpenSocial(1) 福島県(1) Joomla(1) 音楽(1) AR(1) Processing(1) 会津若松(1) Movable Type(1) GAE(1) AIR(1) concept(1) 会津 データ(1) DROP BURGER(1) 地域性(1) ワークライフバランス(1) 夢(1) API(1) ドット絵(1) 映画(1) DSN Player(1) 新人研修(1)
- 2010.1.20:
- 2009.11.26:mixiアプリモバイル作成前に見ておくべき10のまとめLink
ミズタニキリン：
下記(A)、(B)より80～90%の機種はFlash lite 2.0に対応しているという結果になり「mixiのユーザー層にFlash lite... - 2009.11.24:
- 2009.10.10:
- 2009.10.6:
- 2009.12.10:センサー講座 Spe.001 Wiimote WhiteboardLink
お金と知識のない学生が努力と根性で作ったもの
from アナリハ
この前の１０月・１１月に定期的にプレゼンをする事になった。... - 2009.10.27:
- 2009.9.4:越後妻有アートトリエンナーレ 大地の芸術祭2009（前編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ 大地の芸術祭2009（後編）
越後妻有アートトリエンナーレ... - 2009.9.4:越後妻有アートトリエンナーレ 大地の芸術祭2009（後編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ 大地の芸術祭2009（前編）
越後妻有アートトリエンナーレ... - 2009.6.25:若手向けの勉強会企画してみました。Link
[勉強会]みちのくIT会議ってのが福島であったようだ。
from 笑う角でずっこける。
まぁ、タイトルでまとまってしまったけど…。 初めて聞く名前だったので情報を集めてみた。...