デザインをする上で、Webサイトの大きさ、特に横幅の設定というのは重要な要素の一つです。
初めてサイト制作をする、という受講生の方はむしろ悩みの種のようですね。
よく、「ちょうど良いサイズって…?(>_<;)」というご質問をいただきます。
これまでは、パソコンのモニタのサイズは800×600ピクセル~1024×768ピクセルといった具合に大体足並みをそろえていました。
だからこそ、それにあわせた幅でWebサイトを制作すれば良かったのですが、
最近はワイドな横長モニタのパソコンが増えたり、
逆に800×600ピクセルの小さな「ネットブック」パソコンが流行したりと、
画面サイズのバリエーションが多岐にわたるようになりました。
んー、こまった!
そこで、注目を集めているのが、Webサイトの幅を固定せずに制作する
「リキッドレイアウト」というものです。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
リキッドレイアウトというのは、
ブラウザのウィンドウ幅に合わせてレイアウトの最大幅も変わる設定のことです。
違う言い方をすると、ウィンドウ幅にあわせて
リキッド(=液体)のようにレイアウトを自在に変形させることができる、というものなのです。
代表的なリキッドレイアウトのサイトをいくつかご紹介しましょう。
ブラウザのウィンドウサイズを小さくしたり
大きくしたりしながら変化を確認してみてください。
………・・・………・・・………
横並びに表示される商品の数が増えたり減ったりします(^^)
トップページはFlashのActionScriptで、
中のページに入ると、JavaScriptでリキッドレイアウトが作られています。
ウィンドウの横幅のサイズによってコンテンツを並び替えられており、
動きがとってもかわいらしいです!
自分でカスタマイズして利用できるGoogle。
選択したコンテンツが液体のように流動します。
………・・・………・・・………
リキッドレイアウトの作り方は、
・CSSでコンテンツの幅を%などの相対的な値で設定する
・JavaScriptで制御する
・FlashのActionScriptで制御する
といった方法があります。
CSSもJavaScriptもHTMLも言語ですし、
それらを正確に記述するだけの知識がなければリキッドレイアウトを実現することはできませんから、
ますます正しいコーディングの知識が制作現場に欠かせなっていっていることを実感します。
ユーザーの環境に合わせてコンテンツを見せることができるという点で
まさに”現代風レイアウト”として注目を浴びているリキッドレイアウト、
書きたい!という方はぜひ当スクールのホームページの授業を受講してくださいね☆
