path: root/files/ja/mdn/editor/basics/toolbar/index.html

---
title: MDN エディターのツールバー
slug: MDN/Editor/Basics/Toolbar
tags:
  - Beginner
  - MDN Meta
  - Reference
  - editor
translation_of: MDN/Editor/Basics/Toolbar
---
<div>{{MDNSidebar}}</div><p class="summary">エディターのツールバーは、作業時に記事の見た目や流れを調整する機能を提供します。この記事ではツールバーの各コントロールについて記述します。</p>

<p>2行のボタンがあり、3列目はあなたがどこにいるかを導くHTML要素があります。下記のスクリーンショットでは、例えば、トップレベルの <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" title="The HTML &lt;p> element represents a paragraph of text."><code>&lt;p&gt;</code></a> ブロックを編集しています。</p>

<p><img alt="Screenshot of the toolbar, with labels for the button groups" src="https://mdn.mozillademos.org/files/15269/toolbar-labeled.png" style="border-style: solid; border-width: 2px; float: right; height: 142px; width: 725px;">ツールバーボタンは9つのグループに別れます。それぞれ見ていきましょう; 各グループのボタンを左から順に詳しく見ていきます。</p>

<ul>
 <li><a href="#Document_group">Document</a></li>
 <li><a href="#Edit_functions_group">Edit functions</a></li>
 <li><a href="#Text_processing_group">Text processing</a></li>
 <li><a href="#Display_group">Display</a></li>
 <li><a href="#Inline_styles_group">Inline styles</a></li>
 <li><a href="#Hyperlinking_group">Hyperlinking</a></li>
 <li><a href="#Custom_styles_group">Custom styles</a></li>
 <li><a href="#Blocks_group">Blocks</a></li>
 <li><a href="#Lists_and_flow_group">Lists and flow</a></li>
 <li><a href="#Media_group">Media</a></li>
</ul>

<h2 id="Document_group" name="Document_group">ドキュメント(Document)グループ</h2>

<p>ドキュメントグループはドキュメントレベルの操作オプションを提供します。</p>

<dl>
 <dt>ソース</dt>
 <dd>The <strong>Source</strong> button lets you toggle between editing using the WYSIWYG interface and editing in raw HTML source mode. We <em>strongly</em> request that you try to avoid using source mode, as it's very easy to wind up with content that doesn't match our style guide or, worse, doesn't work right at all. Currently, though, the editor has some quirks that make it impossible to do certain things without resorting to source mode. See <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode">Using source mode in the MDN editor</a> for details on how to use source mode and the dos and don'ts involved.</dd>
 <dt>公開</dt>
 <dd>メインの <strong>公開</strong> ボタンと同様</dd>
</dl>

<div class="note">
<p>If you try to save your edit and your changes are rejected as invalid, but the content is in fact appropriate for MDN, you should <a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&amp;body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">email the writing team</a> for help getting your content posted.</p>
</div>

<dl>
 <dt>プレビュー</dt>
 <dd>メインの <strong>プレビュー</strong> ボタンと同様</dd>
</dl>

<h2 id="Edit_functions" name="Edit_functions">編集機能(Edit functions)グループ</h2>

<p>編集機能はよくあるアプリケーションの<strong>編集</strong>メニューの対応オプションに似ています。</p>

<dl>
 <dt>貼り付け</dt>
 <dd>システムクリップボードの中身をエディターペインに貼り付ける</dd>
 <dt>プレーンテキストとして貼り付け</dt>
 <dd>テキスト貼り付けのダイアログを表示する; テキストは全てスタイリングがはがされ、その結果気づかずに望まないスタイリングをサイトのコンテンツに入れることがなくなります。テキストを貼り付けたら、(追加で) 変更もできて、次にボタンをクリックして作業中の記事に挿入します。</dd>
 <dd>
 <div class="note">
 <p>When pasting content into MDN, please be aware that, if pasting styled content (including, for example, syntax highlighting in code being copied from another site), you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).</p>
 </div>
 </dd>
 <dt>元に戻す</dt>
 <dd>最後の操作を元に戻します</dd>
 <dt>やり直す</dt>
 <dd>最後にもとに戻した操作をやり直します</dd>
