ウェブデザインにおいて、背景の見せ方はサイトの印象を大きく左右します。特に背景を半分だけ表示するテクニックは、視覚的にユニークな効果を生み出すために有効です。この記事では、背景色をCSSで半分だけ表示する方法について詳しく解説します。
水平方向に背景色を半分表示
背景色を左右に半分表示するには、CSSのグラデーションを使用します。以下のコードスニペットを使えば、簡単に実現できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色の半分表示（水平）</title>
<style>
.half-background-horizontal {
width: 100%;
height: 300px;
background: linear-gradient(to right, blue 50%, white 50%);
}
</style>
</head>
<body>
<div class="half-background-horizontal"></div>
</body>
</html>
このコードでは、青色と白色の背景色が左右に半分ずつ表示されます。
垂直方向に背景色を半分表示
背景色を上下に半分表示する場合も、同じくCSSのグラデーションを使います。次の例をご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色の半分表示（垂直）</title>
<style>
.half-background-vertical {
width: 100%;
height: 300px;
background: linear-gradient(to bottom, blue 50%, white 50%);
}
</style>
</head>
<body>
<div class="half-background-vertical"></div>
</body>
</html>
この例では、背景色が上下に半分ずつ表示され、視覚的に独特な効果を生み出します。
よくある質問（FAQ）
Q. CSSで背景を左右半分ずつ2色に分割するには？
A. linear-gradient(to right, #f00 50%, #00f 50%)で左半分を赤、右半分を青にできます。グラデーションはbackground-imageとして機能します。before/afterの疑似要素で別々のセクションを作る方法もあります。
Q. 上下半分で背景色を変えるには？
A. linear-gradient(to bottom, #f00 50%, #00f 50%)で上半分を赤、下半分を青にできます。bodyにheight: 100%を設定することで画面全体に適用できます。
Q. 背景の分割位置を画面幅に応じて動的に変えるには？
A. CSS変数を使ってJavaScriptで分割位置を設定します。例：document.body.style.setProperty(“–split-point”, “60%”)。またはViewport単位を使って計算した値をbackgroundに指定します。
まとめ
背景を半分だけ表示する方法は、シンプルながらもインパクトのあるデザインを作り出すのに非常に有効です。CSSのグラデーションを使いこなして、あなたのウェブサイトをさらに魅力的にしましょう。ぜひ、今回紹介したテクニックを実際のプロジェクトに取り入れてみてください。
