よく使われるマクロ

このページには MDN で使うために作られた汎用のマクロの大部分が掲載されています。 これらのマクロの使い方については、マクロの使い方を参照してください。

その他のマクロには、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。

リンク

MDN では、リファレンスページや用語集などへのリンクを簡単に作成するためのリンクマクロを多数提供しています。

リンクマクロは、簡潔で翻訳に適しているため、通常の Markdown リンクよりも推奨されます。 例えば、マクロを使って作成された用語集やリファレンスのリンクは、翻訳する必要がありません。 他のロケールでは、自動的に正しいバージョンのファイルへリンクされます。

用語集へのリンク

Glossary マクロは、 MDN の用語集の中の指定した用語の項目へのリンクを作成するのに使います。 このマクロは、 1 つの必須の引数または 2 つの任意の引数を受け付けます。

  1. 用語の名前("HTML" など): {{Glossary("HTML")}}HTML となります。
  2. オプション: 記事内で用語名の代わりに表示するテキスト: {{Glossary("CSS", "Cascading Style Sheets")}}Cascading Style Sheets となります。

リファレンスのページへのリンク

MDN の特定の参照領域(JavaScript、CSS、HTML 要素、SVG など)のページに、ロケールに依存しないリンクを張るためのマクロが用意されています。

マクロの使い方は簡単です。 必要なのは、第一引数にリンクするアイテムの名前を指定することだけです。 ほとんどのマクロは、第二引数で表示テキストを変更することができます(ドキュメントは、以下の左端のコラムのリンクから参照できます)。

マクロ リンク先のページ
CSSxRef CSS リファレンス (/Web/CSS/Reference) {{CSSxRef("cursor")}}cursor となります。
DOMxRef DOM リファレンス (/Web/API) {{DOMxRef("Document")}} または {{DOMxRef("document")}}Document になります。
{{DOMxRef("document.getElementsByName()")}}document.getElementsByName() になります。
{{DOMxRef("Node")}}Node になります。
第 2 引数を使用して表示するテキストを変更することができます。{{DOMxRef("document.getElementsByName()","getElementsByName()")}}getElementsByName() になります。
HTMLElement HTML 要素リファレンス (/Web/HTML/Element) {{HTMLElement("select")}}<select> になります。
JSxRef JavaScript リファレンス (/Web/JavaScript/Reference) {{JSxRef("Promise")}}Promise になります。
SVGAttr SVG の属性リファレンス (/Web/SVG/Attribute) {{SVGAttr("d")}}d になります。
SVGElement SVG 要素リファレンス (/Web/SVG/Element) {{SVGElement("view")}}<view> (en-US) になります。
HTTPHeader HTTP ヘッダー (/Web/HTTP/Headers) {{HTTPHeader("ACCEPT")}}ACCEPT になります。
HTTPMethod HTTP リクエストメソッド (/Web/HTTP/Methods) {{HTTPMethod("HEAD")}}HEAD になります。
HTTPStatus HTTP レスポンスステータスコード (/Web/HTTP/Status) {{HTTPStatus("404")}}404 になります。

複数のページからなるガイドのためのナビゲーション補助

PreviousNextPreviousNext は、一連の記事の中でのナビゲーションコントロールを提供します。一方向用のテンプレートでは、 前の または 次の 記事の Wiki 位置を指す 1 つの引数が必要です。 PreviousNext については、前の記事、次の記事を指す 2 つの引数を取ります。最初の引数が前の記事を指し、2 番めの引数が次の記事を指します。

コードのサンプル

ライブサンプル

サイドバーの生成

ほぼすべての大きなページの集まりについて、雛形があります。 典型的には、リファレンス、ガイド、チュートリアルでメインページに戻るためのリンク (パンくずリストではできないことがある) を提供し、記事を適切なカテゴリーに配置します。

  • CSSRef は CSS リファレンスページのサイドバーを生成します。
  • HTMLSidebar は HTML リファレンスページのサイドバーを生成します。
  • APIRef は Web API リファレンスページのサイドバーを生成します。

