CSS/CSS関数

CSS関数

CSSには、プロパティ値を動的に計算したり、特定の効果を作り出すために使用することができる「関数」がいくつか存在します。これらの関数を活用することで、より柔軟で効率的なスタイルの定義が可能となり、デザインの表現力を広げることができます。ここでは、CSSでよく使われる主要な関数を紹介し、それぞれの使い方を実例を交えて解説します。

abs()

abs()関数は、絶対値を返します。数値の符号を無視して常に正の値を返すため、計算において負の値を除外したい場合に便利です。

div {
  width: abs(-50px); /* 絶対値を取ると、幅は50pxになります */
}

この関数は、特に動的なサイズ調整で負の値を扱いたくない場合に役立ちます。

acos()

acos()関数は、アークコサイン（逆余弦）を計算します。引数として指定された数値のコサイン値に対応する角度（ラジアン単位）を返します。

div {
  transform: rotate(acos(0.5)); /* コサインが0.5に対応する角度で回転 */
}

acos()は、数学的なトランスフォーメーションや計算に利用できます。

anchor-size() (Experimental)

anchor-size()は、CSSで指定されたアンカー要素のサイズを取得する実験的な関数です。特定の要素が基準となるアンカーとして使用され、そのサイズに依存するレイアウトを作成できます。

div {
  width: anchor-size(10px);
}

この関数は現在、試験的な段階であり、サポート状況に注意が必要です。

anchor() (Experimental)

anchor()関数は、要素が他の要素と相対的にどの位置に配置されるかを定義するために使用される実験的な関数です。位置決めやレイアウトにおいて基準となる要素を指定することができます。

div {
  position: anchor(top left);
}

こちらも実験的な関数であり、ブラウザでの動作に関しては確認が必要です。

asin()

asin()関数は、アークサイン（逆正弦）を計算します。引数として指定された数値のサイン値に対応する角度（ラジアン単位）を返します。

div {
  transform: rotate(asin(0.5)); /* サインが0.5に対応する角度で回転 */
}

角度計算に利用されることが多く、特に幾何学的な変換に役立ちます。

atan()

atan()関数は、アークタンジェント（逆正接）を計算します。引数として指定された数値のタンジェントに対応する角度（ラジアン単位）を返します。

div {
  transform: rotate(atan(1)); /* タンジェントが1に対応する角度で回転 */
}

atan()は角度の計算に使用され、特に斜めの傾きや回転の計算で有用です。

atan2()

atan2()関数は、直交座標系での点（x, y）のアークタンジェントを計算します。これにより、2次元座標から角度を計算できます。

div {
  transform: rotate(atan2(1, 1)); /* 点(1, 1)のアークタンジェントで回転 */
}

2Dグラフィックスや変換の際に、座標から角度を計算する際に使用されます。

attr()

attr()関数は、HTML要素の属性値をCSSで参照するために使用されます。通常はcontentプロパティ内で使われ、要素の属性を動的に表示できます。

a::before {
  content: attr(href); /* リンクのhref属性を表示 */
}

attr()は、主に動的なコンテンツ生成に役立ちます。

calc-size() (Experimental)

calc-size()は、要素の計算されたサイズを取得する実験的な関数です。この関数は、要素のサイズを計算するために使用される予定ですが、実験的な段階にあるため、サポート状況に注意が必要です。

calc()

calc()関数は、数値の演算を行うために使用されます。calc()を使うことで、動的なレイアウトや柔軟なサイズ設定が可能になります。

div {
  width: calc(100% - 50px); /* 親要素の100%から50pxを引いた幅 */
}

calc()は、レスポンシブデザインや相対的なレイアウト調整で非常に役立つ関数です。

clamp()

clamp()関数は、最小値、中間値、最大値を指定して、その範囲内で動的な値を生成します。特にレスポンシブデザインにおいて、サイズの変動を制限する際に有効です。

div {
  font-size: clamp(12px, 5vw, 24px); /* 最小12px、最大24px、中央値は5vw */
}

この関数は、デザイン要素のサイズがスクリーンサイズに応じて動的に調整される場面で活用できます。

cos()

cos()関数は、余弦を計算します。引数として与えられた角度（ラジアン単位）の余弦値を返します。

div {
  transform: rotate(cos(0.5)); /* 余弦が0.5に対応する角度で回転 */
}

数学的な計算において、角度の余弦を求める際に使用します。

counter()

counter()関数は、CSSカウンターを参照するために使用されます。特にリストや番号付きリストのカスタマイズに便利です。

ol {
  counter-reset: item; /* カウンターの初期化 */
}

li::before {
  content: counter(item); /* リストアイテムに番号を追加 */
  counter-increment: item; /* カウンターを1つ進める */
}

リストの番号を動的に管理する場合に役立ちます。

counters()

counters()関数は、親カウンターと子カウンターを組み合わせて複雑な番号付けを行います。

ol {
  counter-reset: section;
}

li::before {
  content: counters(section, ".") ". "; /* 親カウンターと子カウンターを組み合わせる */
  counter-increment: section;
}

複雑な番号付けや階層的なリストで役立ちます。

cross-fade()

cross-fade()関数は、2つの画像をクロスフェードで合成するために使用されます。これにより、画像の遷移を滑らかに見せることができます。