</dl>

<h2 id="Text_processing" name="Text_processing">テキスト処理(Text processing)グループ</h2>

<p>テキスト処理グループではテキスト操作のオプションを提供します。</p>

<dl>
 <dt>検索</dt>
 <dd>Opens the <strong>Find</strong> dialog box in "Find" mode, which lets you search your document for a specified string.</dd>
 <dt>置換</dt>
 <dd>Opens the <strong>Find</strong> dialog box in "Find and replace" mode, allowing you to find strings and replace them with new ones.</dd>
</dl>

<p>The <strong>Find</strong> and <strong>Replace</strong> buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.</p>

<dl>
 <dt>スペルチェック</dt>
 <dd>This button opens a menu with several items:
 <dl>
  <dt>Enable SCAYT/Disable SCAYT</dt>
  <dd>Activates or deactivates Spell Check As You Type (SCAYT)</dd>
  <dt>Options</dt>
  <dd>If SCAYT is activated, this opens the SCAYT dialog box to the tab containing options you can configure for SCAYT.</dd>
  <dt>Languages</dt>
  <dd>If SCAYT is activated, this opens the SCAYT dialog box to the Languages tab, where you can select what language to use for spell-checking dictionary.</dd>
  <dt>Dictionaries</dt>
  <dd>If SCAYT is activated, this opens the SCAYT dialog box to the Dictionaries tab, where you can specify a personal dictionary to use with SCAYT.</dd>
  <dt>About SCAYT</dt>
  <dd>If SCAYT is activated, this opens the SCAYT dialog box to the About tab.</dd>
  <dt>Check Spelling</dt>
  <dd>This opens a Spell Checker dialog box, in which you can check spelling in batch mode on an entire document. You can use the Grammar tab to check for grammar mistakes, or use the Thesaurus tab to search for synonyms of words in the document.</dd>
 </dl>
 </dd>
</dl>

<h2 id="Display" name="Display">表示(Display)グループ</h2>

<p>表示グループはエディター画面の表示に影響するオプションを提供します。</p>

<dl>
 <dt>最大化</dt>
 <dd>このボタンは、エディターインターフェイス(つまり、ツールバーと編集ボックス) をブラウザーウィンドウ全体に拡大し、記述スペースを最大限使えます。</dd>
 <dt>ブロック表示</dt>
 <dd>このボタンは、文書内のブロック要素の外枠を出現させます。これはソースモードを使わずに文書構造を手軽にチェックする方法です。</dd>
</dl>

<h2 id="インラインスタイルInline_stylesグループ">インラインスタイル(Inline styles)グループ</h2>

<p>インラインスタイルグループは、テキストの塊に対して適用する、よくあるインラインスタイルを含みます。</p>

<dl>
 <dt>太字</dt>
 <dd>Toggles <strong>boldface</strong> text mode. It creates a {{htmlelement("strong")}} element.</dd>
 <dt>斜体</dt>
 <dd>Toggles <em>italic</em> text mode. It creates an {{htmlelement("em")}} element.</dd>
 <dt>下線</dt>
 <dd>Toggles <u>underlined</u> text mode. It creates a {{htmlelement("u")}} element.</dd>
 <dt>打ち消し線</dt>
 <dd>Toggles <s>strikethrough</s> mode. It creates an {{htmlelement("s")}} element.</dd>
 <dt>下付き</dt>
 <dd>Toggles subscript mode. It creates a {{htmlelement("sub")}} element.</dd>
 <dt>上付き</dt>
 <dd>Toggles superscript mode. It creates a {{htmlelement("sup")}} element. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.</dd>
 <dt>書式を解除</dt>
 <dd>Removes the current inline styles from the selection.</dd>
 <dt>コード</dt>
 <dd>Toggles <code>code </code>mode. It creates a {{htmlelement("code")}} element. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.</dd>
</dl>

<h2 id="Hyperlinking" name="Hyperlinking">ハイパーリンク(Hyperlinking)グループ</h2>

<p>ハイパーリンクグループは、ハイパーリンクに関するオプションを提供します。</p>

