---
title: ナビゲーションサイドバーの使い方
slug: MDN/Contribute/Howto/Use_navigation_sidebars
tags:
  - Documentation
  - Draft
  - HTML
  - MDN
  - MDN Meta
  - MDN Web Docs
  - Macros
  - Meta
  - NeedsContent
  - Tutorial
  - sidebars
  - マクロ
translation_of: MDN/Contribute/Howto/Use_navigation_sidebars
---
<p>{{MDNSidebar}}{{Draft}}</p>

<p>MDN の操作はよくサイドバーを用いて行われ、これは一連の記事や、同じ系列のドキュメントと MDN の他の領域の両方における関連コンテンツを列挙します。 <span class="seoSummary">MDN のサイドバーは自動的には生成されません。ページにサイドバーを入れるには、いくらかのマクロを作成し使用する必要があります。この記事では、 MDN サイドバーマクロの作成と記事内での使用方法の両方の手順を確認します。</span></p>

<h2 id="Current_MDN_sidebar_macros" name="Current_MDN_sidebar_macros">現在の MDN のサイドバーマクロ</h2>

<p>MDN には既に、サイドバーを生成するたくさんのマクロがあります。多くは MDN の特定のセクションに特化していますが、他に、特化したものがない文書領域のための一般的なサイドバーを生成するためのものがあります。</p>

<dl>
 <dt>{{TemplateLink("AddonSidebar")}}</dt>
 <dd>アドオンの文書を操作するためのサイドバーを挿入します。これは主にブラウザー拡張機能の作成についてのコンテンツです。</dd>
 <dt>{{TemplateLink("APIRef")}}</dt>
 <dd>API インターフェイスのリファレンスページおよびサブページで使用されるサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("CanvasSidebar")}}</dt>
 <dd>HTML/DOM Canvas の文書の中で使用されるサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("DefaultAPISidebar")}}</dt>
 <dd>特化したサイドバーのタイプがない API の API 概要ページで使用することができる既定のサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("FirefoxSidebar")}}</dt>
 <dd>Firefox に特化した文書で使用されるサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("GamesSidebar")}}</dt>
 <dd>ウェブ技術を使ったゲーム開発に関する MDN のコンテンツを操作するサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("HTMLSidebar")}}</dt>
 <dd>MDN の HTML 文書で使用されるサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("HTTPSidebar")}}</dt>
 <dd>MDN の HTTP 文書内のページで使用するためのサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("JSSidebar")}}</dt>
 <dd>JavaScript 文書で使用するためのサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("LearnSidebar")}}</dt>
 <dd>学習エリアのサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("MDNSidebar")}}</dt>
 <dd>MDN の「メタ文書」、つまり、 MDN Web Docs サイト自体の利用や編集に関する文書を操作するサイドバーを挿入します。このページで実際にマクロが使われているのを見ることができます。</dd>
 <dt>{{TemplateLink("ServiceWorkerSidebar")}}</dt>
 <dd>サービスワーカーについての文書で使用されるサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("SpiderMonkeySidebar")}}</dt>
 <dd>SpiderMonkey (Mozilla の JavaScript エンジン) のページに使用するサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("ToolsSidebar")}}</dt>
 <dd>Firefox 開発ツールについてのページを列挙するサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("WebAssemblySidebar")}}</dt>
 <dd>WebAssembly に関するリンクを含むサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("WebExtAPISidebar")}}</dt>
 <dd>ブラウザー拡張 (WebExtension) についての API リファレンス文書を操作するために使われるサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("WebGLSidebar")}}</dt>
 <dd>WebGL に関するコンテンツの操作を提供するサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("WebRTCSidebar")}}</dt>
 <dd>MDN の WebRTC 文書の操作を提供するコンテンツのサイドバーを挿入します。</dd>
 <dt>{{TemplateLink("XSLTRef")}}</dt>
 <dd>XSLT, EXSLT, XPath についての文書のサイドバーを挿入します。</dd>
</dl>

<h2 id="Using_sidebars" name="Using_sidebars">サイドバーの使用</h2>

<p>サイドバーをページに追加するには、正しいマクロを探し、それから、サイドバーを挿入したいページで、「編集」ボタンをクリックしてください。ページに {{HTMLElement("p")}} ブロックを追加して、中身はマクロを呼ぶだけにしてください。そうすれば、マクロ呼び出しを追加することができます。通常、サイドバーマクロは引数を必要としませんので、単に次のように書くことができます。</p>

<pre class="brush: html; no-line-numbers notranslate">&lt;p&gt;\{{MDNSidebar}}&lt;/p&gt;</pre>

<p>通常は、これを文書の最初の行に入れてください。一部の文書では、代わりに末尾に入っています。これはうまく動作しますが、一貫性を保証するために、できれば先頭に配置してみてください。</p>

<p>すでにマクロを呼び出す {{HTMLElement("p")}} ブロックがページの先頭にある場合、例えばバナーを生成する <code>\{{Non-standard_Header}}</code> などがある場合は、次のように同じ {{HTMLElement("p")}} の中にサイドバーのマクロを入れることができます。</p>

<pre class="brush: html; no-line-numbers notranslate">&lt;p&gt;\{{HTTPSidebar}}\{{Non-standard_Header}}&lt;/p&gt;</pre>

<h2 id="Creating_sidebars" name="Creating_sidebars">サイドバーの作成</h2>

<p><em>詳細は執筆中</em></p>

<p>{{TemplateLink("SidebarUtilities")}} について触れておきます。</p>

<p>サイドバーの構築に役立つマクロがいくつかあります。</p>

<dl>
 <dt>{{TemplateLink("ListSubpagesForSidebar")}}</dt>
 <dd>指定されたページのサブページを使用して、サイドバー内で利用するために構築されたリンクのツリーを生成します。</dd>
</dl>