関数

CSS ポッドキャスト - 020: 関数

このコースではこれまで、いくつかの CSS 関数について見てきました。 grid モジュールでは、 minmax() と fit-content() を紹介しました。 要素のサイズを設定できます。 color モジュールで、 色の定義に役立つ rgb() と hsl() を紹介しました。

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

CSS 関数にはそれぞれ固有の目的があり このレッスンでは どこでどのように利用できるかをより深く理解できます。

関数とは

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

上記の関数の図

多くの CSS 関数は純粋な関数ですが、 つまり、同じ引数を渡すと、 常に同じ結果が返されますが コードの残りの部分の処理に関係なく 使用できます 多くの場合、これらの関数は CSS の値の変更に応じて再計算を行います。 言語内の他の要素と同様に、 計算されたカスケード値（currentColor など）などです。

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 関数のひとつにすぎません。 たとえば、 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() 関数は何も返しません。

色の関数

色の関数については、色モジュールで学びました。 この書籍をまだ読んでいない場合は、読むことを強くおすすめします。

CSS で使用できる色関数の一部を以下に示します。 rgb()、rgba()、hsl()、hsla()、hwb()、lab()、lch() これらはすべて同様の形式になっており、構成引数が渡され、色が返されます。

数式

他の多くのプログラミング言語と同様に CSS には、さまざまな種類の計算に役立つ便利な関数が用意されています。

calc()

対応ブラウザ

  • Chrome: 26。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

ソース

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()

対応ブラウザ

  • Chrome: 79。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 75。 <ph type="x-smartling-placeholder">
  • Safari: 11.1。 <ph type="x-smartling-placeholder">

ソース

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

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

この例では 幅は 20vw の間の最小値にする必要があります （ビューポートの幅の 20%）と 30rem。 高さには 20vh の最大値を指定してください （ビューポートの高さの 20%）と 20rem があります。

clamp()

対応ブラウザ

  • Chrome: 79。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 75。 <ph type="x-smartling-placeholder">
  • Safari: 13.1。 <ph type="x-smartling-placeholder">

ソース

clamp() この関数は 3 つの引数として、最小サイズ、 最適なサイズと最大値が表示されます

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

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

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

図形

「 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() 関数もあります。 これにより、グラフィック ツールで描画できる非常に複雑なシェイプが可能になります。 CSS にコピーしておけば

変換

この CSS 関数の概要の最後にあるのは、変換関数です。 要素の傾斜、サイズ変更、深さの変更などを行えます。 次の関数はすべて、transform プロパティで使用されます。

回転

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

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

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

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

対応ブラウザ

  • Chrome: 12. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 10. <ph type="x-smartling-placeholder">
  • Safari: 4. <ph type="x-smartling-placeholder">

ソース

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

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

スケール

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

要素のスケーリングを変更するには、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 つの引数を取ります。

翻訳

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

translate() 関数は、ドキュメント フロー内での位置を維持しながら、要素を移動します。 引数として長さと割合の値を指定できます。 translate() 関数は、引数が 1 つ定義されている場合、X 軸に沿って要素を変換します。 両方の引数が定義されている場合は、X 軸と Y 軸に沿って要素を平行移動します。

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

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

スキューイング

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

要素に歪みを与えるには、 skew() 角度を引数として受け取る関数です。 skew() 関数は、translate() とよく似ています。 引数を 1 つだけ定義した場合は X 軸にのみ影響します。両方を定義した場合は、 X 軸と Y 軸に影響します また、 skewX、 skewY: 各軸に独立して影響します。

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

視点

対応ブラウザ

  • Chrome: 36。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

最後に、 perspective プロパティ （変換プロパティの一部である）を使用して、ユーザーと Z プレーン間の距離を変更します。 距離感を与え、デザインの被写界深度を作ることができます。

David Desandro によるこの例は、非常に有用な記事の中で取り上げられており、その使用方法が示されています。 perspective-origin-x プロパティと perspective-origin-y プロパティを追加して、真の 3D 体験を作り出します。

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

CSS には、要素のアニメーション化に役立つ関数もあります。 それらにグラデーションを適用し、グラフィカルなフィルタを使用して見た目を操作します。 このモジュールをできる限り簡潔にするために、 リンク先のモジュールで説明します これらはすべて、このモジュールで説明した関数と同様の構造に従っています。

理解度をチェックする

関数に関する知識をテストする

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

[]
これらの文字は JavaScript の配列に使用されます。
{}
これらの文字は、CSS のルールを囲みます。
()
関数はこれらの文字を使用して引数をラップします。
::
次の文字は CSS の疑似要素用です。
:
これらの文字は CSS の疑似クラス用です。

CSS に数学関数は組み込まれている

正しい
多数の機能が用意されており、仕様やブラウザにさらに追加される予定です。
False
もう一度考えてみましょう。

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

正しい
🎉
False
もう一度考えてみましょう。

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

ellipse()
🎉
square()
もう一度考えてみましょう。
circle()
🎉
rect()
もう一度考えてみましょう。
inset()
🎉
polygon()
🎉