CSS 関数ページのテンプレート

メモ: この説明文全体を削除してから公開してください。

訳注: このテンプレートは翻訳記事用です。新たな記事を執筆する場合は、英語版を参照してください。日本語の単独記事を立項することはできません。）

ページのフロントマター:

ページ上部のフロントマターは「ページのメタデータ」を定義するために使用します。値は具体的な関数に応じて適切に更新してください。括弧が存在するか否かに注意してください。

---
title: NameOfTheFunction()
slug: Web/CSS/NameOfTheFunction
l10n:
  sourceCommit: 翻訳元コミットID
---

title: title の値はページの先頭に表示されます。タイトルの書式は NameOfTheFunction() です。例えば、 pow() (en-US) プロパティのタイトルは pow() です。
slug: slug の値はhttps://developer.mozilla.org/ja/docs/ の後にくる URL の末尾です。これは Web/CSS/NameOfTheFunction のような書式です。スラッグには括弧が付かないことに注意してください。例えば、 pow() (en-US) 関数のスラッグは Web/CSS/pow です。
sourceCommit: （翻訳記事のみ）この記事の翻訳元となる英語版記事を GitHub にコミットした際のコミット ID を記述します。 GitHub 上で英語版記事のコミット ID を確認してください。

ページ先頭のマクロ

コンテンツ部の上部（ページのフロントマターのすぐ下）には、いくつかのマクロ呼び出しが現れます。 訳注: 英語版では以下のマクロは自動的に更新されますが、翻訳記事では更新されませんので、翻訳時に手動で英語版のマクロに合わせてください。

{{SeeCompatTable}} — これは これは実験的な機能です。 のバナーを生成し、この技術が実験的であることを示します。実験的なもので、その技術が Firefox の設定で隠されている場合は、 Firefox での実験的な機能ページにもそのためのエントリーを記入する必要があります。
{{Deprecated_Header}} — これは 非推奨 バナーを生成し、この技術の使用を避けるべきであることを示します。
{{Non-standard_Header}} — これは 標準外 バナーを生成し、この機能がどの仕様書にもないことを示します。

下記のアドバイスに従って、以下のマクロを更新または削除してください。

{{CSSRef}}: このマクロはすべての CSS ページに置く必要があります。ページに記載したタグに応じて、適切な CSS サイドバーを生成します。
このページをコピーする際には、 {{MDNSidebar}} マクロを外すのを忘れないでください。

訳注: 英語版では状態ヘッダーマクロは自動的に更新されますが、翻訳記事では更新されません。翻訳時に英語版に合わせて手動で更新してください。

実験的、非推奨、標準外 の各バナーは、このメモブロックの直後に表示しています。

ページ内のその他のマクロ

形式文法の節の内容は {{CSSSyntax}} マクロを使用して生成します。このマクロは @webref/css npm パッケージを使用して仕様書からデータを取得します。
仕様書とブラウザーの互換性の節: ビルドツールは自動的にページのフロントマターから browser-compat のキーと値のペアを用いて、仕様書とブラウザーの互換性の節にデータを挿入します（それぞれこれらの節の {{Specifications}} および {{Compat}} マクロを置き換えます）。なお、最初の段階で Browser compat data リポジトリーに、関数とその仕様書の項目を作成/更新する必要があるかもしれません。項目の追加や編集の情報については、互換性一覧表のガイドを参照してください。

この説明文全体を削除してから公開してください。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

ページのコンテンツは導入段落から始めましょう。関数名から始め、それが何をするのかを買いてください。これはできれば 1 つか 2 つの短い文章にしてください。

試してみましょう

このタイトルは {{EmbedInteractiveExample}} マクロで自動生成されます。

この節は {{EmbedInteractiveExample}} マクロを使用して追加したインタラクティブサンプルのためのものです。この例は mdn/interactive-examples リポジトリーに作成します。詳しくはガイドラインのインタラクティブサンプルの節を参照してください。