<dl>
 <dt>リンク挿入/編集</dt>
 <dd>Creates a new link. This button opens the link editor dialog, which is covered in <a href="/en-US/docs/MDN/Contribute/Editor/Links#Using_the_toolbar">Links using the toolbar</a>.</dd>
 <dt>リンクを削除</dt>
 <dd>Removes the link at the insertion point.</dd>
 <dt>アンカー挿入/編集</dt>
 <dd>Creates an anchor at the insertion point. Note that you don't need an anchor to link to a heading; the MDN editor automatically creates an <code>{{htmlattrxref("id")}}</code> for each heading that is the same as the heading text, with spaces replaced by underscores. For example, the heading of this section has an <code>id</code> whose value is <code>Hyperlinking_group</code>.</dd>
 <dt>リダイレクトを作成</dt>
 <dd>Inserts a redirect from this page to another. See <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Redirects#Creating_redirects">Creating redirects</a> for further information.</dd>
</dl>

<h2 id="Custom_styles" name="Custom_styles">カスタムスタイル(Custom styles)グループ</h2>

<p><strong>Styles</strong> ボタンは、特別なフォーマットオプションの選択を提供するドロップダウンメニューです。</p>

<h3 id="Block_styles">Block styles</h3>

<dl>
 <dt>None</dt>
 <dd>現ブロックの全てのスタイリングを削除します</dd>
 <dt>Note box</dt>
 <dd>下記のような註記のボックスを作ります。註記ボックスでは太字の "<strong>註記:</strong>" で開始します。</dd>
</dl>

<div class="note">
<p>This is a note box.</p>
</div>

<dl>
 <dt>Warning box</dt>
 <dd>下記のような警告ボックスを作成します。太字の "<strong>警告:</strong>" で開始します。</dd>
</dl>

<div class="warning">
<p><strong>Warning:</strong> This is a warning box.</p>
</div>

<dl>
 <dt>Two columns</dt>
 <dd>選択テキストや現ブロックのを1カラムから2カラムに、これをサポートするブラウザーでは、変更します。</dd>
 <dt>Three columns</dt>
 <dd>選択テキストや現ブロックのを1カラムから3カラムに、これをサポートするブラウザーでは、変更します。</dd>
 <dt>Article summary</dt>
 <dd>This style places its contents in a specially formatted call-out block that should contain a summary of the article. See the first paragraph of this article for an example.</dd>
 <dt>Syntax box</dt>
 <dd>Creates a syntax box, such as the one shown below. You need to use the "PRE" button as well, to create a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" title='The HTML &amp;amp;amp;lt;pre> element represents preformatted text. Text within this element is typically displayed in a non-proportional ("monospace") font exactly as it is laid out in the file. Whitespace inside this element is displayed as typed.'><code>&lt;pre&gt;</code></a> block inside it. You probably won't see the yellow box until you do.</dd>
 <dt>Hidden when reading</dt>
 <dd>Creates a block that is visible only in edit mode, not when normally displayed. This is not the same as an HTML comment, which is visible only in source mode.</dd>
</dl>

<h3 id="Inline_styles">Inline styles</h3>

