このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

よく使われるマクロ

このページでは、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 つ目の引数に次の記事のスラッグを指定します。

コードサンプルの生成

ライブサンプル

汎用的な書式を追加

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 で定義されたブラウザー互換性データに掲載されている仕様書を使います。

関連情報