構文

関数が受け入れることのできる引数の例を含め、構文の主な使用例を示す CSS コードブロックを記載してください。関数そのもののみを記載してください。関数が出現する宣言は完全に記載してはいけません。例えば、grid-template-columns: minmax(min-content, 300px) ではなく minmax(200px, 1fr) を使用してください。

構文の行をセミコロンで終わらせないでください。これは、ここでは完全に有効な CSS コードを示すのではなく、構文の使い方だけを示していることを強調する必要があります。

関数が取りうるすべての呼び出しパターンを示します。そのようなすべてのケースの前に、使用する用途を記述するコメントと、引数に名前を付け、構文の区切りや引数の順序を強調するコメントを追加します。コメント中の引数名は、「引数」の節に掲載されている引数名と一致するようにしてください。

それぞれの呼び出しパターンを示すコメントには、正確に 1 行の空行が続けてください。

例えば、次のようにします。

css

/* 代替値なし */
/* var( <custom-property-name> ) */
var(--custom-prop)

/* 空の代替値 */
/* var( <custom-property-name> , ) */
var(--custom-prop,)

/* 代替値あり */
/* var( <custom-property-name> , <declaration-value> ) */
var(--custom-prop, initial)
var(--custom-prop, #FF0000)
var(--my-background, linear-gradient(transparent, aqua), pink)
var(--custom-prop, var(--default-value))
var(--custom-prop, var(--default-value, red))

引数

関数が受け入れられる引数を <dl> として列挙します。これらの引数は構文の節に現れる順番に並べてください。引数がオプションの場合は optional_inline バッジを使用して示します。引数それぞれに 1 つずつ用語と定義を記載してください。

<custom-property-name>: 引数の説明、データ型、既定値がある場合はその値を記載してください。
<declaration-value> 省略可: 引数の説明、データ型、既定値がある場合はその値を記載してください。

返値

関数が返す値を説明します。例えば、「<number> または <dimension> を返します。」というように、「返します」という言葉で説明を終えます。

解説

この節はオプションですが推奨されます。これは、このプロパティについての解説と、これがどのように動作するのかを説明するオプションの節です。この節を使用して、関連の用語を説明したり、プロパティの用途を追加したりします。

形式文法

すべての関数に形式文法があるとは限りません。形式文法がない関数の場合は、この節全体を省略してください。

{{CSSSyntax}}

このマクロを使用するには、 Markdown ファイルの逆引用符とバックスラッシュを除去してください。

例

英語版では、ページ内に例が 1 つしかない場合でも、複数形の "Examples" を使用していることに留意してください。

説明的な見出し

それぞれの例には、その例を説明する H3 見出し (###) がなければなりません。見出しは例が何を行っているかを説明するものであるべきです。例えば、「単純な例」というのは例について何も説明していないので、良い見出しとは言えません。見出しは簡潔であるべきです。より詳しい説明をする場合は、見出しの後の段落を使用してください。

詳しくは、サンプルコードを追加する方法のガイドをご覧ください。

メモ: 他のページで紹介されている例にリンクしたい場合もあるでしょう。

シナリオ 1: このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。

このページのそれぞれの例に H3 見出し (###) を記載し、最後に H3 見出し (###) に「その他の例」というテキストを入れ、その下に他のページの例へのリンクを貼ることができます。例えば次のようにします。

## 例

### polygon() 関数の使用

polygon() の例

### その他の例

他のページにある他の例へのリンク

シナリオ 2: このページには何も例がなく、他のページにだけある場合。

H3 の見出しは追加せず、 H2 の見出し「例」の下に直接リンクを追加してください。例えば次のようにします。

## 例

この関数の例については、 [basic-shape のページ](https://example.org)を参照してください。

CSS 関数ページのテンプレート

試してみましょう

構文

引数

返値

解説

形式文法

例

説明的な見出し

アクセシビリティの考慮

Specifications

ブラウザーの互換性

関連情報