透過関連のCSSプロパティ
この記事では透過関連のCSSプロパティについて説明します。
opacityやz-index、clip-pathプロパティについて、利用用途や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-opacity.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-opacity.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties Related to Transparency</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>CSS Properties Related to Transparency</h2>
20 </header>
21 <article>
22 <h3>opacity</h3>
23 <section>
24 <header><h4>opacity: 1</h4></header>
25 <section class="sample-view">
26 <div class="opaque-box">Opaque</div>
27 </section>
28 <header><h4>opacity: 0.5</h4></header>
29 <section class="sample-view">
30 <div class="semi-transparent-box">Semi-transparent</div>
31 </section>
32 <header><h4>opacity: 0</h4></header>
33 <section class="sample-view">
34 <div class="transparent-box">Transparent</div>
35 </section>
36 <header><h4>transition: opacity 2s ease-in-out</h4></header>
37 <section class="sample-view">
38 <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39 </section>
40 <header><h4>Parent & Child Element</h4></header>
41 <section class="sample-view">
42 <div class="opacity-parent">
43 Parent Element & <span class="opacity-child">Child Element</span>
44 </div>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>z-index</h3>
50 <section>
51 <div class="z-index-box1">1</div>
52 <div class="z-index-box2">
53 <div class="z-index-box2-1">2-1</div>
54 2
55 </div>
56 <div class="z-index-box3">3</div>
57 </section>
58 </article>
59 <article>
60 <h3>clip-path</h3>
61 <section>
62 <h4>Clip-path Property Examples</h4>
63 <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64 <section class="sample-view">
65 <div class="clip-path-circle">Circle</div>
66 </section>
67 <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68 <section class="sample-view">
69 <div class="clip-path-ellipse">Ellipse</div>
70 </section>
71 <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72 <section class="sample-view">
73 <div class="clip-path-polygon">Polygon</div>
74 </section>
75 <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76 <section class="sample-view">
77 <div class="clip-path-inset">Inset</div>
78 </section>
79 <header><h4>clip-path: url(#myClip)</h4></header>
80 <section class="sample-view">
81 <div class="clip-path-url">Url</div>
82 </section>
83 </section>
84 <svg width="0" height="0">
85 <clipPath id="myClip">
86 <circle cx="50" cy="50" r="40" />
87 </clipPath>
88 </svg>
89 </article>
90 </main>
91</body>
92</html>フィルター・効果
opacityプロパティ
1.opaque-box {
2 background-color: skyblue;
3 opacity: 1; /* completely opaque */
4 border: 1px solid black;
5}
6
7.semi-transparent-box {
8 background-color: skyblue;
9 opacity: 0.5; /* semi-transparent */
10 border: 1px solid black;
11}
12
13.transparent-box {
14 background-color: skyblue;
15 opacity: 0; /* completely transparent */
16 border: 1px solid black;
17}
18
19.opacity-transition-box {
20 background-color: orange;
21 transition: opacity 2s ease-in-out;
22 border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26 opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30 background-color: blue;
31 opacity: 0.5;
32}
33
34.opacity-child {
35 background-color: red;
36}opacityプロパティは、要素の透明度を設定するために使用されます。このプロパティは、要素全体の不透明度を指定し、値が0に近いほど透明になり、1に近いほど不透明になります。opacityプロパティは、アニメーションなどと組み合わせて、フェードインやフェードアウトの効果を作成することもできます。
opacity プロパティは、設定された要素だけでなく子要素にも影響します。つまり、親要素が半透明に設定されると、子要素もその透明度を継承します。
この例では、次のように設定されています。
-
opacityプロパティに1を指定すると、通常と同じ透明でない要素になります。 -
opacityプロパティに0.5を指定すると、半透明の要素になります。 -
opacityプロパティに1を指定すると、完全に透明な要素になり、全く表示されなくなります。 -
transitionプロパティにopacityを指定し、マウスカーソルが要素の上に来るとフェードアウトされ、2秒後に完全に透明になるようにしています。 -
親要素の
opacityプロパティに0.5を指定すると、子要素も半透明の要素になります。
z-indexプロパティ
1.z-index-box1 {
2 position: relative;
3 width: 100px;
4 height: 100px;
5 background-color: red;
6 top: 10px;
7 left: 10px;
8 z-index: 1; /* Displayed in the foreground */
9}
10
11.z-index-box2 {
12 position: relative;
13 width: 100px;
14 height: 100px;
15 background-color: blue;
16 top: -100px;
17 left: 90px;
18 z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22 position: relative;
23 width: 100px;
24 height: 100px;
25 background-color: green;
26 top: -160px;
27 left: 80px;
28 z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32 position: relative;
33 width: 50px;
34 height: 50px;
35 background-color: skyblue;
36 top: 0px;
37 left: 0px;
38 z-index: 4;
39}z-index は、CSSで要素の重なり順序（スタッキング順序）を制御するために使われるプロパティです。このプロパティを使用して、要素が他の要素より前面に表示されるか、後ろに表示されるかを指定します。
- 赤色のボックスでは、
z-indexに1が指定されており、要素は他の要素の前面に表示されます。 - 青色のボックスでは、
z-indexに0が指定されており、要素は赤色のボックスより後ろに表示されます。 - 緑色のボックスでは、
z-indexに2が指定されており、最前面に表示されます。 - 水色のボックスでは、
z-indexに一番高い4が指定されていますが、親要素のz-indexが0のため最前面には表示されていません。
基本的な仕組み
z-index プロパティには数値を指定し、その数値が大きい要素ほど前面に、数値が小さい要素は背面に表示されます。デフォルトでは、z-indexを指定していない要素は、HTMLで書かれた順番に従って重なり合います。
ただし、z-indexが有効になるためには、その要素がpositionプロパティでrelative、absolute、fixed、またはstickyのいずれかに設定されている必要があります。positionがstaticの場合、z-indexは効果がありません。
値
-
z-indexに正の整数が指定された場合、要素はより前面に表示されます。数値が大きいほど、他の要素の前に表示されます。z-indexに0が指定された場合、デフォルトの重なり順序になります。z-indexに1が指定された場合、他の要素よりも1つ前面に表示されます。
-
z-indexに負の整数が指定された場合、要素はより後ろに表示されます。数値が小さいほど、他の要素の後ろに表示されます。z-indexに-1が指定された場合、他の要素よりも1つ後ろに表示されます。
注意点
z-indexは、親要素のz-indexに依存します。親要素にz-indexが指定されている場合、その親要素内での相対的な重なり順序が適用されます。これはスタッキングコンテキストと呼ばれます。そのため、子要素のz-indexが高くても、親要素のz-indexが低いと、他の要素より前に表示されません。
clip-pathプロパティ
CSSのclip-pathは、要素を特定の形状でクリップ（切り抜く）ためのプロパティです。通常、要素は四角形のボックスで表示されますが、clip-pathを使用することで、要素を円や多角形などの複雑な形状で表示することが可能です。視覚的なデザインやインタラクティブなエフェクトを作成する際に非常に有用なツールです。
clip-pathプロパティは、要素の表示領域を制限し、指定された形状の外側の部分を非表示にします。次に、よく使用される形状の指定方法について解説します。
主要なクリッピング形状
circle()
1.clip-path-circle {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: circle(50% at 50% 50%);
6}circle()は、要素を円形にクリップします。円の中心と半径を指定することで形状を制御できます。
- 最初の
50%は、円の半径（要素の幅や高さに対する割合）です。 - 続く部分の
at 50% 50%は、円の中心位置（要素の幅と高さに対する割合）です。
ここでは、要素の中央に半径が要素の半分の円を指定しています。
ellipse()
1.clip-path-ellipse {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: ellipse(50% 30% at 50% 50%);
6}ellipse()は、楕円形にクリップします。横幅と縦幅の半径、および中心位置を指定します。
- 最初の
50% 30%は、横幅と縦幅の半径です。 - 続く部分の
at 50% 50%は、楕円の中心位置です。
この例では、要素の中央に、横幅が50%、縦幅が30%の楕円形を指定しています。
polygon()
1.clip-path-polygon {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}polygon()は、指定した一連の頂点を結んだ多角形を形成します。各頂点は、要素内の相対的な座標で指定します。
- この例では、3つの頂点（中央上部、右下、左下）を指定し、三角形にクリップします。
polygon()は非常に柔軟で、任意の形状を作成できます。
inset()
1.clip-path-inset {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: inset(10% 20% 30% 40%);
6}inset()は、要素の外側から内側に向かってクリップします。四辺からの距離を指定して、四角形を定義します。
10%は、上辺からの距離です。20%は、右辺からの距離です。30%は、下辺からの距離です。40%は、左辺からの距離です。
この指定は、要素の内側に縮小した矩形を作成します。
SVGを使ったclip-path
1/*
2<svg width="0" height="0">
3 <clipPath id="myClip">
4 <circle cx="50" cy="50" r="40" />
5 </clipPath>
6</svg>
7*/
8.clip-path-url {
9 width: 100px;
10 height: 100px;
11 background-color: green;
12 clip-path: url(#myClip);
13}CSSのclip-pathは、単にプリミティブな形状を使用するだけでなく、SVGの<clipPath>要素を使用して複雑な形状をクリップすることもできます。
- この例では、
idにmyClipとしてSVGで定義した円形クリップパスをHTML要素に適用しています。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。