ウェブデザインにおいて、背景の見せ方はサイトの印象を大きく左右します。特に背景を半分だけ表示するテクニックは、視覚的にユニークな効果を生み出すために有効です。この記事では、背景色を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>この例では、背景色が上下に半分ずつ表示され、視覚的に独特な効果を生み出します。
まとめ
背景を半分だけ表示する方法は、シンプルながらもインパクトのあるデザインを作り出すのに非常に有効です。CSSのグラデーションを使いこなして、あなたのウェブサイトをさらに魅力的にしましょう。ぜひ、今回紹介したテクニックを実際のプロジェクトに取り入れてみてください。
