path: root/files/ja/web/html/element/button/index.html

---
title: '<button>: ボタン要素'
slug: Web/HTML/Element/button
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - HTML:フローコンテンツ
  - HTML:対話型コンテンツ
  - HTML:知覚可能コンテンツ
  - HTML:記述コンテンツ
  - Reference
  - Web
translation_of: Web/HTML/Element/button
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の <code>&lt;button&gt;</code> 要素</strong>はクリックできるボタンを表し、<a href="/ja/docs/Learn/Forms">フォーム</a>や、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。</span>既定では、 HTML のボタンは {{Glossary("user agent", "ユーザーエージェント")}} が実行されているホストのプラットフォームのスタイルと似ていますが、 <a href="/ja/docs/Web/CSS">CSS</a> を使用してボタンの外見を変更することができます。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_listed">リスト化</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_submittable">送信可能</a> な <a href="/ja/docs/Web/Guide/HTML/Content_categories#form-associated_">フォーム関連要素</a>、知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>、但し<a href="/ja/docs/Web/Guide/HTML/Content_categories#interactive_content">対話型コンテンツ</a>があってはならない</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLButtonElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">属性</h2>

<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>

<dl>
 <dt>{{htmlattrdef("autofocus")}}</dt>
 <dd>論理属性で、ページ読み込み時にこのボタンが入力<a href="/ja/docs/Web/API/HTMLOrForeignElement/focus">フォーカス</a>を持つべきであることを指定します。<strong>文書中の要素一つだけにこの属性を設定することができます。</strong></dd>
 <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
 <dd>{{HTMLElement("button")}} におけるこの属性は標準外であり、 Firefox 固有のものです。他のブラウザーとは異なり、 Firefox はページを再度読み込む時に<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。そのボタンに <code>autocomplete="off"</code> に設定すると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>論理属性で、ユーザーがボタンを操作することを抑止します。押したりフォーカスを受けたりすることができなくなります。</p>

 <p>Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。この機能は {{htmlattrxref("autocomplete","button")}} 属性で制御できます。</p>
 </dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>ボタンに関連付けられた {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は、同一文書内の <code>&lt;form&gt;</code> 要素の <code>id</code> 属性と同一でなければなりません。 (この属性を設定しなかった場合、 <code>&lt;button&gt;</code> は祖先に <code>&lt;form&gt;</code> 要素が存在すれば、その要素に関連付けられます。)</dd>
 <dd>この属性によって <code>&lt;button&gt;</code> 要素が <code>&lt;form&gt;</code> の中になくても、同一文書内にある任意の <code>&lt;form&gt;</code> 要素に関連付けることが可能になりました。また、祖先の <code>&lt;form&gt;</code> 要素を上書きすることができます。</dd>
 <dt>{{htmlattrdef("formaction")}}</dt>
 <dd>このボタンによって送信された情報を処理する URL です。このボタンのフォームオーナーの {{htmlattrxref("action","form")}} 属性よりも優先されます。フォームオーナーがない場合は何もしません。</dd>
 <dt>{{htmlattrdef("formenctype")}}</dt>
 <dd>このボタンが送信ボタンである場合 (<code>&lt;form&gt;</code> の中にあるか関連付けられており、 <code>type="button"</code> が設定されていない場合)、送信されるフォームデータのエンコード方法を指定します。指定可能な値は以下の通りです。
 <ul>
  <li><code>application/x-www-form-urlencoded</code>: この属性が使用されなかった場合の既定値。</li>
  <li><code>multipart/form-data</code>: {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性に <code>file</code> を指定して使用する場合に使用します。</li>
  <li><code>text/plain</code>: デバッグ目的で指定されるものです。実際のフォーム送信で使用するべきではありません。</li>
 </ul>

 <p>この属性が指定された場合、そのボタンのフォームオーナーの {{htmlattrxref("enctype","form")}} 属性より優先されます。</p>
 </dd>
 <dt>{{htmlattrdef("formmethod")}}</dt>
 <dd>このボタンが送信ボタンである場合 (<code>&lt;form&gt;</code> の中にあるか関連付けられており、 <code>type="button"</code> が設定されていない場合)、この属性はこのフォームを送信するのに使用される <a href="/ja/docs/Web/HTTP/Methods">HTTP メソッド</a>を指定します。指定可能な値は以下の通りです。
 <ul>
  <li><code>post</code>: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。</li>
  <li><code>get</code>: フォームのデータは、フォームの <code>action</code> の URL に、セパレーターとして '?' を使用して追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく<a href="/ja/docs/Glossary/Idempotent">副作用がない</a>場合にのみ、このメソッドを使用してください。</li>
 </ul>

 <p>指定された場合、この属性はボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。</p>
 </dd>
 <dt>{{htmlattrdef("formnovalidate")}}</dt>
 <dd>論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を<a href="/ja/docs/Learn/Forms/Form_validation">検証</a>しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("novalidate","form")}} 属性より優先して使用されます。</dd>
