フルイドレイアウト

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 63/76。

レスポンシブWebデザインにおいて、フルイドレイアウトは、固定のピクセル値の代わりにフレキシブルグリッドやパーセンテージのような相対単位を使用することで、さまざまな画面サイズに適応します。これにより、レイアウトがあらゆる画面に合わせて拡大または縮小し、すべてのデバイスでスムーズなユーザーエクスペリエンスを保証します。

流動的レイアウト（フルイドレイアウト）の基本原則は以下の通りです：

相対単位: 幅、高さ、マージン、パディングに、固定ピクセル (px) の代わりにパーセンテージ (%)、ビューポート単位 (vw, vh)、または em (em) を使用すること。

フレキシブル・グリッド: CSS GridやFlexboxを使用して、異なる画面サイズに適応できるグリッドベースのレイアウトを作成すること。

Max-width と min-width: 極端な画面サイズで要素が広すぎたり狭すぎたりするのを防ぐために、要素の最大幅と最小幅を設定します。

パーセンテージを使用した基本的なフルイドレイアウト（流動的レイアウト）の例を次に示します。

.container {
    width: 90%; /* コンテナはビューポート幅の90%を占めます */
    max-width: 1200px; /* コンテナは1200pxを超えません */
}
.sidebar {
    width: 30%; /* サイドバーはコンテナ幅の30%を占めます */
    float: left;
}
.main-content {
    width: 70%; /* メインコンテンツエリアはコンテナ幅の70%を占めます */
    float: left;
}

この例では、.container要素は90%の流動的な幅を持っており、これは常にビューポート幅の90%を占めることを意味します。max-widthプロパティは、大きな画面でコンテナが広くなりすぎるのを防ぐために1200pxに設定されています。

.sidebar要素と.main-content要素は、それぞれ30%と70%の可変幅を持ち、コンテナの幅に適応できるようになっています。

チャレンジ

簡単

親要素の <div> と、その中に sidebar および main というクラスを持つ2つの子要素の <div> が含まれるHTMLドキュメントが与えられています。あなたのタスクは、パーセンテージを使用してフルイドレイアウト（可変レイアウト）を作成することです。以下の手順に従ってください。

container クラスを持つ <div> 要素をターゲットにするCSSルールを記述します。width プロパティを 80% に、margin を 0 auto に設定してください。視覚化のために、border を 1px solid black に設定します。
sidebar クラスを持つ <div> 要素をターゲットにするCSSルールを記述します。width プロパティを 25% に設定し、左側にフロート（float: left）させてください。
main クラスを持つ <div> 要素をターゲットにするCSSルールを記述します。width プロパティを 75% に設定し、右側にフロート（float: right）させてください。

チートシート

流動的レイアウト（fluid layout）は、固定のピクセル値の代わりに、パーセンテージのような相対単位やフレキシブルグリッドを使用して、異なる画面サイズに合わせて調整されます。

流動的レイアウトの主な原則：

相対単位：固定ピクセルの代わりに、パーセンテージ（%）、ビューポート単位（vw, vh）、またはem（em）を使用します。
フレキシブルグリッド：適応性のあるレイアウトのためにCSS GridやFlexboxを使用します。
max-widthとmin-width：要素が広すぎたり狭すぎたりするのを防ぐために制限を設定します。

基本的な流動的レイアウトの例：

.container {
    width: 90%; /* ビューポート幅の90%を占めます */
    max-width: 1200px; /* 1200pxを超えません */
}
.sidebar {
    width: 30%; /* コンテナ幅の30% */
    float: left;
}
.main-content {
    width: 70%; /* コンテナ幅の70% */
    float: left;
}

自分で試してみよう

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>