関数

The CSS Podcast - 020: Functions

このコースではこれまで、いくつかの CSS 関数について学習しました。グリッド モジュールでは、要素のサイズ設定に役立つ minmax() と fit-content() について説明しました。color モジュールでは、色の定義に役立つ rgb() と hsl() について学習しました。

他の多くのプログラミング言語と同様に、CSS には多数の組み込み関数があり、必要に応じていつでもアクセスできます。

すべての CSS 関数には特定の目的があります。このレッスンでは、CSS 関数の概要を説明します。これにより、関数の使用場所と使用方法をより深く理解できます。

関数とは

関数は、特定のタスクを完了する、名前付きの自己完結型のコードです。関数には名前が付けられているため、コード内で呼び出してデータを渡すことができます。これは引数の渡しと呼ばれます。

上記の関数の図

多くの CSS 関数は純粋関数です。つまり、同じ引数を渡すと、他のコードで何が起こっているかに関係なく、常に同じ結果が返されます。これらの関数は、currentColor などの計算されたカスケード値など、言語の他の要素と同様に、CSS の値が変更されると再計算されます。

CSS では、独自の関数を作成することはできませんが、提供されている関数のみを使用できます。ただし、一部のコンテキストでは関数を相互にネストできるため、より柔軟に使用できます。これについては、このモジュールの後半で詳しく説明します。

機能セレクタ

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

関数セレクタについては、疑似クラス モジュールで学習しました。:is() や :not() などの関数について詳しく説明しています。これらの関数に渡される引数は CSS セレクタであり、評価されます。要素と一致すると、残りの CSS ルールが適用されます。

カスタム プロパティと var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

カスタム プロパティは、CSS コード内の値をトークン化できる変数です。カスタム プロパティもカスケードの影響を受けます。つまり、コンテキストに応じて操作または再定義できます。カスタム プロパティには 2 つのダッシュ（--）を接頭辞として付ける必要があります。大文字と小文字が区別されます。

var() 関数は、値として返すカスタム プロパティという 1 つの必須引数を受け取ります。

上のスニペットでは、var() 関数に --base-color が引数として渡されています。--base-color が定義されている場合、var() は値を返します。

.my-element {
    background: var(--base-color, hotpink);
}

代替の宣言値を var() 関数に渡すこともできます。つまり、--base-color が見つからない場合は、渡された宣言が代わりに使用されます。このサンプルの場合、hotpink 色が使用されます。

値を返す関数

var() 関数は、値を返す CSS 関数の 1 つにすぎません。attr() や url() などの関数は、var() と同様のスキーマに従います。1 つ以上の引数を渡し、CSS 宣言の右側で使用します。

a::after {
  content: attr(href);
}

ここでの attr() 関数は、<a> 要素の href 属性のコンテンツを取得し、::after 疑似要素の content として設定します。<a> 要素の href 属性の値が変更された場合、この変更は content 属性に自動的に反映されます。

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() 関数は URL の文字列を受け取り、画像、フォント、コンテンツの読み込みに使用されます。有効な URL が渡されなかった場合、または URL が参照するリソースが見つからない場合、url() 関数は何も返しません。

色関数

色関数については、color モジュールで詳しく学習しました。まだお読みでない場合は、ぜひお読みになることをおすすめします。

CSS で使用できる色関数には、rgb()、hsl()、lab()、lch()、oklab()、oklch()、color() などがあります。これらはすべて、構成引数が渡され、色が返されるという点で類似しています。

数式

他の多くのプログラミング言語と同様に、CSS にはさまざまな計算をサポートする便利な数学関数があります。

算術関数

calc()

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 7.

Source

calc() 関数は、単一の数式をパラメータとして受け取ります。この数式には、長さ、数値、角度、周波数などの型を組み合わせることができます。単位を組み合わせることもできます。

.my-element {
    width: calc(100% - 2rem);
}

この例では、calc() 関数を使用して、要素の幅をその親要素の 100% に設定し、その計算値から 2rem を削除しています。

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() 関数は、別の calc() 関数内にネストできます。式の一部として var() 関数でカスタム プロパティを渡すこともできます。

min()、max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

min() 関数は、渡された 1 つ以上の引数の計算結果の最小値を返します。max() 関数は、渡された 1 つ以上の引数の最大値を取得します。

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

この例では、幅は 20vw（表示領域の幅の 20%）と 30rem の間で最も小さい値にする必要があります。高さは、ビューポートの高さの 20% である 20vh と 20rem の間で最大の値にする必要があります。

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

