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()
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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()
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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()
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
プロパティで使用されます。
回転
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要素を回転するには、
rotate()
関数を使用して、要素を中心軸で回転させます。
また、
rotateX()
rotateY()
、
rotateZ()
関数を使って、特定の軸で要素を回転させます。
角度、回転、ラジアンの単位を渡して、回転のレベルを決定できます。
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
この関数は 4 つの引数を取ります。
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
最初の 3 つの引数は数値で、X 座標、Y 座標、Z 座標を定義します。 4 番目の引数は回転です 他の回転関数と同様に、角度、角度、回転を受け付けます。
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
スケール
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 つの引数を取ります。
翻訳
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 つの関数で定義できます。
スキューイング
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要素に歪みを与えるには、
skew()
角度を引数として受け取る関数です。
skew()
関数は、translate()
とよく似ています。
引数を 1 つだけ定義した場合は X 軸にのみ影響します。両方を定義した場合は、
X 軸と Y 軸に影響します
また、
skewX
、
skewY
: 各軸に独立して影響します。
.my-element {
transform: skew(10deg);
}
視点
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
最後に、
perspective
プロパティ
(変換プロパティの一部である)を使用して、ユーザーと Z プレーン間の距離を変更します。
距離感を与え、デザインの被写界深度を作ることができます。
David Desandro によるこの例は、非常に有用な記事の中で取り上げられており、その使用方法が示されています。
perspective-origin-x
プロパティと perspective-origin-y
プロパティを追加して、真の 3D 体験を作り出します。
アニメーション関数、グラデーション、フィルタ
CSS には、要素のアニメーション化に役立つ関数もあります。 それらにグラデーションを適用し、グラフィカルなフィルタを使用して見た目を操作します。 このモジュールをできる限り簡潔にするために、 リンク先のモジュールで説明します これらはすべて、このモジュールで説明した関数と同様の構造に従っています。
理解度をチェックする
関数に関する知識をテストする
CSS 関数はどの文字で識別できますか。
[]
()
{}
::
:
CSS に数学関数は組み込まれている
calc()
関数は、font-size: calc(10px + calc(5px * 3));
などの別の calc()
の内部に配置できます。
CSS のシェイプ関数は次のうちどれですか。
square()
ellipse()
polygon()
rect()
inset()
circle()