5 つの一般的な CSS レイアウトフレームワークについての深い理解-CSSチュートリアル-php.cn

5 つの一般的な CSS レイアウトフレームワークについての深い理解

WBOY

リリース： 2024-01-16 08:41:06

オリジナル

1003 人が閲覧しました

5 つの一般的な CSS レイアウトフレームワークについての深い理解

CSS レイアウトフレームワークを理解する: 5 つの一般的なレイアウトの分析

Web デザインと開発において、CSS レイアウトは非常に重要な側面です。優れたレイアウトは、Web ページをより美しく、より機能的にすることができます。 CSS レイアウトフレームワークを理解することは、Web ページのレイアウトスキルをより良く習得するのに役立ちます。この記事では、5 つの一般的な CSS レイアウトを紹介し、具体的なコード例を示します。

1. 流体レイアウト (流体配置)

流体レイアウトは、画面サイズに適応したレイアウト方法です。さまざまな画面サイズに合わせて要素の幅または高さを設定するには、主にパーセンテージを使用します。以下は簡単なフローレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
      }
      .left-panel {
        width: 25%;
        background-color: yellow;
        float: left;
      }
      .right-panel {
        width: 75%;
        background-color: lightblue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-panel">
        <p>This is left panel.</p>
      </div>
      <div class="right-panel">
        <p>This is right panel.</p>
      </div>
    </div>
  </body>
</html>

ログイン後にコピー

2. グリッドレイアウト (Grid)

グリッドレイアウトは、複雑なグリッド構造を簡単に作成できる 2 次元のレイアウト方法です。グリッドレイアウトを使用して、コンテナー内に行と列を作成し、指定した場所に要素を配置します。以下は単純なグリッドレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

ログイン後にコピー

3. フレキシブルレイアウト (フレックスボックス)

フレキシブルレイアウトは、コンテナー内の要素のサイズとサイズを自動的に調整できる柔軟なレイアウト方法です。位置。柔軟なレイアウトにより、さまざまなレイアウトニーズを簡単に実現できます。以下は簡単な柔軟なレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

ログイン後にコピー

4. フローティングレイアウト (Float)

フローティングレイアウトは、複数列のレイアウトを実装するために使用されるテクノロジです。要素を指定した位置にフローティングすることにより、複数の列の効果を得ることができます。以下は、単純なフローティングレイアウトの例です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        overflow: hidden;
      }
      .item {
        width: 30%;
        background-color: lightblue;
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

ログイン後にコピー

5. 配置レイアウト (位置)

配置レイアウトは、ドキュメントフロー内での位置を指定して要素を配置する方法です。要素のpositionプロパティを設定することにより、親要素またはドキュメントウィンドウを基準にして要素を配置できます。以下は簡単な位置決めレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        height: 200px;
        background-color: lightblue;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

ログイン後にコピー

概要:

この記事では、5 つの一般的な CSS レイアウトフレームワーク、つまり流体レイアウト、グリッドレイアウト、エラスティックレイアウト、フローティングレイアウトと位置決めレイアウトを紹介します。これらのレイアウトフレームワークを学ぶことで、Web ページレイアウトのスキルをよりよく習得し、実際のニーズに応じて適切なレイアウト方法を選択できるようになります。この記事が皆さんのお役に立てば幸いです!

以上が5 つの一般的な CSS レイアウトフレームワークについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。