よく使われるマクロ
このページには MDN で使うために作られた汎用のマクロの大部分が掲載されています。 これらのマクロの使い方については、マクロの使い方を参照してください。
その他のマクロには、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。
リンク
MDN では、リファレンスページや用語集などへのリンクを簡単に作成するためのリンクマクロを多数提供しています。
リンクマクロは、簡潔で翻訳に適しているため、通常の Markdown リンクよりも推奨されます。 例えば、マクロを使って作成された用語集やリファレンスのリンクは、翻訳する必要がありません。 他のロケールでは、自動的に正しいバージョンのファイルへリンクされます。
用語集へのリンク
Glossary
マクロは、 MDN の用語集の中の指定した用語の項目へのリンクを作成するのに使います。
このマクロは、 1 つの必須の引数または 2 つの任意の引数を受け付けます。
- 用語の名前("HTML" など):
{{Glossary("HTML")}}
は HTML となります。 - オプション: 記事内で用語名の代わりに表示するテキスト:
{{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> になります。
|
HTTPHeader
|
HTTP ヘッダー (/Web/HTTP/Headers) |
{{HTTPHeader("ACCEPT")}} は ACCEPT になります。
|
HTTPMethod | HTTP リクエストメソッド (/Web/HTTP/Methods) |
{{HTTPMethod("HEAD")}} は HEAD になります。
|
HTTPStatus | HTTP レスポンスステータスコード (/Web/HTTP/Status) |
{{HTTPStatus("404")}} は 404 になります。
|
複数のページからなるガイドのためのナビゲーション補助
Previous
、Next
、PreviousNext
は、一連の記事の中でのナビゲーションコントロールを提供します。一方向用のテンプレートでは、 前の または 次の 記事の Wiki 位置を指す 1 つの引数が必要です。 PreviousNext
については、前の記事、次の記事を指す 2 つの引数を取ります。最初の引数が前の記事を指し、2 番めの引数が次の記事を指します。
コードのサンプル
ライブサンプル
EmbedLiveSample
はコードサンプルの出力をページに埋め込むのに使います。解説はライブサンプルのページにあります。LiveSampleLink
はコードサンプルの出力を含むページへのリンクを作成します。解説はライブサンプルのページにあります。EmbedGHLiveSample
は GitHub ページからライブサンプルを埋め込むことができます。 詳しい情報は GitHub ライブサンプルにあります。
サイドバーの生成
ほぼすべての大きなページの集まりについて、雛形があります。 典型的には、リファレンス、ガイド、チュートリアルでメインページに戻るためのリンク (パンくずリストではできないことがある) を提供し、記事を適切なカテゴリーに配置します。
CSSRef
は CSS リファレンスページのサイドバーを生成します。HTMLSidebar
は HTML リファレンスページのサイドバーを生成します。APIRef
は Web API リファレンスページのサイドバーを生成します。
汎用的な書式化
API ドキュメントのためのインラインインジケーター
optional_inline
と ReadOnlyInline
は API 文書の中で通常、オブジェクトのプロパティまたは関数の引数のリストを記述するのに使われます。
用法: {{Optional_Inline}}
または {{ReadOnlyInline}}
です。
例:
isCustomObject
読取専用-
true
の場合、オブジェクトはカスタムオブジェクトであることを示します。 parameterX
省略可-
ごにょごにょごにょ...
状態と互換性についての表示
インラインインジケーター (追加引数なし)
標準外のもの
non-standard_inline
は、その API が標準化されておらず、また標準化の予定もないことを示すインラインマークを付けます。
構文
{{Non-standard_Inline}}
例
- アイコン: 非標準
実験的なもの
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")}}
例
メモ: この機能はウェブワーカー内で利用可能です。
メモ: この機能はウェブワーカー内で利用可能です。
ブラウザーの互換性と仕様書のマクロ
以下のマクロはすべてのリファレンスページに記載されていますが、すべてのページ型でも対応しています。
{{Compat}}
/{{Compat(<feature>)}}
/{{Compat(<feature>, <depth>)}}
-
引数として渡した機能の 互換性一覧表 を生成します。引数が指定されていない場合、フロントマターで
browser-compat
によって定義された機能が既定で指定されます。オプションの depth 引数は、どの程度の深さのサブ機能を表に追加するかを設定します。省略した場合は、既定で 1 となり、BCD から最初のレベルのサブ機能のデータのみが掲載されるという意味になります。 {{Specifications}}
/{{Specifications(<feature>)}}
-
引数で指定した機能の仕様を掲載します。引数が渡されなかった場合、掲載される仕様書は、フロントマターに
spec_urls
の値が存在する場合はその値によって定義され、存在しない場合はフロントマターのbrowser-compat
によって定義されたブラウザー互換性データに掲載されている仕様によって定義されます。仕様書は外部リンクとしてレンダリングされます。
関連情報
- サイドバーマクロ
- ページテンプレート
- ページコンポーネント
- 機能状態マクロ
- マクロの一覧 (GitHub)