<dl>
 <dt>SEO summary</dt>
 <dd>This special style is used to indicate a sentence or two that should be used as the article's summary for SEO purposes. It's also used by macros that automatically construct landing pages. If you don't specify this, MDN automatically uses the first paragraph of your article, but sometimes that's not the optimal text (or it's too much text), so this lets you override that.</dd>
</dl>

<h2 id="Blocks" name="Blocks">ブロック(Blocks)グループ</h2>

<p>ブロックグループは、HTML標準や、Kuma 独自となる、その他のブロックスタイルを提供します。</p>

<dl>
 <dt>ブロック引用文</dt>
 <dd>Inserts a blockquote. <strong>Please do not use this</strong>. Blockquotes are not part of our standard style guide, and this button will be removed in the near future.</dd>
 <dt>Preformatted Text</dt>
 <dd>Inserts a {{htmlelement("pre")}} block, or turns the current block into one. All code samples or examples of text output to a terminal should be in one of these blocks.</dd>
 <dt>Headings</dt>
 <dd>The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in the <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics/Page_info">page info box</a>.</dd>
 <dt>構文ハイライター</dt>
 <dd>The syntax highlighter lets you choose a language for which to apply syntax highlighting to the {{htmlelement("pre")}} (preformatted text) block; if you're not already in such a block, this will create one for you.  Choose the language used in the  block, and it will be highlighted appropriately.</dd>
 <dt>コードサンプルテンプレートを挿入</dt>
 <dd>This button is used by the live sample system to help you quickly insert a new live sample. You don't need to use it, but it's there for convenience. See <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples#Using_the_live_sample_system">Using the live sample system</a> for details on using this and other live sample features.</dd>
 <dt>コードサンプルの iFrame を挿入</dt>
 <dd>Inserts into the document the appropriate macro to display a given live sample. See <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples#Using_the_live_sample_system">Using the live sample system</a> for details on using this and other live sample features.</dd>
</dl>

<h2 id="Lists_and_flow_group">Lists and flow group</h2>

<p>このブロック構造グループは、標準のブロック構造を作成、編集するオプションを提供します。</p>

<dl>
 <dt>番号つきリスト</dt>
 <dd>Creates or removes a numbered list from your article. Once you're working in a numbered list, each time you press return, you will start a new bullet. The <kbd>Tab</kbd> key can be used to indent a level, and <kbd>Shift</kbd> + <kbd>Tab</kbd> will outdent a level. Pressing return on an empty bullet will exit numbered list mode. Right-clicking the list offers the option to open the properties dialog for the list; the properties include the style of the numbers (numbers, letters, Roman numerals, etc, and what number to start with).</dd>
 <dt>番号なしリスト</dt>
 <dd>Creates or removes a bulleted list from your article. Once you're working in a bulleted list, each time you press return, you will start a new bullet. The <kbd>Tab</kbd> key can be used to indent a level, and <kbd>Shift</kbd> + <kbd>Tab</kbd> will outdent a level. Pressing return on an empty bullet will exit bullet list mode. Right-clicking on the list lets you choose to edit the list's properties (specifically, the shapes of the bullets).</dd>
 <dt>Definition List</dt>
 <dd>Creates a new definition list. Definition lists consist of a series of titles and definitions (this list you're reading right now is an example).</dd>
 <dt>Definition Term</dt>
 <dd>Creates a new term block in a definition list. If you're not already editing a definition list, a new one is created for you. Pressing return after entering a definition title automatically starts you editing a definition description.</dd>
 <dt>Definition Value</dt>
 <dd>Creates a new value block in a definition list. Pressing return on a description line automatically starts a new title. Pressing return twice will exit definition list mode.</dd>
 <dt>インデント解除</dt>
 <dd>Shifts the indentation level to the left once; this is the same as pressing  <kbd>Shift</kbd> + <kbd>Tab</kbd> while in a list.</dd>
 <dt>インデント</dt>
 <dd>Shifts the indentation level to the right once; this is the same as pressing tab while in a list.</dd>
 <dt>テキストの向き：左から右へ</dt>
 <dd>Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an Arabic document, you might use this to display some English text.</dd>
 <dt>テキストの向き：右から左へ</dt>
 <dd>Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an English text, you might use this to display some Arabic text.</dd>
</dl>

<h2 id="Media" name="Media">メディア(Media)グループ</h2>

<p>メディアグループはメディアを表示・フォーマットするオプションを提供します。</p>

<dl>
 <dt>イメージ</dt>
 <dd>Inserts a new image into the article. See <a href="/en-US/docs/MDN/Contribute/Editor/Images">Images</a>  for details on how to use this option.</dd>
 <dt>表</dt>
 <dd>Inserts a table into the article. See <a href="/en-US/docs/MDN/Contribute/Editor/Tables">Tables</a> for more information on tables in articles.</dd>
 <dt>YouTube 動画を埋め込み</dt>
 <dd>Opens a dialog box in which you can specify a YouTube URL. From this information it creates a call to the EmbedYouTube macro. This is a secure way to embed video content.</dd>
 <dt>Insert MathML based on (La)TeX</dt>
 <dd>Opens a dialog box in which you can insert code in TeX or LaTeX. This code will be converted into <a href="/en-US/docs/Web/MathML">MathML</a> and inserted into the document in a {{htmlelement("math")}} block.</dd>
</dl>

<p> </p>