clamp() 関数は、最小サイズ、理想的なサイズ、最大サイズの 3 つの引数を取ります。

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

この例では、font-size はビューポートの幅に基づいて流動的に変化します。vw ユニットは、ズームレベルに関係なく同じサイズになるため、画面のズームをサポートするために rem ユニットに追加されます。vwルート フォントサイズに基づく rem 単位で乗算すると、clamp() 関数に相対的な計算ポイントが提供されます。

min()、max()、clamp() 関数の詳細については、これらの関数に関する記事をご覧ください。

三角関数

三角関数を使用すると、角度に基づいて円上の任意の点を見つけたり、音波などの周期的な現象をモデル化したり、軌道を記述したりできます。CSS では、三角関数を使用して、回転に基づくプロパティの設定、アニメーションの時間設定、ポイントに基づく要素の回転などの用途に使用できます。

詳細と例については、三角関数に関する記事をご覧ください。

sin()、cos()、tan()

sin()、cos()、tan() 関数は角度引数を受け取り、それぞれ正弦、余弦、正接を返します。sin() 関数と cos() 関数は、-1～1 の数値を返します。tan() 関数は、-Infinity から +Infinity までの数値を返します。angle 引数には、サポートされている任意の角度単位を使用できます。

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

上の例では、--sine-degrees と --sine-radians は同じ値（この場合は 0.7071）を持ちます。

上記の例では、sin() 関数と cos() 関数を使用して、結果に指定した半径を乗算し、x 軸と y 軸で振動するアニメーションを作成しています。両方の関数を同時に使用すると、回転アニメーションを作成できます。カスタム プロパティ --angle を使用して、すべての関数呼び出しの角度をスムーズにアニメーション化します。

asin()、acos()、atan()

asin()、acos()、atan() は、sin()、cos()、tan() 関数の逆関数で、数値を引数として受け取り、-90deg～90deg の角度値を返します。asin() 関数と acos() 関数は -1～1 の数値を受け取り、atan() 関数は -Infinity～+Infinity の数値を受け取り、

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

atan2() 関数は、原点からの点を示す 2 つの引数を受け取り、その点への方向を表す角度を返します。これを使用して、要素を回転させて特定の点に向けることができます。引数には数値、サイズ単位、または割合を指定できますが、両方の引数は同じ種類にする必要があります。

上の例では、atan2() 関数を使用して、ビューポートの中心と現在のマウス位置の間の角度を決定しています。y 値が最初の引数で、x 値が 2 番目の引数です。この角度は、「瞳」を「目」の中心に対して配置し、マウスを追尾させるために使用されます。

hypot()

hypot() 関数は、直角三角形の辺を表す 2 つの長さ引数を受け取り、斜辺の長さを返します。これは、指数関数を使用して計算する際のショートカットとして使用できます。両方の引数は同じ単位型でなければなりません。hypot() は同じ型を返します。

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

指数関数

pow()、exp()

pow() 関数は、2 つの数値引数（底と指数）を受け取り、底を指数乗します。両方の引数は単位のない数値である必要があります。exp() 関数は単一の引数を取ります。これは、基数を e にして pow() 関数を呼び出すのと同等です。

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

sqrt() 関数は数値の引数を取り、その平方根を返します。引数に単位を含めることはできません。

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

log() 関数は、数値の対数を返します。1 つの引数が渡された場合は、自然対数が返されます。2 番目の引数が渡された場合、log() 関数は 2 番目の引数を対数の底として使用します。

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

abs()

abs() 関数は数値引数を受け取り、引数値の絶対値（正）を返します。

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

上記の例では、alpha 値が -1 の場合、テキストは透明になりますが、abs() 関数は 1 の絶対値を返すため、テキストは完全に不透明になります。

sign()

sign() 関数は数値の引数を受け取り、引数の符号を返します。正の値は 1 を返し、負の値は -1 を返します。0 値は 0 を返します。

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

上記の例では、--value が正の場合、上限値は 75vh になります。負の値の場合、最大値は 25vh になります。0 の場合、上限値は 50vh になります。

図形

clip-path、offset-path、shape-outside の CSS プロパティでは、シェイプを使用してボックスを視覚的にクリップしたり、コンテンツが流れるようにシェイプを指定したりします。

