フィルター・エフェクト関連のCSSプロパティ

Articles

CSS入門

この記事ではフィルター・エフェクト関連のCSSプロパティについて説明します。

filterやtransformなどのプロパティについて、利用用途や記述の仕方を学べます。

YouTube Video

プレビュー用のHTML

css-effect.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-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

フィルター・効果

`filter` プロパティ

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

filter プロパティは、要素に視覚的な効果を適用するために使用されます。画像や要素のぼかし、明るさの調整、コントラストの変更など、さまざまなエフェクトを簡単に追加することができます。

filtered-image-sepiaクラスでは、セピア効果が適用されています。
filtered-image-opacityクラスでは、透過効果が適用されています。
filtered-image-multipleクラスでは、画像に明るさ、コントラスト、セピア効果が適用されています。

基本構文

1filter: none | <filter-function> [<filter-function>]*;

filterプロパティには、noneまたはfilter-functionを指定します。

noneを指定すると、フィルター効果を適用しません。
<filter-function>には適用するフィルター関数を指定します。複数のフィルターをスペースで区切って指定できます。

フィルター関数の種類

`blur()`

1filter: blur(5px);

blur()関数は、ぼかし効果を適用します。

値はピクセル (px) で指定し、大きいほどぼかしの度合いが強くなります。

`brightness()`

1filter: brightness(1.5);

brightness()関数は、明るさを調整します。

値は 0 (完全に暗い) から 1 (元の明るさ) を基準に指定します。1 より大きい値を指定すると、要素がより明るくなります。

`contrast()`

1filter: contrast(2);

contrast()関数は、コントラストを調整します。

値は 0 (グレー表示) から 1 (元のコントラスト) を基準に指定し、1 より大きい値でコントラストが強調されます。

`grayscale()`

1filter: grayscale(1);

grayscale()関数は、要素をモノクロに変換します。

値は 0 (元の色) から 1 (完全なモノクロ) で指定します。

`hue-rotate()`

1filter: hue-rotate(90deg);

hue-rotate()関数は、色相を回転させます。

値は度数 (deg) で指定し、色相を回転させることで、色の変化を適用します。0deg から 360deg までの範囲で色相が回転します。

`invert()`

1filter: invert(1);

invert()関数は、色を反転させます。

値は 0 (元の色) から 1 (完全に反転) で指定します。

`opacity()`

1filter: opacity(0.5);

opacity()関数は、要素の透明度を変更します。

値は 0 (完全に透明) から 1 (不透明) の範囲で指定します。

`saturate()`

1filter: saturate(2);

saturate()関数は、彩度を調整します。

値は 0 (モノクロ) から 1 (元の彩度) で、1 より大きい値を指定すると、彩度が強調されます。

`sepia()`

1filter: sepia(1);

sepia()関数は、セピア調に変換します。

値は 0 (元の色) から 1 (完全なセピア調) で指定します。

複数のフィルターの適用

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

複数のフィルターをスペースで区切って適用することができます。

`filter` プロパティを使う利点

filterプロパティは、視覚的に魅力的な要素を簡単に作成できる強力なツールです。次のような利点があります。

簡単にビジュアル効果を追加できます。
画像編集ソフトを使わず、CSSのみで画像の調整が可能です。
アニメーションと組み合わせてダイナミックなエフェクトを作成できます。

`transform` プロパティ

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

transformプロパティは、要素に2Dまたは3Dの変形を適用するために使用されます。位置や回転、スケーリング（拡大・縮小）、傾斜（スキュー）など、さまざまな視覚的な変更をCSSで指定できます。transformプロパティは、アニメーションと組み合わせることでもよく使用され、動的なUI要素を作成するのに役立ちます。

transform-scaleクラスでは、要素にマウスをホバーすると幅を1.5倍に、高さを2倍に拡大します。
transform-skewクラスでは、要素にマウスをホバーするとX軸を30度、Y軸を20度回転します。
transform-rotateクラスでは、要素にマウスをホバーすると45度回転し、1.5倍に拡大します。

基本構文

1transform: none | <transform-function> [<transform-function>]*;

transformプロパティには、noneまたはtransform-functionを指定します。

noneを指定すると、変形を適用しません。
<transform-function>には、変形の種類を指定します。複数の変形をスペースで区切って適用できます。

主な変形関数

`translate()`

1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */

translate(x, y)関数は、要素をX軸、Y軸に指定した距離だけ移動します。x と y は、pxや%などの単位で指定します。translateX()やtranslateY()で個別に指定することも可能です。

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

