CSS 複数 3 列適応レイアウト実装の詳細な説明

序文

従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれています。

1つ目: float実装に基づく

実装のアイデア

従来の考え方では、左と右の Aside をそれぞれ左側と右側に浮かせることになります。

コードの実装

<!-- HTML セクション -->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <header>ここにヘッダーがあります</header>
  <!-- 脇に置き、中央にコンテンツを配置 -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- 中央のコンテンツは、右側が圧迫されるのを防ぐために右の列の下に配置されます。 -->
    <div class="content">ここにコンテンツがあります</div>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  .clearfix {
    ズーム: 1;
    ＆：：後 {
      表示: ブロック;
      コンテンツ： ' ';
      クリア:両方
    }
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%
    }
    。容器 {
      幅: 100%
      高さ: 100%
      ヘッダー {
        高さ: 80px;
        背景: rgba(0, 0, 0, 0.5)
      }
      フッター {
        高さ: 80px;
        背景: rgba(0, 0, 0, 0.5)
      }
      。真ん中 {
        高さ: calc(100% - 80px - 80px)
        脇に
          高さ: 100%;
          幅: 300ピクセル;
          背景: rgba(156, 154, 249, 1)
        }
        。左 {
          フロート: 左
        }
        。右： {
          フロート: 右
        }
      }
    }
  }
</スタイル>

成果を達成する

2番目の方法：位置に基づく：絶対実装

実装のアイデア

中央の 3 つの列の親に対して position: relative を割り当て、左と右の Aside 列に position: absolute を割り当て、それぞれ left: 0 と right: 0 width: custom 値を割り当てます。中央のコンテンツの左と右に、それぞれ左と右の幅と同じ幅を割り当てます。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS 関連コード -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%
  }
  
  。容器 {
    幅: 100%;
    高さ: 100%;
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      高さ: calc(100% - 80px - 80px);
      位置: 相対的;
      さて、
      。コンテンツ {
        位置: 絶対;
      }
      。左 {
        幅: 300ピクセル;
        背景: rgba(156, 154, 249, 1);
        左: 0;
        高さ: 100%;
      }
      。右 {
        幅: 300ピクセル;
        背景: rgba(156, 154, 249, 1);
        右: 0;
        高さ: 100%;
      }
      。コンテンツ {
        左: 300ピクセル;
        右: 300px;
      }
    }
  }
</スタイル>

成果を達成する

3番目の方法：ディスプレイに基づく：フレックス

実装のアイデア

左、中央、右の列の親にdisplay: flexを指定し、左と右のAside幅にカスタム値を指定し、中央のコンテンツにflex:1を指定します。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%;
  }
  
  。容器 {
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      ディスプレイ: フレックス;
      高さ: calc(100% - 80px - 80px);
      脇に
        幅: 300ピクセル;
        背景: rgba(156, 154, 249, 1);
      }
      。コンテンツ： {
        フレックス: 1;
      }
    }
  }
</スタイル>

成果を達成する

4番目の方法：表示に基づく：テーブルの実装

実装のアイデア

左、中央、右の列の親に display: table、width: 100% を指定し、左、中央、右の列にそれぞれ display: table-cell を指定し、左と右の Aside 幅をそれぞれ指定します。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%;
  }
  
  。容器 {
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      表示: テーブル;
      幅: 100%
      高さ: calc(100% - 80px - 80px);
      脇に
        幅: 300ピクセル;
        表示: テーブルセル;
        背景: rgba(156, 154, 249, 1);
      }
      。コンテンツ： {
        表示: テーブルセル;
      }
    }
  }
</スタイル>

成果を達成する

5番目: ディスプレイに基づく: グリッド実装

実装のアイデア

左、中央、右の列の親に display: grid を指定し、grid-template-columns: 300px auto 300px を使用して、幅が 300px、auto、300px の 3 つの列に分割します。

コードの実装

<!-- HTML 関連コード-->
<div class="コンテナ">
  <!-- トップヘッダー -->
  <ヘッダー></ヘッダー>
  <div class="middle">
    <!-- 脇に置いて -->
    <aside class="left"></aside>
    <!-- 中間コンテンツ -->
    <div class="content">ここにコンテンツがあります</div>
    <!-- 右側 -->
    <aside class="right"></aside>
  </div>
  <!-- フッター -->
  <フッター></フッター>
</div>
<!-- CSS セクション -->
<スタイル lang="scss">
  * {
    マージン: 0;
    パディング: 0;
  }
  
  html、本文{
    幅: 100%;
    高さ: 100%;
  }
  
  。容器 {
    ヘッダー {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    フッター {
      高さ: 80px;
      背景: rgba(0, 0, 0, 0.5);
    }
    。真ん中 {
      表示: グリッド;
      グリッドテンプレート列: 300px 自動 300px;
      高さ: calc(100% - 80px - 80px);
      脇に
        背景: rgba(156, 154, 249, 1);
      }
    }
  }
</スタイル>

成果を達成する

以上で、CSS での各種 3 列アダプティブレイアウトの実装について詳細に解説した記事は終了です。CSS 3 列アダプティブレイアウトに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL での select、distinct、limit の使用

>>: HTML でさまざまなスペースの特徴と表現を探る (推奨)