CSS Podcast - 020: Functions
このコースではこれまで、いくつかの CSS 関数を見てきました。grid モジュールでは、要素のサイズ設定に役立つ minmax() と fit-content() を紹介しました。color モジュールでは、色の定義に役立つ rgb() と hsl() を紹介しました。
他の多くのプログラミング言語と同様に、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() 関数によって何も返されません。
色関数
色関数については、色モジュールですべて学習しました。 まだ読んでいない場合は、読むことを強くおすすめします。
CSS で利用可能な色関数は、rgb()、rgba()、hsl()、hsla()、hwb()、lab()、lch() です。これらはすべて、構成引数が渡されて色が返される同様の形式になっています。
数式
他の多くのプログラミング言語と同様に、CSS には、さまざまな種類の計算に役立つ便利な数学関数が用意されています。
calc()
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()
min() 関数は、渡された 1 つ以上の引数から計算された最小値を返します。max() 関数はその逆を行います。つまり、渡された 1 つ以上の引数の最大値を取得します。
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
この例では、幅は 20vw（ビューポートの幅の 20%）と 30rem の間の最小値である必要があります。高さは 20vh（ビューポートの高さの 20%）と 20rem の間の最大値にする必要があります。
clamp()
clamp() 関数は、最小サイズ、理想的なサイズ、最大の 3 つの引数を取ります。
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
この例では、font-size はビューポートの幅に基づいて流動的になります。vw ユニットは、画面のズームをサポートするために rem ユニットに追加されます。これは、ズームレベルに関係なく、vw ユニットは同じサイズであるためです。ルートのフォントサイズに基づいて rem 単位を乗算すると、clamp() 関数に相対的な計算ポイントが設定されます。
min()、max()、clamp() 関数の詳細については、こちらの記事をご覧ください。
図形
CSS プロパティ clip-path、offset-path、shape-outside では、シェイプを使用してボックスを視覚的にクリップしたり、コンテンツが流れるシェイプを提供したりできます。
この両方のプロパティで使用できるシェイプ関数があります。
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 プロパティとともに使用します。
rotation
要素を回転させるには、rotate() 関数を使用します。この関数は中心軸を中心に回転します。代わりに、rotateX()、rotateY()、rotateZ() 関数を使用して、特定の軸上で要素を回転させることもできます。角度、回転、ラジアンの単位を渡して、回転のレベルを決定できます。
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d() 関数は 4 つの引数を取ります。
最初の 3 つの引数は数値で、X、Y、Z 座標を定義します。4 番目の引数は回転です。他の回転関数と同様に、度数、角度、回転を受け取ります。
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
スケーリング
要素のスケーリングは、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 つの引数を取ります。
翻訳する
translate() 関数は、ドキュメント フロー内での位置を維持しながら、要素を移動します。引数として長さとパーセンテージの値を受け入れます。translate() 関数は、1 つの引数が定義されている場合は X 軸に沿って要素を変換し、両方の引数が定義されている場合は X 軸と Y 軸に沿って要素を変換します。
.my-element {
transform: translatex(40px) translatey(25px);
}
他の変換関数と同様に、translateX、translateY、translateZ を使用して、特定の軸に特定の関数を使用できます。また、translate3d を使用すると、1 つの関数で X、Y、Z の変換を定義できます。
スキューイング
角度を引数として受け取る skew() 関数を使用すると、要素を傾斜できます。skew() 関数は、translate() と非常によく似た方法で機能します。引数を 1 つだけ定義した場合は X 軸にのみ影響し、両方を定義する場合は X 軸と Y 軸に影響します。また、skewX と skewY を使用して、各軸に独立して影響を及ぼすこともできます。
.my-element {
transform: skew(10deg);
}
視点
最後に、変換プロパティ ファミリーの一部である perspective プロパティを使用して、ユーザーと Z プレーン間の距離を変更できます。そうすることで距離を感じやすくなり、デザインに被写界深度を持たせることができます。
David Desandro 氏による非常に有益な記事からのこの例は、perspective-origin-x プロパティと perspective-origin-y プロパティとともに使用し、真の 3D エクスペリエンスを作成する方法を示しています。
アニメーション関数、グラデーション、フィルタ
CSS には、要素のアニメーション化、要素へのグラデーションの適用、グラフィカルなフィルタを使用した外観の操作に役立つ関数もあります。このモジュールをできる限り簡潔にするために、リンク先のモジュールで説明しています。これらはすべて、このモジュールで紹介する関数と同様の構造になっています。
理解度をチェックする
関数の理解度を確認する
CSS 関数はどの文字で識別できますか。
[]{}():::CSS には組み込みの数学関数があるのでしょうか。
calc() 関数は、font-size: calc(10px + calc(5px * 3)); のような別の calc() 内に配置できます。
CSS のシェイプ関数は次のうちどれですか。
ellipse()square()circle()rect()inset()polygon()