<dd>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> および <code><a href="/ja/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> 要素でも使用できます。</dd>
  <dt>{{htmlattrdef("formtarget")}}</dt>
 <dd>ボタンが送信ボタンである場合、フォームの送信後に受信するレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、<em>閲覧コンテキスト</em> (タブ、ウィンドウ、{{HTMLElement("iframe")}}) の <code>name</code> またはそれを表すキーワードです。この属性が指定された場合、ボタンのフォームオーナーの {{htmlattrxref("target", "form")}} 属性より優先されます。以下のキーワードは特別な意味を持ちます。
 <ul>
  <li><code>_self</code>: レスポンスを同じ閲覧コンテキストに読み込みます。これは、属性が指定されていない場合の既定値です。</li>
  <li><code>_blank</code>: レスポンスを新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — に読み込みます。</li>
  <li><code>_parent</code>: レスポンスを現在のコンテキストの親の閲覧コンテキストに読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li>
  <li><code>_top</code>: レスポンスを最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) に読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>このボタンの名前で、フォームデータの一部としてこのボタンの <code>value</code> との組み合わせで送信されます。</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>このボタンの既定の動作です。以下の値が指定可能です。
 <ul>
  <li><code>submit</code>: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が <code>&lt;form&gt;</code> に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。</li>
  <li><code>reset</code>: このボタンはすべてのコントロールを初期値に初期化します。 <a href="/ja/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a> と同様です。 (この動作はユーザーを困らせる傾向があります。)</li>
  <li><code>button</code>: ボタンには既定の動作がなく、既定では押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>フォームのデータと一緒に送信される際に、ボタンの <code>name</code> に結び付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。</dd>
</dl>

<h2 id="Notes">メモ</h2>

<p>送信ボタンに <code>formaction</code> 属性が設定されていても、関連付けられたフォームがない場合は何もしません。ボタンを <code>&lt;form&gt;</code> で囲むか、 <code>form</code> でフォームの id を設定するかしてフォームオーナーを設定する必要があります。</p>

<p><code>&lt;button&gt;</code> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単にスタイル付けできます。内部に HTML コンテンツを (<code>&lt;em&gt;</code>、 <code>&lt;strong&gt;</code> や <code>&lt;img&gt;</code> さえも) 追加できますし、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 擬似要素を使用することもできます。</p>

<p>ボタンがサーバーにデータを送信するためのものでない場合は、 <code>type</code> 属性を <code>button</code> に設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。</p>

<h2 id="Example">例</h2>

<pre class="brush:html">&lt;button name="button"&gt;クリックしてね&lt;/button&gt;
</pre>

<p>{{ EmbedLiveSample('Example', 200, 64) }}</p>

<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>

<h3 id="Icon_buttons">アイコンボタン</h3>

<p>アイコンのみを使って機能を表現するボタンは、<em>アクセシブル名</em>を持ちません。アクセシブル名は画面リーダーのような支援技術で文書を解析し、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">アクセシビリティツリー</a>を生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。</p>

<p>アイコンボタンにアクセシブル名を与えるには、 <code>&lt;button&gt;</code> 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。</p>

<h4 id="Example_2">例</h4>

