CSS - 層：Web デザインにおける深さの芸術のマスター

こんにちは、Web デザイン志望者各位！今日は、CSSの層の fascinante な世界に飛び込みます。あなたのウェブページをキャンバスと考え、層を違う要素同士を重ねて深さと次元を作ることのできるものと考えてください。デジタルコラージュを作るようなものです - 楽しいでしょう？では、始めましょう！

CSS - Layers

CSS 層 - z-index プロパティを使って

z-index とは？

z-index プロパティは、あなたの HTML 要素のための魔法のエレベーターです。重なったときにどの要素が上に表示されるかを決定します。これを、Web デザインの高層ビルに要素に階数を割り当てるようなものと考えてください。

簡単な例を見てみましょう：

<div class="container">
<div class="box red">1</div>
<div class="box blue">2</div>
<div class="box green">3</div>
</div>

.container {
position: relative;
}

.box {
width: 100px;
height: 100px;
position: absolute;
}

.red {
background-color: red;
z-index: 1;
top: 0;
left: 0;
}

.blue {
background-color: blue;
z-index: 2;
top: 30px;
left: 30px;
}

.green {
background-color: green;
z-index: 3;
top: 60px;
left: 60px;
}

この例では、3つのボックスが異なる z-index 値を持っています。緑のボックス（z-index: 3）が最上阶に表示され、青いボックス（z-index: 2）、そして赤いボックス（z-index: 1）がその後に続きます。

プロ tip:

z-index は、position 値が static 以外（relative、absolute、または fixed）の要素にのみ動作します。

CSS 層 - 画像とテキスト

さあ、創造的なことに移りましょう。画像とテキストを重ねてみましょう！

<div class="image-container">
<img src="background.jpg" alt="Background" class="background">
<div class="text-overlay">
<h2>私のウェブサイトにようこそ</h2>
<p>CSS層の美しさを探求しています！</p>
</div>
</div>

.image-container {
position: relative;
width: 500px;
height: 300px;
}

.background {
width: 100%;
height: 100%;
object-fit: cover;
}

.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}

この例では、背景画像にテキストを重ねています。text-overlay ディブは relative コンテナ内で絶対位置にあり、画像の上に完美にセンタリングされています。

面白い事実:

この技術は、ウェブサイトのヘッダー部分で目を引くヘッダーを作成するためによく使用されます！

CSS 層 - z-index プロパティを使わずに

時々、z-index は必要ありません。HTML 内の要素の順序で重ね順を決めることができます。

<div class="stacked-boxes">
<div class="box bottom">Bottom</div>
<div class="box middle">Middle</div>
<div class="box top">Top</div>
</div>

.stacked-boxes {
position: relative;
height: 200px;
width: 200px;
}

.box {
position: absolute;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

.bottom {
background-color: blue;
top: 0;
left: 0;
}

.middle {
background-color: green;
top: 30px;
left: 30px;
}

.top {
background-color: red;
top: 60px;
left: 60px;
}

この例では、ボックスは HTML 内の順序に基づいて重ねられます。 "top" ボックスが最上阶に表示され、その後 "middle"、そして "bottom" が続きます。

忘れてはならないこと:

z-index を使用しない場合、HTML 内の順序が後で表示される要素が上に表示されます。

すべてを合わせて

さまざまな方法で層を作成する方法を探求したので、もっと複雑な例に知識を結集してみましょう：

<div class="scene">
<img src="landscape.jpg" alt="Landscape" class="background">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="sun"></div>
<div class="bird bird1"></div>
<div class="bird bird2"></div>
<div class="message">私たちの層の世界にようこそ！</div>
</div>

.scene {
position: relative;
width: 800px;
height: 600px;
overflow: hidden;
}

.background {
width: 100%;
height: 100%;
object-fit: cover;
}

.cloud {
position: absolute;
width: 200px;
height: 100px;
background-color: white;
border-radius: 50px;
}

.cloud1 {
top: 50px;
left: 100px;
z-index: 2;
}

.cloud2 {
top: 100px;
right: 150px;
z-index: 2;
}

.sun {
position: absolute;
top: 50px;
right: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
z-index: 1;
}

.bird {
position: absolute;
width: 30px;
height: 20px;
background-color: black;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.bird1 {
top: 150px;
left: 300px;
z-index: 3;
}

.bird2 {
top: 200px;
right: 400px;
z-index: 3;
}

.message {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
z-index: 4;
}

この複雑なシーンでは、z-index と要素の順序を組み合わせて層の風景を作成しています。背景画像が最下層で、その後太陽、雲、鳥、そして最上阶に迎えるメッセージが続きます。

結論

おめでとうございます！あなたは CSS 層の世界への最初の一歩を踏み出しました。ウェブデザインに深さを作ることは、絵を描くようなものです - 練習と創造性が必要です。z-index 値と要素の配置を試してみて、あなたのウェブサイトに最適な外観を達成するまで実験を続けてください。

以下に、私たちがカバーした方法の簡単な参照表を示します：

方法	説明	使用例
z-index	明示的に重ね順を設定	重ね順を正確にコントロールする必要がある場合
HTML 順序	要素の重ね順を HTML 内の順序に基づいて設定	z-index を使わない簡単な重ね

CSS 層をマスターする鍵は練習です。それでは、層を始めて、あなたのウェブデザインが深さと次元を持つのを見てください！

Credits: Image by storyset