diff options
Diffstat (limited to 'files/ja/web/html/element/button/index.html')
| -rw-r--r-- | files/ja/web/html/element/button/index.html | 304 |
1 files changed, 304 insertions, 0 deletions
diff --git a/files/ja/web/html/element/button/index.html b/files/ja/web/html/element/button/index.html new file mode 100644 index 0000000000..985b66e882 --- /dev/null +++ b/files/ja/web/html/element/button/index.html @@ -0,0 +1,304 @@ +--- +title: '<button>: ボタン要素' +slug: Web/HTML/Element/button +tags: + - HTML + - HTML フォーム + - 'HTML:フローコンテンツ' + - 'HTML:対話型コンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - フォーム + - 要素 +translation_of: Web/HTML/Element/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><button></code> 要素</strong>はクリックできるボタンを表し、<a href="/ja/docs/Learn/HTML/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/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">送信可能</a> な <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連要素</a>、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、但し<a href="/ja/docs/Web/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/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>論理属性で、ページ読み込み時に (ユーザーが例えば他のコントロールに入力するなどして動作を上書きしない限り)、入力<a href="/en-US/docs/Web/API/HTMLElement/focus">フォーカス</a>を持つべきボタンであることを指定します。文書中のフォーム関連要素のうちの一つだけにこの属性を指定することができます。</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>{{HTMLElement("button")}} 要素におけるこの属性は、 Firefox 独自の非標準属性です。Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<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>論理属性で、ユーザーがボタンを操作することを抑止します。この属性が設定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる {{HTMLElement("fieldset")}} 要素などにも <strong>disabled</strong> 属性が指定されていないのであれば、この子要素であるボタンは使用可能のままであるということです。</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")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンに関連付けられた {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。属性値は同一文書内の <code><form></code> 要素の <code>id</code> 属性と同一の値にしなくてはなりません。この属性を設定しなかった場合は、祖先に <code><form></code> 要素が存在すれば、その要素に関連付けられます。この属性によって <code><form></code> 要素の子孫にするだけでなく、同一文書内にある任意の <code><form></code> 要素に <code><button></code> 要素を関連付けることが可能になりました。</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンによって送信された情報を処理する URL です。指定した場合は、そのボタンの属するフォームの {{htmlattrxref("action","form")}} 属性よりも優先されます。</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンを送信ボタンとして使用する場合、ブラウザーがフォーム情報をサーバーに送信するために使用するフォームデータのエンコード方法を指定します。以下の値が指定可能です。 + <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>この属性が指定されている場合、button 属性が紐付けられた form 要素 (form owner)の {{htmlattrxref("enctype","form")}} 属性より、ボタンのそれが優先されます。</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンが送信ボタンである場合に、ブラウザーがフォーム情報を送信するために使用する <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 をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。</li> + </ul> + + <p>この属性が指定された場合、これはボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を<a href="/ja/docs/Learn/HTML/Forms/Form_validation">検証</a>しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("novalidate","form")}} 属性より優先して使用されます。</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、<em>閲覧コンテキスト</em> (タブ、ウィンドウ、インラインフレーム) の <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>type</code> 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。</li> + <li><code>reset</code>: <code><input type="reset"></code> と同様に、すべてのコントロールを初期値にリセットするボタンです。</li> + <li><code>button</code>: ボタンには既定の動作がなく、押されても何も行いません。クライアントサイドスクリプトを要素のイベントに関連付けることで、イベントが発生したときに実行させます。</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>ボタンの初期値です。フォームデータと一緒に送信する際に、ボタンの <code>name</code> と関連付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。</dd> +</dl> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p><code><button></code> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単に整形できます。 {{HTMLElement("input")}} が <code>value</code> 属性に文字列を設定することしかできないのに対し、内部に HTML コンテンツを追加できますし (<code><em></code>、 <code><strong></code> や <code><img></code> さえも)、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 疑似要素を使用することもできます。</p> + +<p>ボタンがサーバーにデータを送信するためのものでない場合は、 <code>button</code> に <code>type</code> 属性を設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。</p> + +<div class="blockIndicator warning"> +<p>Internet Explorer 7 には <code><button type="submit" name="myButton" value="foo">Click me</button></code> でフォームデータを送信したとき、 <code>POST</code> データが <code>myButton=foo</code> ではなく <code>myButton=Click me</code> として送信されるバグがあります。この問題は Internet Explorer 6 ではもっと悪く、ボタンを介してフォームデータを送信すると、 Internet Explorer 7 と同様の方法でフォーム内のすべてのボタンが送信されるバグもあります。このバグは Internet Explorer 8 で修正されました。</p> +</div> + +<div class="blockIndicator note"> +<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")}} 属性の値を <code>off</code> にすると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</p> +</div> + +<p>Android 版 Firefox のバージョン35より前では、すべてのボタンに既定でグラデーションの {{cssxref("background-image")}} を設定していました ({{bug(763671)}} をご覧ください)。これは <code>background-image: none</code> を使用して無効化できます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><button name="button">クリックしてね</button> +</pre> + +<p>{{ EmbedLiveSample('Example', 200, 64) }}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<h3 id="Icon_buttons" name="Icon_buttons">アイコンボタン</h3> + +<p>アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名は読み上げソフトのような支援技術で文書を解析し、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>を生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。</p> + +<p>アイコンボタンにアクセシブル名を与えるには、 <code><button></code> 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。</p> + +<h4 id="Example_2" name="Example_2">例</h4> + +<pre><button name="favorite" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg> + お気に入りに追加 +</button> +</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" name="Size_and_Proximity">大きさと近接性</h3> + +<h4 id="Size" name="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" name="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="Firefox">Firefox</h3> + +<p>Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 <code>button{{cssxref("::-moz-focus-inner")}} { }</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" name="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" name="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', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.button")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>フォーム作成に用いるその他の要素: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p> |