【保存版】CSSでウィンドウ幅50%の背景色を設定する方法: 豊富なサンプルコード付き

2024-06-18

CSSでウィンドウ幅の50%の背景色を設定する方法

方法1：擬似要素を使う

この方法は、擬似要素 :before または :after を使って、要素の後ろに幅50%の背景色付きの疑似要素を作成します。

要素 {
  position: relative; /* 擬似要素を相対位置に配置 */
}

要素::before {
  content: ''; /* 擬似要素にコンテンツを設定しない */
  position: absolute; /* 擬似要素を絶対配置 */
  top: 0;
  left: 0;
  width: 50%; /* 幅をウィンドウ幅の50%に設定 */
  height: 100%; /* 高さを要素の高さに設定 */
  background-color: #F00; /* 背景色を赤 (#F00) に設定 */
}

このコードは、要素に赤い背景色の帯を左側に配置します。帯の幅はウィンドウ幅の50%で、要素の高さと同じ高さになります。

方法2：calc()関数を使う

この方法は、calc() 関数を使って、要素の幅をウィンドウ幅の50%に設定し、背景色を追加します。

要素 {
  width: calc(50% - 1px); /* 幅をウィンドウ幅の50% - 1px に設定 */
  background-color: #F00; /* 背景色を赤 (#F00) に設定 */
}

このコードは、要素の幅をウィンドウ幅の50% - 1px に設定し、背景色を赤に設定します。 -1px を追加することで、ブラウザによっては発生する可能性のあるスクロールバーの隙間を埋めることができます。

注意点

上記のコードは、要素がブロックレベル要素であることを前提としています。インライン要素の場合は、display: block; を使ってブロックレベル要素にする必要があります。
方法1の場合、擬似要素が要素コンテンツと重なる可能性があることに注意してください。必要に応じて、z-index プロパティを使って擬似要素のインデックスを調整してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSサンプル</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

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

    .front {
      background-color: #00F; /* 青色 */
      width: 50%;
    }

    .back {
      background-color: #F00; /* 赤色 */
      width: 50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</body>
</html>

このコードでは、HTMLで div 要素を2つ作成し、それぞれに front と back というクラスを割り当てています。CSSでは、.container クラスに display: flex; を設定して要素を横並びに配置し、.front と .back クラスにそれぞれ幅50%と背景色を設定しています。

この結果、前面は青色、背面は赤色の背景が表示され、それぞれウィンドウ幅の50%を占めます。

上記以外にも、CSSでウィンドウ幅の50%の背景色を設定するには様々な方法があります。以下に、いくつか例を挙げます。

どの方法が最適かは、状況によって異なります。ご自身のニーズに合った方法を選択してください。

CSSでウィンドウ幅の50%の背景色を設定するその他の方法

この方法は、ベンディングモードを使用して、要素の背景をウィンドウ幅の50%まで拡張します。

要素 {
  background-color: #F00; /* 背景色を赤 (#F00) に設定 */
  background-clip: border-box; /* 背景クリップをボーダーボックスに設定 */
  background-image: linear-gradient(to right, #F00 50%, transparent 50%); /* 背景グラデーションを設定 */
}

このコードは、要素の背景色を赤に設定し、背景クリップをボーダーボックスに設定します。さらに、背景グラデーションを設定し、右側から50%の地点で透明になります。この効果により、要素の背景がウィンドウ幅の50%まで拡張されます。

この方法は、CSSカスタムプロパティを使用して、ウィンドウ幅の50%の値を定義し、それを背景色の幅に設定します。

:root {
  --half-viewport-width: calc(50vw - 1px); /* ウィンドウ幅の50% - 1px を変数に設定 */
}

要素 {
  background-color: #F00; /* 背景色を赤 (#F00) に設定 */
  width: var(--half-viewport-width); /* 背景色の幅を変数に設定 */
}

このコードは、--half-viewport-width というCSSカスタムプロパティを作成し、その値をウィンドウ幅の50% - 1px に設定します。次に、要素の width プロパティにこの変数を設定することで、要素の幅がウィンドウ幅の50%になります。

方法 5：マスキングを使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSサンプル</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      position: relative; /* 要素を相対位置に配置 */
      height: 100vh;
    }

    .mask {
      position: absolute; /* マスクを絶対配置 */
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: #000; /* マスクの色を黒 (#000) に設定 */
      mask-clip: url(#mask-svg); /* マスク SVG を参照 */
    }

    .back {
      background-color: #F00; /* 背景色を赤 (#F00) に設定 */
      width: 100%; /* 要素を100%の幅に設定 */
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <svg id="mask-svg" width="100" height="100" viewBox="0 0 100 100">
      <path d="M 0 0 L 50 0 L 50 100 L 0 100 Z" fill="#fff"/>
    </svg>
    <div class="mask"></div>
    <div class="back"></div>
  </div>
</body>
</html>

このコードは、HTMLでSVGマスクを作成し、#mask-svg というIDを割り当てています。CSSでは、.container クラスに position: relative; を設定して要素を相対位置に配置し、.mask クラスに position: absolute; を設定してマスクを絶対配置します。さらに、mask-clip プロパティを使用して、マスク SVG を参照するように設定します。

この結果、前面に黒いマスクが表示され、背面に赤い背景が表示され、赤い背景はマスクによってウィンドウ幅の50%に切り抜かれます。

css background-color