関数

このコースではこれまで、いくつかの 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()rgba()hsl()hsla()hwb()lab()lch() などがあります。これらはすべて、構成引数を渡して色を返すという点で類似しています。

数式

他の多くのプログラミング言語と同様に、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% である 20vh20rem の間で最大の値にする必要があります。

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() 関数の詳細については、こちらの記事をご覧ください。

図形

clip-pathoffset-pathshape-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);
}

スケール

Browser Support

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

Source

要素のスケーリングは、transformscale() 関数を使用して変更できます。この関数は、正または負のスケーリングを決定する値として 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 つの引数を受け取ります。

翻訳

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);
}

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

スキューイング

Browser Support

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

Source

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

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

理解度を確認する

関数の知識をテストする

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

()
::
:
[]
{}

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

False
正しい

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

False
正しい

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

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