CSS レイアウト - フロート、フレックスボックス、グリッド

レクチャー 5: CSS レイアウト - フロート、フレックスボックス、グリッド

この講義では、CSS でレイアウトを作成するための重要なテクニックについて詳しく説明します。フロート、フレックスボックス、グリッドを使用してコンテンツを構造化する方法を理解すると、応答性が高く、よく整理された Web サイトを構築できるようになります。この講義を終えるまでに、さまざまな画面サイズやデバイスに適応するレイアウトを作成できるようになります。

---

CSS レイアウト手法を理解する

CSS はいくつかのレイアウト手法を提供しており、それぞれに独自の使用例があります。 Float、Flexbox、Grid という 3 つの基本的なメソッドについて説明します。

1.フロート

フロートは当初、画像の周囲にテキストを折り返すために設計されましたが、レイアウトの作成に広く使用されています。これらはほとんどが新しい技術に置き換えられていますが、特定の状況では依然として役に立ちます。

• 例:

  .left {
    float: left;
    width: 50%;
  }

  .right {
    float: right;
    width: 50%;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

• HTML:

  <div class="clearfix">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>
  </div>

この例では、2 つの div が左右にフローティングされ、2 列のレイアウトが作成されます。

2.フレックスボックス

Flexbox は、強力な配置および配布機能を提供する、より最新のレイアウト技術です。柔軟で応答性の高いレイアウトを作成するのに最適です。

• 例:

  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-item {
    flex: 1;
    margin: 10px;
  }

• HTML:

  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>

ここでは、.flex-container は Flexbox を使用して、3 つのアイテムをコンテナ全体に均等に配置し、アイテム間の間隔を等しくしています。

3. CSS グリッド

グリッドは CSS の最も強力なレイアウト システムであり、行と列を正確に制御して複雑な 2 次元レイアウトを作成できます。

• 例:

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
  }

  .grid-item {
    padding: 20px;
    background-color: #ccc;
  }

• HTML:

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

この例では、2 列のグリッド レイアウトを作成します。最初の列はスペースの 1 つの部分を占め、2 番目の列は 2 つの部分を占め、項目間のギャップは 10 ピクセルです。

実践例:

Flexbox を使用して、ヘッダー、メイン コンテンツ、フッターを配置する簡単な Web ページ レイアウトを作成してみましょう。

HTML:

<div class="flex-container">
  <header class="flex-item header">Header</header>
  <main class="flex-item main">Main Content</main>
  <footer class="flex-item footer">Footer</footer>
</div>

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

この例では:

• ヘッダーとフッターには固定の高さと背景色が与えられますが、メインコンテンツは残りのスペースを埋めるように展開されます。
• Flexbox は、コンテンツを垂直に配置して分散するために使用されます。

練習演習

1. フロートを使用して 2 列のレイアウトを作成する単純な Web ページを作成します。
2. Flexbox を使用して、応答性の高いナビゲーション バーをデザインします。
3. CSS グリッドを試して、行と列のサイズが異なる複数列のレイアウトを作成します。

---

次のステップ: 次の講義では、メディア クエリを使用したレスポンシブ Web デザイン について説明します。そこでは、レイアウトをさまざまな画面サイズに適応させ、デバイス。乞うご期待!

---

Linkedin でフォローしてください

リドイ・ハサン

以上がCSS レイアウト - フロート、フレックスボックス、グリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。