固定幅のレイアウトと液体のレイアウト

Webページのレイアウトは、2つの異なる方法で行うことができます。

両方のレイアウト方法を使用するのには良い理由がありますが、各方法の相対的な利点と欠点の両方を理解していないと、Webページに使用する方法を決めることができません。

固定幅のレイアウト

固定レイアウトは、 Webデザイナーが決定した特定のサイズで始まるレイアウトです。 ページを表示するブラウザウィンドウのサイズに関係なく、その幅は変わりません。 固定幅のレイアウトにより、デザイナーはほとんどの状況でページがどのように見えるかをより直接的に制御できます。 デザイナーはレイアウトを細かく調整し、ブラウザやコンピュータ間で一貫性を保つことができるため、印刷された背景を持つデザイナーに好まれることがよくあります。

液体レイアウト

液体レイアウトは、現在のブラウザウィンドウのサイズのパーセンテージに基づいたレイアウトです。 現在の視聴者がサイトを見ているときにブラウザのサイズを変更しても、ウィンドウのサイズに合わせて柔軟になります。 液体幅のレイアウトにより、任意のWebブラウザウィンドウまたは画面解像度によって提供されるスペースを非常に効率的に使用できます。 彼らは、ページを見ている人に関係なく、サイズと相対的なページの重みが一定しているので、できるだけスペースを少なくするために多くの情報を持っているデザイナーに好まれることがよくあります。

ステークには何がありますか?

あなたのウェブサイトデザインのために選ばれた方法は、あなたのデザイン以上のものに影響を与えます。 あなたが選択した内容に応じて、あなたのテキストをスキャンしたり、探しているものを見つけたり、時にはサイトを使うことさえできる、読者の能力に影響を与えます。 また、レイアウトスタイルは、ブランディング、不動産の可用性、サイトの美しさを通じたWebサイトのマーケティング活動にも影響します。

固定幅レイアウトの利点

液体レイアウトのメリット

固定幅レイアウトの欠点

液体レイアウトの欠点

結論

可能な限り少ないスペースで情報を伝える必要のある多くのサイトでは、液体レイアウトでうまくいくでしょう。 これにより、大型モニタが提供するすべての不動産を活用しながら、より小さなディスプレイを短絡させることなく利用することができます。

すべての状況でページがどのように見えるかを正確に制御する必要のあるサイトでは、固定幅のレイアウトを使用すると効果的です。 これにより、閲覧しているサイズのモニターに関係なく、Webサイトのブランディングが一貫して明確になります。

レイアウト設定

多くの人が混在したアプローチを好みます。 彼らはテキストの大規模なブロックに液体レイアウトを使用するのが好きではありません。そうすれば、小さなモニタではテキストを読むことができないし、大きなものではテキストを読み取れなくなる可能性があります。 したがって、ページのメイン列を固定幅にする傾向がありますが、ヘッダー、フッター、およびサイド列を柔軟にして、残りの不動産を占有し、大規模なブラウザーの容量を失うことはありません。

一部のサイトではスクリプトを使用してブラウザウィンドウのサイズを決定し、それに応じて表示要素を変更します。 たとえば、非常に広いウィンドウでそのようなサイトを開くと、左側にリンクの列が追加され、小さなモニターの顧客には表示されないことがあります。 また、広告を囲むテキストの折り返しは、ブラウザウィンドウの幅にも依存します。 十分な幅がある場合、サイトはテキストを囲みます。そうでない場合、広告の下に記事のテキストが表示されます。 ほとんどのサイトではこのレベルの複雑さは必要ありませんが、小さな画面での表示に影響を与えることなく、大きな画面を活用する方法を示しています。