Layoutを実装する前に、いくつかの基本的なことをクリアする必要があります。まず、Layoutの種類を決定する必要があります。基本的に、3つのオプションがあります。
• 固定
• フレキシブル
• 弾性
CSSを使用すれば、固定またはフレキシブルな寸法でLayoutを作成できます。固定Layoutでは通常、ピクセル単位で寸法が指定されます。一方、フレキシブルなLayoutはパーセンテージ値に基づいています。両方のLayoutのバリアントには、それぞれに利点と欠点があります。
固定Layoutは、通常、レイアウトに画像が使用される場合に使用されます。（ただし、CSS背景画像を使用して例外がある）。レイアウトの要素をピクセル単位で正確に配置する必要がある場合は、通常、固定配置を選択します。このLayout形式では、通常、レイアウトの幅が固定のピクセル数に設定されます。この幅は通常特定の画面解像度をターゲットにしています。
フレキシブルレイアウトの場合、固定の幅は指定されません。タブの幅に従うことになります。
このようなレイアウトでは、たとえば、幅をパーセントで指定します。ユーザーがブラウザウィンドウのサイズを変更すると、レイアウトのサイズも変更されます。
現代のCSSプロパティにより、別のLayoutバリアントであるレスポンシブLayoutがあります。例えば、スマートフォンとデスクトップコンピューターで完全に異なる見た目に変化するようにLayoutが変更されます。ここPSD-Tutorials.deでは、このようなLayoutが使用されています。デスクトップで通常のブラウザウィンドウサイズでページを開くと、次のようになります。
しかし、ウィンドウを一緒に動かすと、ページ内の要素の配置が実際に変わります。
レスポンシブLayoutの作成にはかなりの手間がかかります。それは、訪問者の画面サイズを特定して、それに適したレイアウトを表示する必要があるからです。そして、この適切なレイアウトを、実際にさまざまな画面サイズごとに開発する必要があります。たとえば、大きなモニターでサイトを表示する訪問者は、3列のレイアウトを表示されます。したがって、スマートフォンでサイトを表示する他の訪問者は、1列のレイアウトが表示されます。
各バリアントのメリットとデメリット
Layoutを実装する前に、使用するLayoutの種類を決定する必要があります。固定Layoutの利点と欠点を簡単に示します。
• デザインテンプレートはここで最も簡単に実装できます。
• 標準解像度に従うと、Webサイトの表示に問題がほとんどありません。
• レイアウトを理解することは簡単です。 （ウェブ開発者としてクライアントにレイアウトを説明する場合には、この利点が役立ちます）。
一方、固定レイアウトにはデメリットがあります。
• 固定寸法のため、特に小さな画面や大画面に対応せず、柔軟性がありません。多くのスペースが無駄になることがよくあります。
• アクセシビリティに関して、制限があります。
フレキシブルレイアウトもメリットとデメリットがあります。まず、メリットについて説明します。
• レイアウトはブラウザウィンドウのサイズに自動的に適応します。
• 訪問者はウェブサイトの表示に大きな影響を与えることができます。
デメリットもあります。
• 開発者として、結果を制御するのは難しいです。レイアウトガイドラインは限られた範囲でしか実現できません。
• コンテンツを適切に調整するのに手間がかかります。
• 大きな画面では、短いテキストの表示が「きれいではなく」なる場合があります。その場合、テキストは通常1行で表示されます。（CSSには、これに対応するmin-widthなどの適切なプロパティがあります）。
固定レイアウトとフレキシブルレイアウトの中間のLayout形式もあります。それは、弾性レイアウトと呼ばれます。その主な特徴は、em単位であることです。（最近は、emに代わる単位としてremが増えています。emが上位要素に依存しているのとは異なり、remはルート要素に依存しています）。
これらのレイアウトでは、幅と高さがフレキシブルです。ページのデザインはブラウザウィンドウのサイズに比例してスケーリングされます。このデザイン形式は、実装の観点から非常に複雑な面があります。なぜなら、要素がブラウザウィンドウのサイズ変化に対応する方法を非常に正確に知っておかなければならないからです。弾性レイアウトは、多くの写真やビデオが提供されるWebサイトで主に使用されます。
弾性レイアウトの利点：
• 利用可能なスペースを最大限に活用できます。
• コンテンツは常に可能な限り大きく表示されます。
もちろん、弾性レイアウトには欠点もあります。
• このLayoutのデザインは非常に複雑です。
• 実装も非常に簡単ではありません。
適切な選択
したがって、使用するVariantを選択する必要があります。HTML/CSS開発の最初に立っている場合は、最初に固定レイアウトをお勧めします。一方、ウェブ開発の分野で高度な知識を持っている場合は、直ちにレスポンシブレイアウトを使用してください。最終的にWebサイトがどのデバイスからアクセスされても適切な表示となります。
