---
title: よく使われるマクロ
slug: MDN/Structures/Macros/Commonly-used_macros
tags:
  - CSS
  - Macros
  - Reference
  - Structures
translation_of: MDN/Structures/Macros/Commonly-used_macros
---
<p>{{MDNSidebar}}</p>

<p><span class="seoSummary">このページには MDN で使うために作られた汎用のマクロがたくさん掲載されています。これらのマクロの使い方については、<a href="/ja/docs/MDN/Contribute/Structures/Macros"> マクロの使い方</a> と <a href="/ja/docs/MDN/Contribute/Editor/Links#Using_link_macros">リンクを生成するマクロ</a> を見てください。</span> <a href="/ja/docs/MDN/Contribute/Structures/Macros/Other">その他のマクロ</a> には、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。また、<a href="/ja/dashboards/macros">MDNで使用できるマクロの完全な一覧</a>もあります。</p>

<p><a href="/ja/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS スタイルガイド</a>も見てください。</p>

<h2 id="Linking" name="Linking">リンク</h2>

<h3 id="Creating_a_single_hyperlink" name="Creating_a_single_hyperlink">単一のハイパーリンクを作成する</h3>

<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">一般的に、単なるリンクを作成するためにマクロを使う必要はありません。エディターインターフェイスにある <strong>リンク</strong> ボタンを使えば、リンクを作成できます。</p>

<ul>
 <li>{{TemplateLink("Glossary")}} マクロは MDN <a href="/ja/docs/Glossary">用語集</a>の中の指定した用語のエントリへのリンクを作成するのに使います。このマクロは、1つの必須の引数または2つの任意の引数を受け付けます。

  <p>例:</p>

  <ol>
   <li>用語の名前 (例えば "HTML")</li>
   <li>用語の名前の代わりに記事内に表示するテキスト (これはあまり使用するべきではありません)。 {{Optional_Inline}}</li>
   <li>この引数が指定されており 0 以外である場合、用語集へのリンクに使われるカスタムスタイルが適用されません。{{Optional_Inline}}</li>
  </ol>

  <ul>
   <li><code>\{{Glossary("HTML")}}</code> の表示は {{Glossary("HTML")}} となり、</li>
   <li><code>\{{Glossary("CSS", "カスケーディングスタイルシート")}}</code> の表示は {{Glossary("CSS", "カスケーディングスタイルシート")}} となり、</li>
   <li><code>\{{Glossary("HTML", "", 1)}}</code> の表示は {{Glossary("HTML", "", 1)}} となります。</li>
  </ul>
 </li>
 <li>{{TemplateLink("anch")}} - ページ内の節へのリンクを生成
  <ul>
   <li><code>\{{anch("Linking to pages in references")}}</code></li>
   <li>
    <p>デモ: {{anch("Linking to pages in references")}}</p>
   </li>
  </ul>
 </li>
</ul>

<h3 id="Linking_to_pages_in_references" name="Linking_to_pages_in_references">リファレンス内のページへのリンク</h3>

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

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

<h3 id="Linking_to_bugs" name="Linking_to_bugs">バグへのリンク</h3>

<ul>
 <li>バグ
  <ul>
   <li>{{TemplateLink("bug")}} を使うと、 bugzilla.mozilla.org に登録されているバグへのリンクを簡単に作ることができます。文法は <code>\{{Bug(123456)}}</code> です。 {{Bug(123456)}} のようなリンクになります。</li>
   <li>{{TemplateLink("WebkitBug")}} は WebKit バグのデータベースへのリンクを挿入します。例えば <code>\{{WebkitBug(31277)}}</code> は {WebkitBug(31277)}} のようになります。</li>
  </ul>
 </li>
</ul>

<h3 id="Navigation_aids_for_multi-page_guides" name="Navigation_aids_for_multi-page_guides">複数のページからなるガイドのためのナビゲーション補助</h3>

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

<h2 id="Code_samples" name="Code_samples">コードのサンプル</h2>

<h3 id="Live_samples" name="Live_samples">Live サンプル</h3>

<ul>
 <li>{{TemplateLink("EmbedLiveSample")}} はコードサンプルの出力をページに埋め込むのに使います。解説は <a href="/ja/docs/MDN/Contribute/Structures/Live_samples">Live サンプル</a>のページにあります</li>
 <li>{{TemplateLink("LiveSampleLink")}} はコードサンプルの出力を含むページへのリンクを作成します。解説は <a href="/ja/docs/MDN/Contribute/Structures/Live_samples">Live サンプル</a>のページにあります</li>
</ul>

<h2 id="Sidebar_generation" name="Sidebar_generation">サイドバーの生成</h2>

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

<ul>
 <li>{{TemplateLink("CSSRef")}} は CSS リファレンスページのサイドバーを生成します</li>
 <li>{{TemplateLink("HTMLRef")}} は HTML リファレンスページのサイドバーを生成します</li>
 <li>{{TemplateLink("APIRef")}} は Web API リファレンスページのサイドバーを生成します</li>
</ul>

<h2 id="General-purpose_formatting" name="General-purpose_formatting">汎用の書式</h2>

