1 files changed, 255 insertions, 0 deletions
diff --git a/files/ja/web/css/css_functions/index.md b/files/ja/web/css/css_functions/index.md
new file mode 100644
index 0000000000..6e50bcb257
--- /dev/null
+++ b/files/ja/web/css/css_functions/index.md
@@ -0,0 +1,255 @@
+---
+title: CSS 関数表記法
+slug: Web/CSS/CSS_Functions
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Function
+  - Functional Notation
+  - Functions
+  - Reference
+  - Types
+  - data types
+translation_of: Web/CSS/CSS_Functions
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 関数表記法</strong>は <a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値</a>の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">selector {
+  property: functional-notation( [argument]? [, argument]! );
+}</pre>
+
+<p>構文は、<strong>関数表記の名前</strong>から始まり、左括弧 <code>(</code> で始まります。次に記法の引数が続き、関数は閉じ括弧 <code>)</code> で終わります。</p>
+
+<p>関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。</p>
+
+<h2 id="Index" name="Index">索引</h2>
+
+<p>一連の CSS 仕様書で定義されている関数表記は以下のとおりです。</p>
+
+<div class="index"><span>A</span>
+
+<ul>
+ <li>{{CSSxRef("abs", "abs()")}} (math)</li>
+ <li>{{CSSxRef("acos", "acos()")}} (math)</li>
+ <li>{{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)</li>
+ <li>{{CSSxRef("asin", "asin()")}} (math)</li>
+ <li>{{CSSxRef("atan", "atan()")}} (math)</li>
+ <li>{{CSSxRef("atan2", "atan2()")}} (math)</li>
+ <li>{{CSSxRef("attr")}}</li>
+</ul>
+<span>B</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/blur", "blur()")}} (filter)</li>
+ <li>{{CSSxRef("filter-function/brightness", "brightness()")}} (filter)</li>
+</ul>
+<span>C</span>
+
+<ul>
+ <li>{{CSSxRef("calc")}} (math)</li>
+ <li>{{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)</li>
+ <li>{{CSSxRef("circle", "circle()")}} (shape)</li>
+ <li>{{CSSxRef("clamp")}} (math)</li>
+ <li>{{CSSxRef("color()")}} (colors)</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("cos", "cos()")}} (math)</li>
+ <li>{{CSSxRef("counter")}}</li>
+ <li>{{CSSxRef("counters")}}</li>
+ <li>{{CSSxRef("filter-function/contrast", "contrast()")}} (filter)</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+ <li>{{CSSxRef("cubic-bezier", "cubic-bezier()")}}</li>
+</ul>
+<span>D</span>
+
+<ul>
+ <li>{{CSSxRef("device-cmyk", "device-cmyk()")}} (colors)</li>
+ <li>{{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)</li>
+</ul>
+<span>E</span>
+
+<ul>
+ <li>{{CSSxRef("element")}}</li>
+ <li>{{CSSxRef("env")}}</li>
+ <li>{{CSSxRef("ellipse", "ellipse()")}} (shape)</li>
+ <li>{{CSSxRef("exp", "exp()")}} (math)</li>
+</ul>
+<span>F</span>
+
+<ul>
+ <li>{{CSSxRef("fit-content")}}</li>
+ <li>{{CSSxRef("format", "format()")}}</li>
+</ul>
+<span>G</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)</li>
+</ul>
+<span>H</span>
+
+<ul>
+ <li>{{CSSxRef("hsl", "hsl()")}} (colors)</li>
+ <li>{{CSSxRef("hsla", "hsla()")}} (colors)</li>
+ <li>{{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)</li>
+ <li>{{CSSxRef("hwb", "hwb()")}} (colors)</li>
+ <li>{{CSSxRef("hypot", "hypot()")}} (math)</li>
+</ul>
+<span>I</span>
+
+<ul>
+ <li>{{CSSxRef("imagefunction", "image()")}}</li>
+ <li>{{CSSxRef("image-set")}}</li>
+ <li>{{CSSxRef("inset()")}} (shape)</li>
+ <li>{{CSSxRef("filter-function/invert", "invert()")}} (filter)</li>
+</ul>
+<span>L</span>
+
+<ul>
+ <li>{{CSSxRef("lab", "lab()")}} (colors)</li>
+ <li>{{CSSxRef("lch", "lch()")}} (colors)</li>
+ <li>{{CSSxRef("leader", "leader()")}}</li>
+ <li>{{CSSxRef("linear-gradient")}}</li>
+ <li>{{CSSxRef("local", "local()")}}</li>
+ <li>{{CSSxRef("log", "log()")}} (math)</li>
+</ul>
+<span>M</span>
+
+<ul>
+ <li>{{CSSxRef("transform-function/matrix", "matrix()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)</li>
+ <li>{{CSSxRef("max")}} (math)</li>
+ <li>{{CSSxRef("min")}} (math)</li>
+ <li>{{CSSxRef("minmax")}} (math)</li>
+ <li>{{CSSxRef("mod", "mod()")}} (math)</li>
+</ul>
+<span>O</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/opacity", "opacity()")}} (filter)</li>
+ <li>{{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)</li>
+</ul>
+<span>P</span>
+
+<ul>
+ <li>{{CSSxRef("paint")}}</li>
+ <li>{{CSSxRef("path", "path()")}} (shape)</li>
+ <li>{{CSSxRef("transform-function/perspective", "perspective()")}} (transform)</li>
+ <li>{{CSSxRef("polygon", "polygon()")}} (shape)</li>
+ <li>{{CSSxRef("pow", "pow()")}} (math)</li>
+</ul>
+<span>R</span>
+
+<ul>
+ <li>{{CSSxRef("radial-gradient")}}</li>
+ <li>{{CSSxRef("rem", "rem()")}} (math)</li>
+ <li>{{CSSxRef("repeat")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient")}}</li>
+ <li>rgb() (colors)</li>
+ <li>rgba() (colors)</li>
+ <li>{{CSSxRef("transform-function/rotate", "rotate()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)</li>
+ <li>{{CSSxRef("round", "round()")}} (math)</li>
+</ul>
+<span>S</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/saturate", "saturate()")}} (filter)</li>
+ <li>{{CSSxRef("transform-function/scale", "scale()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)</li>
+ <li>{{CSSxRef("filter-function/sepia", "sepia()")}} (filter)</li>
+ <li>{{CSSxRef("sign", "sign()")}} (math)</li>
+ <li>{{CSSxRef("sin", "sin()")}} (math)</li>
+ <li>{{CSSxRef("transform-function/skew", "skew()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/skewX", "skewX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/skewY", "skewY()")}} (transform)</li>
+ <li>{{CSSxRef("sqrt", "sqrt()")}} (math)</li>
+ <li>{{CSSxRef("steps", "steps()")}}</li>
+ <li>{{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)</li>
+ <li>{{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)</li>
+ <li>{{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)</li>
+ <li>{{CSSxRef("symbols", "symbols()")}}</li>
+</ul>
+<span>T</span>
+
+<ul>
+ <li>{{CSSxRef("tan", "tan()")}} (math)</li>
+ <li>{{CSSxRef("target-counter", "target-counter()")}}</li>
+ <li>{{CSSxRef("target-counters", "target-counters()")}}</li>
+ <li>{{CSSxRef("target-text", "target-text()")}}</li>
+ <li>{{CSSxRef("toggle", "toggle()")}}</li>
+ <li>{{CSSxRef("transform-function/translate", "translate()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translateX", "translateX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translateY", "translateY()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)</li>
+</ul>
+<span>U</span>
+
+<ul>
+ <li>{{CSSxRef("url()", "url()")}}</li>
+</ul>
+<span>V</span>
+
+<ul>
+ <li>{{CSSxRef("var")}}</li>
+</ul>
+</div>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td><code>toggle()</code>, <code>attr()</code>, <code>calc()</code>, <code>min()</code>, <code>max()</code>, <code>clamp()</code>, <code>round()</code>, <code>mod()</code>, <code>rem()</code>, <code>mod()</code>, <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>, <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, <code>exp()</code>, <code>abs()</code>, <code>sign()</code> の関数表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td><code>calc()</code> の関数表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td>{{Spec2("CSS4 Colors")}}</td>
+   <td><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> の関数表記にカンマなしの構文を追加。<br>
+    <code>rgb()</code> と <code>hsl()</code> にアルファ値を許可し、 <code>rgba()</code> と <code>hsla()</code> をそれらの (非推奨の) 別名とした。<br>
+    <code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 関数を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Colors")}}</td>
+   <td>{{Spec2("CSS3 Colors")}}</td>
+   <td><code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> の関数表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td><code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code> の関数表記を追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
+</ul>