汎用的な書式化

API ドキュメントのためのインラインインジケーター

optional_inlineReadOnlyInline は API 文書の中で通常、オブジェクトのプロパティまたは関数の引数のリストを記述するのに使われます。

用法: {{Optional_Inline}} または {{ReadOnlyInline}} です。 例:

isCustomObject 読取専用

true の場合、オブジェクトはカスタムオブジェクトであることを示します。

parameterX 省略可

ごにょごにょごにょ...

状態と互換性についての表示

インラインインジケーター (追加引数なし)

標準外のもの

non-standard_inline は、その API が標準化されておらず、また標準化の予定もないことを示すインラインマークを付けます。

構文

{{Non-standard_Inline}}

  • アイコン: Non-standard

実験的なもの

experimental_inline は、その API が広く実装されておらず、また将来変更される可能性があることを示すインラインマークを付けます。 experimental の定義の詳細については、実験的、非推奨、廃止の記事を参照してください。

構文

{{Experimental_Inline}}

  • アイコン: Experimental

特定の技術の対応状況を表すインラインインジケーター

非推奨のもの

deprecated_inline はインラインの非推奨 (deprecated) マークを付け、その API が公式には非推奨であり、使用を控えるべきであることを示します。 deprecated の定義の詳細については、実験的、非推奨、廃止の記事を参照してください。

構文

{{Deprecated_Inline}}

  • アイコン: 非推奨

ページまたはセクションのヘッダーを示すインジケーター

これらのテンプレートが示すのは、上記の対応するインラインマークと同じものです。テンプレートはリファレンスページのメインページタイトルの (または、パンくずリストがあるならばその) 直下に置きます。 ページ内のセクションをマークアップすることもできます。

  • non-standard_header: {{Non-standard_Header}}

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

  • SeeCompatTable実験的な機能のドキュメントのページに使用してください。 例: {{SeeCompatTable}}

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

  • deprecated_header: {{Deprecated_Header}}

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

  • secureContext_header. インターフェイスページ、 API 概要ページ、 API エントリーポイント(例: navigator.xyz)などのメインページで使用が、通常メソッドやプロパティページなどのサブページでは使用するべきではありません。 例: {{SecureContext_Header}}

    安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

ウェブワーカーで使用できる機能であることを示す

AvailableInWorkers マクロは、その機能がウェブワーカーのコンテキストで有効であることを示すためのローカライズされた注釈ボックスを挿入するのに使われます。 引数 notservice を使用すると、ある機能がサービスワーカー以外のウェブワーカーで動作することを示すことができます。

構文
{{AvailableInWorkers}}
{{AvailableInWorkers("notservice")}}

注: この機能は Web Worker 内で利用可能です。

{{AvailableInWorkers("notservice")}}

ブラウザーの互換性と仕様書のマクロ

以下のマクロはすべてのリファレンスページに記載されていますが、すべてのページ型でも対応しています。

{{Compat}} / {{Compat(<feature>)}} / {{Compat(<feature>, <depth>)}}

引数として渡した機能の 互換性一覧表 を生成します。引数が指定されていない場合、フロントマターで browser-compat によって定義された機能が既定で指定されます。オプションの depth 引数は、どの程度の深さのサブ機能を表に追加するかを設定します。省略した場合は、既定で 1 となり、BCD から最初のレベルのサブ機能のデータのみが掲載されるという意味になります。

{{Specifications}} / {{Specifications(<feature>)}}

引数で指定した機能の仕様を掲載します。引数が渡されなかった場合、掲載される仕様書は、フロントマターに spec_urls の値が存在する場合はその値によって定義され、存在しない場合はフロントマターの browser-compat によって定義されたブラウザー互換性データに掲載されている仕様によって定義されます。仕様書は外部リンクとしてレンダリングされます。

関連情報