<h3 id="Inline_indicators_for_API_documentation" name="Inline_indicators_for_API_documentation">API 文書のためのインラインインジケーター</h3>

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

<p>用法: <code>\{{optional_inline()}}</code> または <code>\{{ReadOnlyInline}}</code>. 例:</p>

<dl>
 <dt><code>isCustomObject</code>{{ReadOnlyInline}}</dt>
 <dd><code>true</code> の場合、オブジェクトはカスタムオブジェクトであることを示します。</dd>
 <dt><code>parameterX</code>{{Optional_Inline}}</dt>
 <dd>ごにょごにょごにょ...</dd>
</dl>

<h2 id="Status_and_compatibility_indicators" name="Status_and_compatibility_indicators">状態と互換性についての表示</h2>

<h3 id="Inline_indicators_with_no_additional_parameters" name="Inline_indicators_with_no_additional_parameters">インラインインジケーター (追加引数なし)</h3>

<h4 id="Non-standard" name="Non-standard">標準外のもの</h4>

<p>{{TemplateLink("non-standard_inline")}} は、その API が標準化されておらず、また標準化の予定もないことを示すインラインマークを付けます。</p>

<h5 id="Syntax" name="Syntax">構文</h5>

<p><code>\{{Non-standard_Inline}}</code></p>

<h5 id="Examples" name="Examples">例</h5>

<ul>
 <li>アイコン: {{Non-standard_Inline}}</li>
</ul>

<h4 id="Experimental" name="Experimental">実験的なもの</h4>

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

<h5 id="Syntax_2" name="Syntax_2">構文</h5>

<p><code>\{{Experimental_Inline}}</code></p>

<h5 id="Examples_2" name="Examples_2">例</h5>

<ul>
 <li>アイコン: {{Experimental_Inline}}</li>
</ul>

<h3 id="Inline_indicators_that_support_specifying_the_technology" name="Inline_indicators_that_support_specifying_the_technology">特定の技術の対応状況を表すインラインインジケーター</h3>

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

<h4 id="Deprecated" name="Deprecated">非推奨のもの</h4>

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

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

<h5 id="Syntax_3" name="Syntax_3">構文</h5>

<p><code>\{{Deprecated_Inline}}</code> または <code>\{{Deprecated_Inline("gecko5")}}</code></p>

<h5 id="Examples_3" name="Examples_3">例</h5>

<ul>
 <li>アイコン: {{Deprecated_Inline}}</li>
 <li>バッジ: {{Deprecated_Inline("gecko5")}}</li>
</ul>

<h4 id="Obsolete" name="Obsolete">廃止</h4>

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

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

<h5 id="Syntax_4" name="Syntax_4">構文</h5>

<p><code>\{{Obsolete_Inline}}</code> または <code>\{{Obsolete_Inline("js1.8.5")}}</code></p>

<h5 id="Examples_4" name="Examples_4">例</h5>

<ul>
 <li>アイコン: {{Obsolete_Inline}}</li>
 <li>バッジ: {{Obsolete_Inline("js1.8.5")}}</li>
</ul>

<h3 id="Template_badges" name="Template_badges">テンプレートバッジ</h3>

<p>これらのマクロはほとんど <a href="/ja/docs/Web/API">WebAPI</a> ページで使われます。{{anch("Creating new badges")}} に新しいバッジを作成するための情報があります。</p>

<h3 id="Page_or_section_header_indicators" name="Page_or_section_header_indicators">ページまたはセクションのヘッダーを示すインジケーター</h3>

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

<ul>
 <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_Header}}</code> {{Non-standard_Header}}</li>
 <li><a href="/ja/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">実験的な機能</a>を説明するページでは {{TemplateLink("SeeCompatTable")}} を使用する必要があります。例: <code>\{{SeeCompatTable}}</code> {{SeeCompatTable}}</li>
 <li>{{TemplateLink("deprecated_header")}}: <code>\{{Deprecated_Header}}</code> {{Deprecated_Header}}</li>
 <li>{{TemplateLink("deprecated_header")}} with parameter: <code>\{{Deprecated_Header("gecko5")}}</code> {{Deprecated_Header("gecko5")}} ブラウザーに依存しない領域 (HTML、API、JS、CSS など) でこの引数を使用しないでください</li>
 <li>{{TemplateLink("obsolete_header")}}: <code>\{{Obsolete_Header}}</code> {{Obsolete_Header}}</li>
 <li>{{TemplateLink("obsolete_header")}} with parameter: <code>\{{Obsolete_Header("gecko30")}}</code> {{Obsolete_Header("gecko30")}} ブラウザーに依存しない領域 (HTML、API、JS、CSS など) でこの引数を使用しないでください</li>
 <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li>
</ul>

<h3 id="Indicating_that_a_feature_is_available_in_web_workers" name="Indicating_that_a_feature_is_available_in_web_workers">ウェブワーカーで使用できる機能であることを示す</h3>

<p>{{TemplateLink("AvailableInWorkers")}} マクロは、その機能が<a href="/ja/docs/Web/API/Web_Workers_API">ウェブワーカー</a>のコンテキストで有効であることを示すためのローカライズされた注記ボックスを挿入するのに使われます。</p>

<p>{{AvailableInWorkers}}</p>