CSS
関数

構文

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

備考

calc（）関数

数式を受け入れて数値を返します。

これは、属性の値を計算するために、異なるタイプの単位を使用する場合（たとえば、パーセント値からpx値を減算する場合など）に特に便利です。

+ 、 - 、 / 、 *演算子をすべて使用することができ、必要に応じて演算の順序を指定するために括弧を追加できます。

calc()を使用してdiv要素の幅を計算します。

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

calc()を使用して背景画像の位置を決定する：

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

要素の高さをcalc()するには、 calc()を使用します。

height: calc(100% - 20px);

attr（）関数

選択した要素の属性の値を返します。

以下は、この関数を使用してCSSが使用できるdata-*属性内に文字を含むblockquote要素です （例::beforeおよび::after 擬似要素内 ）。

<blockquote data-mark='"'></blockquote>

次のCSSブロックでは、要素内のテキストの前後に文字が追加されます。

blockquote[data-mark]::before,
blockquote[data-mark]::after {
    content: attr(data-mark);
}

線形勾配（）関数

カラーの線形グラデーションを表すイメージを作成します。

linear-gradient( 0deg, red, yellow 50%, blue);

これにより、下から上に向かってグラデーションが作成され、赤で開始し、次に黄色で50％で始まり、青で終了します。

radial-gradient（）関数

グラデーションの中心から放射する色のグラデーションを表すイメージを作成します。

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

var（）関数

var（）関数は、CSS変数へのアクセスを許可します。

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

この機能は現在開発中です。 caniuse.comで最新のブラウザサポートを確認してください。