よく使われるマクロ

このページには MDN で使うために作られた汎用のマクロがたくさん掲載されています。これらのマクロの使い方については、 マクロの使い方 と リンクを生成するマクロ を見てください。 その他のマクロ には、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。また、MDNで使用できるマクロの完全な一覧はこちらのページにあります。

CSS スタイルガイドも見てください。

リンク

単一のハイパーリンクを作成する

一般的に、単なるリンクを作成するためにマクロを使う必要はありません。エディタインターフェイスにある リンク ボタン を使えば、リンクを作成できます。 

  • Glossary マクロは MDN 用語集の中の指定した用語のエントリへのリンクを作成するのに使います。このマクロは、1つの必須パラメータと2つの任意パラメータ:
    1. 用語の名前 (例えば "HTML")
    2. 用語の名前 の代わりに表示するテキスト 下記の例のように、英語の用語を日本語に変換する時などに使われます。 Optional
    3. ここで 0 以外を指定すると、用語集へのリンクに使われるカスタムスタイルが適用されません。Optional

    例:

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

いろいろなマクロがあり、MDN の指定したリファレンスエリア内のページへのリンクを作成することができます。

  • cssxref は、CSS リファレンスのページにリンクしています。
    例: {{CSSxRef("cursor")}} の結果は cursor になります
  • domxref は DOM リファレンス内のページにリンクします。最後にカッコを入れると、関数名のようにリンクが表示されます。
    たとえば、{{DOMxRef("document.getElementsByName()")}} は document.getElementsByName() になります。{{DOMxRef("Node")}} は Node になります
  • event は DOM イベントリファレンスのページにリンクします。たとえば、{{Event("change")}} は change になります
  • HTMLElement は HTML リファレンスの HTML 要素にリンクします
  • htmlattrxref は HTML 属性にリンクします。属性のみを指定する場合はグローバル属性の、属性名と要素名を指定する場合は特定の要素に関連付けられた属性の説明にリンクします。たとえば、{{HTMLAttrxRef("lang")}} はこのリンクを作成します：lang。{{HTMLAttrxRef("type","input")}} はこのリンクを作成します：type
  • jsxref は JavaScript リファレンスのページにリンクしています
  • SVGAttr は特定の SVG 属性にリンクします。たとえば、{{SVGAttr("d")}} はこのリンクを作成します：d
  • SVGElement は SVG リファレンスの SVG 要素にリンクしています
  • HTTPHeader は HTTP ヘッダーにリンクします
  • HTTPMethod は HTTP リクエストメソッドにリンクします
  • HTTPStatus は HTTP レスポンスステータスコードにリンクします

バグ、IRC へのリンク

  • バグ
    • bug を使うと、bugzilla.mozilla.org に登録されているバグへのリンクを簡単に作ることができます。文法は: {{Bug(123456)}} です。このリンクは: バグ 123456 となります
    • WebkitBug は WebKit バグのデータベースへのリンクを挿入します。例えば {{WebkitBug(31277)}} はこうなります。WebKit bug 31277
  • IRCLink は指定した IRC チャネルへのリンクを挿入します。このリンクは、IRC クライアントが必要であることを表示するツールチップ付きです

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

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

コードのサンプル

Live サンプル

添付されたサンプルファイル

  • Embed_text テンプレートは添付されたテキストファイルを記事の中に埋め込むのに使います。これは、コードスニペットをダウンロードできるようにし、また同時に表示したい場合に役に立ちます。文法ハイライトのために、オプションとして言語を指定することもできます。指定しない場合は、テキストは整形せずに埋め込まれます。最初の引数は埋め込む添付ファイル名で、2番めは、もしあれば、文法ハイライトを適用するための言語となります。例えば "javascript"、"svg"、"cpp" などです
  • EmbedSVG は添付された XML ファイルを SVG 画像として、ページのその場所に埋め込みます。添付 SVG ファイル名を指定します。Embed_text の直後に使えば、ソースとそのレンダリング結果を並べて表示することができます

サイドバーの生成

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

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

汎用の書式

API 文書のためのインラインインジケータ

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

用法: {{optional_inline()}} または {{ReadOnlyInline()}}. 例:

isCustomObject 読取専用
true の場合、オブジェクトはカスタムオブジェクトであることを示します。
parameterX Optional
ごにょごにょごにょ...

ステータスと互換性についての表示

インラインインジケータ （追加パラメータなし）

標準ではないもの

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

文法

{{non-standard_inline}}

例
  • アイコン:

実験的なもの

experimental_inline は、その API が広く実装されておらず、また将来変更される可能性があることを示すインラインマークを付けます。

文法

{{experimental_inline}}

例
  • アイコン:

インラインインジケータ (適用される技術を指定)

これらのマクロにパラメータを指定する場合は、"html", "js", "css", "gecko",のうちの1つにバージョン番号を加えたものとなります。

推奨されないもの

deprecated_inline はインラインの非推奨(deprecated) マークを付け、その API が公式には非推奨であり、使用を控えるべきであることを示します。注: 非推奨 (deprecated) が意味するのは、その項目はもう使用されるべきではないが、まだ機能するものであることです。もう機能しないものを示す用語としては、時代遅れ (obsolete) を使ってください。

ブラウザ特有の記述 (HTML, APIs, JS, CSS, …) では、引数を使用しないでください。

文法

{{deprecated_inline}} または {{deprecated_inline("gecko5")}}

例
  • アイコン:
  • バッジ: 非推奨 Gecko 5

時代遅れのもの

obsolete_inline はインラインの廃止 (obsolete) マークを付け、例えばその関数、メソッド、またはプロパティ等を使用してはいけないことを示します。

ブラウザ特有の記述 (HTML, APIs, JS, CSS, …) では、引数を使用しないでください。

文法

{{obsolete_inline}} または {{obsolete_inline("js1.8.5")}}

例

テンプレートバッジ

これらのマクロはほとんど WebAPI ページで使われます。Creating new badges に新しいバッジを作成するための情報があります。

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

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

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

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

  • 試験的な機能を説明するページでは SeeCompatTable を使用する必要があります。例: {{SeeCompatTable}}

    これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

  • deprecated_header: {{Deprecated_Header}}

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

  • deprecated_header with parameter: {{Deprecated_Header("gecko5")}}

    非推奨 Gecko 5 (Firefox 5 / Thunderbird 5 / SeaMonkey 2.2)
    この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

    ブラウザに依存しない領域 (HTML、API、JS、CSS など) でこのパラメータを使用しないでください
  • obsolete_header: {{Obsolete_Header}}

    廃止
    この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

  • obsolete_header with parameter: {{Obsolete_Header("gecko30")}}

    Gecko 30 で廃止 (Firefox 30 / Thunderbird 30 / SeaMonkey 2.27 / Firefox OS 1.4)
    この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

    ブラウザに依存しない領域 (HTML、API、JS、CSS など) でこのパラメータを使用しないでください
  • secureContext_header: {{SecureContext_Header}}

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

Web Worker で使用できる機能であることを示す

AvailableInWorkers マクロは、その機能が Web worker コンテクストで有効であることを示すためのローカライズされた注記ボックスを挿入するのに使われます。

註: この機能は Web Workers 内で利用可能です。

バージョン情報マクロ

これらのマクロは、コンテンツが特定のバージョンの製品にのみ関連することを示すために使用されます。

これらのマクロは、指定されたバージョンが現在の gecko リリースよりも十分に古い (現在は10バージョン) 場合には表示されません。

関連トピック