これらの両方のプロパティで使用できるシェイプ関数があります。circle()、ellipse()、inset() などのシンプルなシェイプは、構成引数を使用してサイズを設定します。polygon() などの複雑な図形では、X 軸と Y 軸の値のカンマ区切りのペアを使用してカスタム図形を作成します。

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon() と同様に、SVG 塗りつぶしルールを引数として取る path() 関数もあります。これにより、Illustrator や Inkscape などのグラフィック ツールで描画した非常に複雑なシェイプを CSS にコピーできます。

変換

CSS 関数の概要の最後は、要素の歪み、サイズ変更、深度の変更を行う変換関数です。次の関数はすべて、transform プロパティで使用します。

回転

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

要素を回転するには、rotate() 関数を使用します。この関数は、要素を中心軸で回転させます。rotateX()、rotateY()、rotateZ() 関数を使用して、特定の軸で要素を回転することもできます。度、回転、ラジアンの単位を渡して、回転のレベルを決定できます。

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() 関数は 4 つの引数を取ります。

Browser Support

  • Chrome: 12.
  • Edge: 12.
  • Firefox: 10.
  • Safari: 4.

Source

最初の 3 つの引数は数値で、X、Y、Z 座標を定義します。4 番目の引数は回転です。他の回転関数と同様に、度、角度、回転を受け入れます。

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

個々の rotate プロパティを使用して要素を回転できます。transform プロパティの外部で使用する場合、他の変換とは別に遷移できます。回転関数と同様の値を受け入れます。

スケール

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

要素のスケーリングは、transform と scale() 関数を使用して変更できます。この関数は、正または負のスケーリングを決定する値として 1 つまたは 2 つの数値を受け入れます。数値引数を 1 つだけ定義すると、X 軸と Y 軸の両方が同じスケーリングになります。両方を定義することは、X と Y の省略形です。rotate() と同様に、特定の軸で要素をスケーリングする scaleX()、scaleY()、scaleZ() 関数があります。

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

rotate 関数と同様に、scale3d() 関数もあります。これは scale() に似ていますが、X、Y、Z のスケーリング ファクタの 3 つの引数を受け取ります。

個々の scale プロパティを使用して要素をスケーリングできます。transform プロパティの外部で使用する場合、他の変換とは別に遷移できます。

翻訳

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

translate() 関数は、ドキュメント フローでの位置を維持しながら要素を移動します。長さとパーセンテージの値を引数として受け取ります。translate() 関数は、1 つの引数が定義されている場合は X 軸に沿って要素を移動し、両方の引数が定義されている場合は X 軸と Y 軸に沿って要素を移動します。

.my-element {
  transform: translatex(40px) translatey(25px);
}

他の変換関数と同様に、translateX、translateY、translateZ を使用して、特定の軸に特定の関数を使用できます。translate3d を使用すると、X、Y、Z の移動を 1 つの関数で定義できます。

scale や rotate と同様に、transform プロパティの外部で translate プロパティを使用して要素を移動することもできます。

.my-element{
  translate: 20px 30px;
}

スキューイング

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

角度を引数として受け取る skew() 関数を使用して、要素を傾斜させることができます。skew() 関数は translate() と非常によく似た方法で動作します。1 つの引数のみを定義した場合は X 軸にのみ影響し、両方を定義した場合は X 軸と Y 軸に影響します。skewX と skewY を使用して、各軸に個別に影響を与えることもできます。

.my-element {
  transform: skew(10deg);
}

視点

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

最後に、変換プロパティ ファミリーの一部である perspective プロパティを使用して、ユーザーと Z プレーン間の距離を変更できます。これにより距離感を演出でき、デザインに被写界深度を作成できます。

David Desandro による非常に有用な記事の例では、このプロパティを perspective-origin-x プロパティと perspective-origin-y プロパティとともに使用して、真の 3D エクスペリエンスを作成する方法が示されています。

アニメーション関数、グラデーション、フィルタ

CSS には、要素のアニメーション、グラデーションの適用、グラフィック フィルタによる外観の操作に役立つ関数も用意されています。このモジュールをできるだけ簡潔にするため、これらの機能はリンク先のモジュールで説明しています。これらはすべて、このモジュールで説明した関数に似た構造になっています。

理解度を確認する

関数の知識をテストする

CSS 関数はどの文字で識別できますか。

::
[]
()
:
{}

CSS には数学関数が組み込まれていますか？

False
正しい

calc() 関数は、font-size: calc(10px + calc(5px * 3)); などの別の calc() 内に配置できます。

False
正しい

sin() と cos() の有効な引数は次のうちどれですか。

10deg
pi
45
5em

次の CSS シェイプ関数はどれですか。

ellipse()
square()
circle()
polygon()
rect()
inset()