<pre>&lt;button name="favorite"&gt;
  &lt;svg aria-hidden="true" viewBox="0 0 10 10"&gt;&lt;path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/&gt;&lt;/svg&gt;
  お気に入りに追加
&lt;/button&gt;
</pre>

<p>ボタンのテキストを、アクセシブルな方法で視覚的に隠したい場合は、 <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">CSS プロパティの組み合わせ</a>を使用して画面から削除し、支援技術からは解析可能のままにします。</p>

<p>しかし、ボタンのテキストを視覚的に見えるようにしておけば、アイコンの意味に慣れていない人がボタンの目的を理解できるようになります。これは特に、技術的に慣れていない人や、アイコンボタンが使用するアイコンの文化的解釈が異なる人に適しています。</p>

<ul>
 <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Robust#guideline_4.1_—_compatible_maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN "WCAG を理解する ― ガイドライン 4.1 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h3 id="Size_and_Proximity">大きさと近接性</h3>

<h4 id="Size">大きさ</h4>

<p>ボタンなどの対話型要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a>以上の操作のための大きさが推奨されています。</p>

<ul>
 <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li>
 <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li>
 <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li>
</ul>

<h4 id="Proximity">近接性</h4>

<p>たくさんの対話型コンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。</p>

<p>間隔は {{cssxref("margin")}} などの CSS プロパティを使用して作成することができます。</p>

<ul>
 <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li>
</ul>

<h3 id="ARIA">ARIA 状態情報</h3>

<p>ボタンの状態を記述するために使用する正しい ARIA 属性は <code>aria-pressed</code> であり、 <code>aria-checked</code> や <code>aria-selected</code> ではありません。詳しくは、 <a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">ARIA button ロール</a>についての情報をご覧ください。</p>

<h3 id="Firefox">Firefox</h3>

<p>Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 <code><a href="/ja/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a></code> を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。</p>

<p>上書きした場合は、弱視の人が知覚するのの十分なほど、<strong>フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認すること</strong>が重要です。</p>

<p>色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 {{cssxref("font-weight", "bold")}} の 18.66px 以上、または 24px 以上と定義されています。)</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h3 id="Clicking_and_focus">クリックとフォーカス</h3>

<p>{{HTMLElement("button")}} をクリックしたときに (既定で) フォーカスを得るかは、ブラウザーおよび OS により異なります。{{HTMLElement("input")}} 要素では <code>type="button"</code>、<code>type="submit"</code> ともに同じ動作になります。</p>

<table>
 <caption>{{HTMLElement("button")}} をクリックするとフォーカスを得るかどうか</caption>
 <thead>
  <tr>
   <th>デスクトップ版ブラウザー</th>
   <th>Windows 8.1</th>
   <th>OS X 10.X</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Firefox</th>
   <td class="bc-supports-yes">はい - Firefox 30.0</td>
   <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも) Firefox 63</td>
  </tr>
  <tr>
   <th>Chrome</th>
   <td class="bc-supports-yes">はい - Chrome 35</td>
   <td class="bc-supports-yes">はい - Chrome 65</td>
  </tr>
  <tr>
   <th>Safari</th>
   <td style="background: #eee;">N/A</td>
   <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも) Safari 12</td>
  </tr>
  <tr>
   <th>Internet Explorer</th>
   <td class="bc-supports-yes">はい - Internet Explorer 11</td>
   <td style="background: #eee;">N/A</td>
  </tr>
  <tr>
   <th>Presto</th>
   <td class="bc-supports-yes">はい - Opera 12</td>
   <td class="bc-supports-yes">はい - Opera 12</td>
  </tr>
 </tbody>
</table>

<table>
 <caption>{{HTMLElement("button")}} をタップするとフォーカスを得るかどうか</caption>
 <thead>
  <tr>
   <th>モバイル版ブラウザー</th>
   <th>iOS 7.1.2</th>
   <th>Android 4.4.4</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Safari Mobile</th>
   <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも)</td>
   <td style="background-color: #eeeeee;">N/A</td>
  </tr>
  <tr>
   <th>Chrome 35</th>
   <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも)</td>
   <td class="bc-supports-yes">はい</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'form-elements.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.button")}}</p>