rotate(angle)関数は、要素をdeg単位で指定した角度で回転させます。

`scale()`

1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */

scale(x, y)関数は、要素をX軸、Y軸に沿って拡大または縮小します。xとyは、元のサイズを基準にした倍率です。例えば、scale(2, 2)は2倍の大きさになります。scaleX()やscaleY()で個別に指定可能です。

`skew()`

1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);

skew(x-angle, y-angle)関数は、X軸、Y軸に沿って指定した角度だけ傾斜させます。skewX()やskewY()で個別に指定できます。

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

matrix()関数は、複数の変形を一度に指定するための行列を指定します。通常は他の変形関数と組み合わせて使われます。

3D変形関数

`translate3d()`

1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;

translate3d()関数は、3D空間での移動を行います。
- X軸、Y軸、Z軸の3次元で指定可能です。
transform-styleプロパティにpreserve-3d、perspectiveプロパティに600pxを指定することにより、子要素に対して奥行きのある立体的な移動効果を実現しています。

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

rotate3d()関数は、3D空間での回転を行います。
- X、Y、Z軸に対して回転させます。

複数の変形の組み合わせ

1transform: rotate(45deg) scale(1.5);

transform プロパティは、複数の変形を同時に適用することができます。例えば、回転とスケールを組み合わせることができます。

使い方のポイント

transformプロパティは、CSSで要素の視覚的な変形を行う強力なツールです。さまざまな関数を組み合わせることで、インタラクティブで動的なUIを作成できます。

transform プロパティは、要素を直接変形させるため、DOMのレイアウトを変えずに視覚的に操作ができます。
アニメーションやインタラクティブな要素を作成する際に非常に便利で、transitionやanimationと組み合わせることで動きのあるデザインを実現できます。

`transform-origin`プロパティ

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

transform-originプロパティは、transformプロパティによって適用される変形の基準点（原点）を設定するために使用されます。要素の変形がどの位置を基準に行われるかを指定できるため、回転や拡大縮小などの効果がどの位置を中心に適用されるかをコントロールできます。

この例では、要素にマウスをホバーすると、transform-originプロパティで指定された点を基準にして回転と拡大が同時に行われます。

基本構文

1transform-origin: x y z;

transform-originプロパティには、このようにx、y、zを指定します。

xには、X軸の基準点（水平方向）を指定します。値は、キーワード（left、center、right）または長さ（px、%など）で指定できます。
yには、Y軸の基準点（垂直方向）を指定します。値は、キーワード（top、center、bottom）または長さで指定できます。
zには、Z軸の基準点（奥行き方向）を指定します。3D変形時にのみ使用できます。省略可能で、デフォルトは0です。

デフォルト値

1transform-origin: 50% 50%; /* Center of the element */

transform-originプロパティのデフォルト値は、X軸とY軸の両方で要素の中央です。つまり、デフォルトでは変形が要素の中央を基準に行われます。

値の指定方法

transform-originプロパティの値は、キーワード、パーセンテージ、px、emなどの長さで指定できます。

キーワード指定
- left: X軸の基準を要素の左端に設定します。
- right: X軸の基準を要素の右端に設定します。
- top: Y軸の基準を要素の上端に設定します。
- bottom: Y軸の基準を要素の下端に設定します。
- center: X軸またはY軸の基準を要素の中央に設定します。
パーセンテージ指定
- 0%: 左端または上端に設定します。
- 50%: 中央に設定します。
- 100%: 右端または下端に設定します。
長さ指定
- px、emなどの具体的な長さを使って基準点を細かく調整可能です。

3D変形における `transform-origin`

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin は3D変形でも使用できます。3D変形では、Z軸の基準点も指定できます。例えば、回転の中心を奥行き方向にも指定することで、奥行き感のある変形が可能です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

透過関連のCSSプロパティ

フィルター・エフェクト関連のCSSプロパティ

YouTube Video

プレビュー用のHTML

フィルター・効果

filter プロパティ

基本構文

フィルター関数の種類

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

複数のフィルターの適用

filter プロパティを使う利点

transform プロパティ

基本構文

主な変形関数

translate()

rotate()

scale()

skew()

matrix()

3D変形関数

translate3d()

rotate3d()

複数の変形の組み合わせ

使い方のポイント

transform-originプロパティ

基本構文

デフォルト値

値の指定方法

3D変形における transform-origin

YouTube Video

`filter` プロパティ

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

`filter` プロパティを使う利点

`transform` プロパティ

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

`transform-origin`プロパティ

3D変形における `transform-origin`