CSSで実現するダイナミックなデザイン: 子要素を左右に配置し、片方の背景をブラウザ全体に拡張する方法

Posted on by

CSSを使って、子要素を左右に並べ、さらに片方だけの背景をブラウザ全体に広げる方法は、ウェブデザインでよく見られる効果です。この方法は、コンテンツとビジュアルのバランスを取りつつ、ページにダイナミックな要素を加えるのに役立ちます。この記事では、その実装方法をステップバイステップで説明します。

基本構成

まず、HTMLとCSSを用いて基本的な構造を作成します。ここでは、左側の子要素にはコンテンツを配置し、右側の子要素を背景としてブラウザ全体に広げる方法に焦点を当てます。

HTML

<div class="container">
  <div class="content">
    <!-- 左側のコンテンツ -->
    コンテンツがここに入ります。
  </div>
  <div class="background">
    <!-- 右側の背景 -->
  </div>
</div>

CSS

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  height: 100vh;
}

.content {
  width: 50%;
  background-color: #f0f0f0; /* 任意の色 */
}

.background {
  width: 50%;
  background-color: #009688; /* 任意の色 */
  background-size: cover;
  background-position: center;
}

このコードは、.container ディビジョンを画面の高さいっぱいに広げ、その中に .content と .background を左右に並べる基本的な構造を作成します。

背景をブラウザいっぱいに広げる

次に、右側の背景だけをブラウザ全体に広げる方法を実装します。
これを実現するには、いくつかのCSSのテクニックを駆使します。

CSSの更新

.background {
  width: 50vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
}

.background クラスに position: fixed; を追加することで、背景を画面に固定し、スクロールしても常に表示されるようにします。また、width を 50vw （ビューポートの幅の50%）に設定し、height を 100vh （ビューポートの高さの100%）にすることで、ブラウザの右半分を覆う背景が作成されます。z-index: -1; は、背景がコンテンツの後ろに表示されるようにします。

応用: メディアクエリを使ったレスポンシブ対応

レスポンシブデザインを考慮して、画面のサイズが小さいデバイスで見た場合に、背景を適切に表示するように調整します。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .content, .background {
    width: 100%;
    position: static;
    z-index: auto;
  }
}

メディアクエリを使って、ビューポートの幅が768px以下の場合には、コンテンツと背景が縦に並ぶように変更します。このとき、.background の position を static に戻し、z-index も自動に設定して、通常の文書流に戻します。

まとめ

この方法を使うことで、CSSだけで子要素を左右に配置し、片方の背景をブラウザ全体に広げるデザインを実現できます。レスポンシブデザインの考慮も忘れずに、様々なデバイスでの表示を最適化してください。この技術を活用して、訪問者にとって魅力的でインパクトのあるウェブサイトを作成しましょう。