スプリットスクリーン・レイアウト

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 29/35。

分割スクリーンレイアウトは、ビューポートを2つの異なるセクションに分割し、通常は左右に並べて配置します。このパターンは、コンテンツの比較、2つのテーマの提示、またはナビゲーションとメインコンテンツの分離に効果的です。

まず、HTML構造を作成しましょう：

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

次に、分割画面レイアウトを作成するためのCSSを追加しましょう：

.split-screen {
  display: flex;
  flex-direction: column;
}

/* モバイルでは、セクションは垂直に積み重なります */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* より大きな画面では、横並びに表示されます */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

このレイアウトは、モバイルファーストのアプローチに従い、モバイルデバイス上では垂直方向のスタックとして始まります。画面幅が768px以上に達すると、レイアウトは水平方向の分割に切り替わります。

チャレンジ内容:

製品紹介のためのレスポンシブな分割画面レイアウトを作成してください。左側には製品情報を表示し、右側には製品画像を表示する必要があります。

要件:

分割画面は、モバイル（768px未満）では垂直方向に、それ以上の画面では水平方向にする必要があります
左側はダーク背景（#222）と白のテキストにする必要があります
右側はライト背景（#f5f5f5）にする必要があります
両側に2remのパディングを追加してください
768pxより大きい画面では、左側が幅の40%、右側が60%を占めるようにしてください

チャレンジ

簡単

モバイルファーストでスタイリングされた2つのセクションを持つHTMLページが与えられています。あなたのタスクは、デスクトップでうまく機能するスプリットスクリーンレイアウト（分割画面レイアウト）に変換することです。

大きな画面（min-width: 768px）では、それらを横並びに表示してください。
左側の背景色を rgb(74, 144, 226) に、テキストの色を rgb(255, 255, 255) に設定してください。
右側の背景色を rgb(255, 255, 255) に、テキストの色を rgb(51, 51, 51) に設定してください。

チートシート

スプリットスクリーンレイアウトは、ビューポートを通常は左右に2つのセクションに分割します。これらは、コンテンツを比較したり、ナビゲーションをメインコンテンツから分離したりするのに効果的です。

HTML構造:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

レスポンシブなスプリットスクリーンレイアウトのためのCSS:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* Mobile: sections stack vertically */
/* モバイル：セクションを垂直に積み重ねる */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* Larger screens: display side by side */
/* より大きな画面：左右に並べて表示 */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

このレイアウトは、モバイルファーストのアプローチに従い、モバイルデバイスでは垂直方向のスタックとして始まり、768px以上の画面では水平方向の分割に変化します。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

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

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>