div {
  background-image: cross-fade(url('image1.jpg'), url('image2.jpg'), 0.5);
}

この関数は、画像間のスムーズな遷移を表現する際に使います。

element() (Experimental)

element()関数は、指定した要素を参照するための実験的な関数です。この関数により、要素に関連付けられたスタイルを直接参照することができます。

div {
  background-image: element(#image-id);
}

この関数も実験的な機能であり、ブラウザサポートに注意が必要です。

env()

env()関数は、環境変数に基づいて動的に値を取得するために使用されます。特に、ブラウザやOSの設定に応じた値を指定する際に役立ちます。

div {
  padding: env(safe-area-inset); /* 安全領域のインセット値を取得 */
}

モバイルデバイスや異なるプラットフォームに対応するデザインで活用できます。

exp()

exp()関数は、指数関数（eの累乗）を

計算します。指定した数値に対してeの累乗を返します。

div {
  transform: scale(exp(1)); /* eの1乗（約2.718）でスケール */
}

指数関数の計算に用います。

fit-content()

fit-content()は、要素がそのコンテンツに合わせてサイズを調整するために使用されます。

div {
  width: fit-content;
}

コンテンツのサイズに合わせたレイアウトを行う際に便利です。

hypot()

hypot()関数は、2つの数値に基づいて直角三角形の斜辺の長さを計算します。

div {
  width: hypot(3, 4); /* 直角三角形の斜辺（5px） */
}

ユーザーインターフェースや幾何学的な計算に使います。

log()

log()関数は、指定された数値の自然対数（log base e）を計算します。

div {
  transform: rotate(log(2)); /* 2の自然対数で回転 */
}

対数計算に使用され、特にスケール調整に役立ちます。

max()

max()関数は、指定した値の中で最大のものを返します。

div {
  width: max(200px, 50%);
}

レスポンシブデザインにおいて、最小または最大の制約を設定するのに役立ちます。

min()

min()関数は、指定した値の中で最小のものを返します。

div {
  width: min(100%, 300px);
}

同様に、最小サイズの設定に役立ちます。

minmax()

minmax()関数は、2つの値の間で動的なサイズを指定します。これにより、サイズの範囲を指定することができます。

grid-template-columns: minmax(200px, 1fr);

レスポンシブグリッドで活用できます。

mod()

mod()関数は、モジュラー計算（剰余）を行います。

div {
  width: mod(10, 3); /* 10 % 3 の結果 1 */
}

剰余計算に使用します。

pow()

pow()関数は、累乗を計算します。

div {
  transform: scale(pow(2, 3)); /* 2の3乗（8倍）でスケール */
}

累乗計算に用います。

ray()

ray()関数は、指定された角度の方向に沿ってレイアウトを設定する実験的な関数です。

rem()

rem()関数は、相対単位remを基準にした長さを設定します。

div {
  font-size: rem(16px);
}

レスポンシブなデザインで使用され、基準となるフォントサイズを柔軟に調整できます。

repeat()

repeat()関数は、指定されたパターンを繰り返して要素のレイアウトを作成します。

grid-template-columns: repeat(3, 1fr);

グリッドレイアウトで繰り返しの要素を簡潔に設定できます。

round()

round()関数は、数値を四捨五入します。

div {
  transform: rotate(round(45.5)); /* 45.5度を四捨五入して46度に回転 */
}

四捨五入を行いたい場合に使用します。

sign()

sign()関数は、数値の符号を返します。負なら-1、正なら1、ゼロなら0を返します。

div {
  transform: rotate(sign(-10) * 30deg); /* 負の符号で反時計回りの回転 */
}

符号の判定を行いたい場合に有効です。

sin()

sin()関数は、正弦を計算します。指定された角度（ラジアン単位）の正弦値を返します。

div {
  transform: rotate(sin(0.5)); /* 正弦が0.5に対応する角度で回転 */
}

角度の正弦値を使って計算します。

sqrt()

sqrt()関数は、平方根を計算します。

div {
  width: sqrt(16px); /* 16の平方根（4px） */
}

平方根を計算する際に使用します。

symbols()

symbols()関数は、特定のシンボルに関連するスタイルを指定するために使用される実験的な関数です。

tan()

tan()関数は、タンジェントを計算します。指定された角度（ラジアン単位）のタンジェント値を返します。

div {
  transform: rotate(tan(1)); /* タンジェントが1に対応する角度で回転 */
}

角度のタンジェントを計算する際に使用します。

url()

url()関数は、リソース（画像、フォント、など）のURLを指定するために使用されます。

div {
  background-image: url('image.jpg');
}

外部リソースを指定する際に使います。

var()

var()関数は、CSSカスタムプロパティ（変数）を参照するために使用されます。

div {
  color: var(--primary-color);
}

CSS変数を使用して、スタイルを動的に変更できます。

まとめ

CSS関数を利用することで、静的なスタイルシートに動的な計算や効果を加えることができ、より柔軟で表現力豊かなデザインを作成することができます。calc()やvar()、linear-gradient()、url()など、さまざまな関数を組み合わせることで、効率的で再利用可能なスタイルを作ることができます。関数を適切に使うことで、コードの可読性やメンテナンス性が向上し、デザインの幅を広げることができるため、積極的に活用しましょう。