よく使われるマクロ
このページでは、MDN のビルドシステムである rari が MDN で使うために提供している汎用マクロの多くを紹介します。 MDN コンテンツでの一般的な使い方については、マクロの使い方を参照してください。
リンク
MDN では、用語集やリファレンスページなどへのリンクを簡単に作成するためのリンクマクロを多数提供しています。
リンクマクロは、簡潔で翻訳に適しているため、通常の Markdown リンクよりも推奨されます。 例えば、マクロを使って作成された用語集やリファレンスへのリンクは翻訳する必要がありません。他のロケールでは、自動的に適切なファイルにリンクされます。
これらのマクロについては、リンクマクロのページでも詳しく説明しています。
用語集の用語へのリンク
Glossary マクロは、MDN 用語集にある指定した用語のページへのリンクを作成します。
このマクロは、必須の引数を 1 つと、任意の引数を 1 つ受け付けます。
- 用語は必須の引数です。例えば、"HTML" の用語集ページへリンクするには
{{Glossary("HTML")}}と記述し、リンク HTML を生成します。 - 表示テキストは任意の引数です。例えば、前の例のリンクを
{{Glossary("HTML", "HyperText Markup Language")}}と記述すると、リンク HyperText Markup Language が生成されます。
リファレンスページへのリンク
MDN の特定のリファレンス領域(HTML、CSS、JavaScript、SVG、HTTP など)のページに、ロケールに依存しないリンクを張るためのマクロが用意されています。
マクロの使い方は簡単です。 第一引数にリンク先の項目名を指定するだけです。 用語集マクロと同様に、ほとんどのリファレンスマクロでは第 2 引数で表示テキストを変更できます。
詳しくは、次の表の最初の列にあるリンク先のソースファイルを参照してください。
| マクロ | リンク先のページ | 例 |
|---|---|---|
| CSSxRef | CSS リファレンス (/Web/CSS/Reference) |
{{CSSxRef("cursor")}} は cursor となります。{{CSSxRef(":hover")}} は :hover となります。{{CSSxRef("@media")}} は @media となります。{{CSSxRef("pow")}} は pow() となります。詳しくは、CSS リファレンスでの CSSxRef の使用を参照してください。
|
| DOMxRef | DOM リファレンス (/Web/API) |
{{DOMxRef("document")}} は Document になります。{{DOMxRef("document.getElementsByName()")}} は document.getElementsByName() になります。{{DOMxRef("Node")}} は Node になります。 |
| HTMLElement | HTML 要素リファレンス (/Web/HTML/Reference/Elements) |
{{HTMLElement("select")}} は <select> になります。
|
| JSxRef | JavaScript リファレンス (/Web/JavaScript/Reference) |
{{JSxRef("Promise")}} は Promise になります。
|
| SVGAttr | SVG の属性リファレンス (/Web/SVG/Reference/Attribute) |
{{SVGAttr("d")}} は d になります。
|
| SVGElement | SVG 要素リファレンス (/Web/SVG/Reference/Element) |
{{SVGElement("view")}} は <view> になります。
|
HTTPHeader
|
HTTP ヘッダー (/Web/HTTP/Reference/Headers) |
{{HTTPHeader("ACCEPT")}} は ACCEPT になります。
|
| HTTPMethod | HTTP リクエストメソッド (/Web/HTTP/Reference/Methods) |
{{HTTPMethod("HEAD")}} は HEAD になります。
|
| HTTPStatus | HTTP レスポンスステータスコード (/Web/HTTP/Reference/Status) |
{{HTTPStatus("404")}} は 404 になります。
|
複数ページのガイドにナビゲーション補助を追加
Previous、Next、PreviousNext は、一連の記事の中でのナビゲーションコントロールを提供します。
一方向用のマクロでは、前または次の記事のスラッグを 1 つだけ引数に指定します。
PreviousNext マクロは 2 つの引数を取り、最初の引数に前の記事のスラッグ、2 つ目の引数に次の記事のスラッグを指定します。
コードサンプルの生成
>ライブサンプル
EmbedLiveSampleはコードサンプルの出力をページに埋め込むのに使います。解説はライブサンプルのページにあります。LiveSampleLinkはコードサンプルの出力を含むページへのリンクを作成します。解説はライブサンプルのページにあります。EmbedGHLiveSampleを使うと、GitHub ページからライブサンプルを埋め込むことができます。 詳しい情報は GitHub ライブサンプルにあります。
汎用的な書式を追加
>API ドキュメントにインラインインジケーターを追加
Optional_Inline と ReadOnlyInline は API 文書の中で通常、オブジェクトのプロパティまたは関数の引数のリストを記述するのに使われます。
用法: {{Optional_Inline}} または {{ReadOnlyInline}} です。
例:
isCustomObject読取専用-
trueの場合、オブジェクトはカスタムオブジェクトであることを示します。 parameterX省略可-
…を示します。
状態と互換性のインジケーターを追加
>追加引数のないインラインインジケーター
標準外のもの
Non-standard_Inline は、その API が標準化されておらず、また標準化の予定もないことを示すインラインマークを付けます。
構文
{{Non-standard_Inline}}
例
- アイコン:
実験的なもの
Experimental_Inline は、その API が広く実装されておらず、また将来変更される可能性があることを示すインラインマークを付けます。
experimental の定義の詳細については、実験的、非推奨、廃止の記事を参照してください。
構文
{{Experimental_Inline}}
例
- アイコン:
技術を指定できるインラインインジケーターを追加
非推奨のもの
Deprecated_Inline はインラインの非推奨 (deprecated) マークを付け、その API が公式には非推奨(または削除済み)であり、使用を控えるべきであることを示します。
deprecated の定義の詳細については、実験的、非推奨、廃止の記事を参照してください。
構文
{{Deprecated_Inline}}
例
- アイコン:
ページまたはセクションのヘッダーを示すインジケーター
これらのテンプレートは、前述の対応するインラインマークと同じ意味を持ちます。 テンプレートはリファレンスページのメインタイトル(パンくずリストがある場合はその下)の直下に置きます。 ページ内のセクションをマークアップすることもできます。
Non-standard_Header:{{Non-standard_Header}}非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
SeeCompatTableは実験的な機能のドキュメントのページに使用してください。 例:{{SeeCompatTable}}Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。SecureContext_Header. インターフェイスページ、API 概要ページ、API エントリーポイント(例:navigator.xyz)などのメインページで使用します。通常、メソッドやプロパティページなどのサブページでは使用しません。 例:{{SecureContext_Header}}安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
ウェブワーカーで使用できる機能であることを示す
AvailableInWorkers マクロは、その機能がワーカーコンテキストで有効であることを示すためのローカライズされた注釈ボックスを挿入するのに使われます。
また、指定したワーカーコンテキストで機能が動作することを示す引数を渡すこともできます。
構文
{{AvailableInWorkers}}
{{AvailableInWorkers("window_and_worker_except_service")}}
例
メモ: この機能はウェブワーカー内で利用可能です。
ブラウザーの互換性と仕様書へのリンク
以下のマクロはすべてのリファレンスページに記載されていますが、すべてのページ型でも対応しています。
{{Compat}}-
フロントマターの
browser-compatで定義された機能の互換性一覧表を生成します。 {{Specifications}}-
フロントマターに
spec-urlsがある場合はそこに定義された機能の仕様書一覧表を挿入します。ない場合は、フロントマターのbrowser-compatで定義されたブラウザー互換性データに掲載されている仕様書を使います。