2010
03.14

現代風レイアウト。

webism100314.jpgデザインをする上で、Webサイトの大きさ、特に横幅の設定というのは重要な要素の一つです。

初めてサイト制作をする、という受講生の方はむしろ悩みの種のようですね。
よく、「ちょうど良いサイズって…?(>_<;)」というご質問をいただきます。

これまでは、パソコンのモニタのサイズは800×600ピクセル~1024×768ピクセルといった具合に大体足並みをそろえていました。

だからこそ、それにあわせた幅でWebサイトを制作すれば良かったのですが、
最近はワイドな横長モニタのパソコンが増えたり、
逆に800×600ピクセルの小さな「ネットブック」パソコンが流行したりと、
画面サイズのバリエーションが多岐にわたるようになりました。

んー、こまった!

そこで、注目を集めているのが、Webサイトの幅を固定せずに制作する
リキッドレイアウト」というものです。

………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆

リキッドレイアウトというのは、
ブラウザのウィンドウ幅に合わせてレイアウトの最大幅も変わる設定のことです。

違う言い方をすると、ウィンドウ幅にあわせて
リキッド(=液体)のようにレイアウトを自在に変形させることができる、というものなのです。

代表的なリキッドレイアウトのサイトをいくつかご紹介しましょう。

ブラウザのウィンドウサイズを小さくしたり
大きくしたりしながら変化を確認してみてください。

………・・・………・・・………

Amazon

横並びに表示される商品の数が増えたり減ったりします(^^)

PASS THE BATON

トップページはFlashのActionScriptで、
中のページに入ると、JavaScriptでリキッドレイアウトが作られています。
ウィンドウの横幅のサイズによってコンテンツを並び替えられており、
動きがとってもかわいらしいです!

iGoogle

自分でカスタマイズして利用できるGoogle。
選択したコンテンツが液体のように流動します。

………・・・………・・・………

リキッドレイアウトの作り方は、

・CSSでコンテンツの幅を%などの相対的な値で設定する
・JavaScriptで制御する
・FlashのActionScriptで制御する

といった方法があります。

CSSもJavaScriptもHTMLも言語ですし、
それらを正確に記述するだけの知識がなければリキッドレイアウトを実現することはできませんから、
ますます正しいコーディングの知識が制作現場に欠かせなっていっていることを実感します。


ユーザーの環境に合わせてコンテンツを見せることができるという点で
まさに”現代風レイアウト”として注目を浴びているリキッドレイアウト、
書きたい!という方はぜひ当スクールのホームページの授業を受講してくださいね☆

message by INTERNET ACADEMY | 2010年03月14日 19:17
« 前の記事 | メイン | 次の記事 »

コメントを投稿

名前

ブロガーのプロフィール

ささくらはなび
Webデザイン専門スクール講師。気ままにWeb世界を語ります。
twitter_bt_03.jpg

運営カンパニー

Webデザイン・Webデザイナー

ブログ内検索

カテゴリー

最近のエントリー

Boston Lab ブログ

米国のW3C本部で勤務しつつ、インターネット・アカデミーの商品開発をしているインストラクターのブログです。

カレンダー

2010年03月
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

過去の投稿ログ