diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-13 14:44:50 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-21 02:01:48 +0900 |
| commit | c395bb07a6b003e6cfe9f14c8e11c86d575dcee8 (patch) | |
| tree | b071f48db50f83ef84cb11d7e85f24fb39bac61f | |
| parent | 1bfb01713a86d7c3d241b742691314eaa1045066 (diff) | |
| download | translated-content-c395bb07a6b003e6cfe9f14c8e11c86d575dcee8.tar.gz translated-content-c395bb07a6b003e6cfe9f14c8e11c86d575dcee8.tar.bz2 translated-content-c395bb07a6b003e6cfe9f14c8e11c86d575dcee8.zip | |
2022/01/18 時点の英語版に同期
| -rw-r--r-- | files/ja/web/html/element/input/range/index.md | 700 |
1 files changed, 343 insertions, 357 deletions
diff --git a/files/ja/web/html/element/input/range/index.md b/files/ja/web/html/element/input/range/index.md index 1ba58f6167..ae78d179af 100644 --- a/files/ja/web/html/element/input/range/index.md +++ b/files/ja/web/html/element/input/range/index.md @@ -2,500 +2,486 @@ title: <input type="range"> slug: Web/HTML/Element/input/range tags: - - Element - - Forms + - 要素 + - フォーム - HTML - - HTML forms - - HTML input tag - HTML フォーム + - HTML input tag - Input - Range - - Reference - - Web - - slider + - リファレンス + - ウェブ - スライダー - - フォーム - - 要素 -translation_of: Web/HTML/Element/input/range browser-compat: html.elements.input.input-range +translation_of: Web/HTML/Element/input/range --- -<div>{{HTMLRef("Input_types")}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに特定の値より小さくなく、別な特定の値より大きくない数値を指定させるために使用します。しかし、厳密な値が重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。</p> +{{HTMLRef("Input_types")}} + +{{HTMLElement("input")}} 要素の **`range`** 型は、ユーザーに特定の値より小さくなく、別な特定の値より大きくない数値を指定させるために使用します。しかし、厳密な値が重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。 -<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> +この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。 -<p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p> +{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}} + +ユーザーのブラウザーが `range` 型に対応していない場合は、 `{{HTMLElement('input/text', 'text')}}` 入力で代替されて扱われます。 <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value", "値")}}</strong></td> - <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。数値として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用してください。</td> - </tr> - <tr> - <td><strong>イベント</strong></td> - <td>{{event("change")}} および {{event("input")}}</td> - </tr> - <tr> - <td><strong>対応している共通属性</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, {{htmlattrxref("step", "input")}}</td> - </tr> - <tr> - <td><strong>IDL 属性</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> - </tr> - <tr> - <td><strong>メソッド</strong></td> - <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} および {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("値")}}</strong></td> + <td> + 選択された数値を表す文字列を含む {{domxref("DOMString")}}。数値として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用してください。 + </td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td> + {{domxref("HTMLElement/change_event", "change")}} および + {{domxref("HTMLElement/input_event", "input")}} + </td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("max", "input")}}, + {{htmlattrxref("min", "input")}}, + {{htmlattrxref("step", "input")}} + </td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td> + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}} + </td> + </tr> + </tbody> </table> -<h3 id="Validation">検証</h3> - -<p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p> - -<ul> - <li>{{htmlattrxref("value", "input")}} が何かに設定されており、妥当な浮動小数点数に変換できない場合、入力が不正な入力になるので検証に失敗します。</li> - <li>値は {{htmlattrxref("min", "input")}} より小さくはなりません。この既定値は 0 です。</li> - <li>値は {{htmlattrxref("max", "input")}} より大きくはなりません。この既定値は 100 です。</li> - <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li> -</ul> - -<h3 id="Value">値</h3> - -<p>{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (<code>""</code>) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は <code>min</code> 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。</p> - -<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min - : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> - -<p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p> - -<h2 id="Additional_attributes">追加の属性</h2> - -<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">属性</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("list")}}</code></td> - <td>オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id</td> - </tr> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>許可されている最大値</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>許可されている最小値</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>ユーザーインターフェイスと検証の両方で使用される刻み値</td> - </tr> - </tbody> -</table> +### 検証 -<p id="attr-list">{{page("/ja/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}</p> +利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。 -<p>対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の<a href="#a_range_control_with_hash_marks">ハッシュマーク付き範囲コントロール</a>を参照してください。</p> +- {{htmlattrxref("value", "input")}} が何かに設定されており、妥当な浮動小数点数に変換できない場合、入力が不正な入力になるので検証に失敗します。 +- 値は {{htmlattrxref("min", "input")}} より小さくはなりません。この既定値は 0 です。 +- 値は {{htmlattrxref("max", "input")}} より大きくはなりません。この既定値は 100 です。 +- 値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。 -<h3 id="attr-max"><code id="max">max</code></h3> +### 値 -<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p> +{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (`""`) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は `min` 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。 -<p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p> +```js +defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2; +``` -<h3 id="attr-min"><code id="min">min</code></h3> +最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。 -<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p> +## 追加の属性 -<p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p> +すべての {{HTMLElement("input")}} 型で共通する属性に加え、 `range` 型の入力欄は次の属性にも対応しています。 -<h3 id="attr-step"><code id="step">step</code></h3> +### list -<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> +list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、この {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。 -<p><code>range</code> 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p> +対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の[目盛り付き範囲コントロール](#目盛り付き範囲コントロール)を参照してください。 -<h3 id="Non_Standard_Attributes">標準外の属性</h3> +### max -<table class="standard-table"> - <thead> - <tr> - <th scope="col">属性</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("orient")}}</code></td> - <td>範囲のスライダーの向きを設定します。 <strong>Firefox のみ。</strong></td> - </tr> - </tbody> -</table> +この入力欄が受け付ける最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。 [`max`](/ja/docs/Web/HTML/Attributes/max) 属性の値が数値でない場合、要素は最大値を持ちません。 -<h3 id="attr-orient"><code id="orient">orient</code> {{non-standard_inline}}</h3> +この値は [`min`](/ja/docs/Web/HTML/Attributes/min) 属性の値より大きいか、等しくしなければなりません。HTML の [`max`](/ja/docs/Web/HTML/Attributes/max) 属性を参照してください。 -<p id="orient-include">CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える <code>orient</code> 属性は、範囲スライダーの向きを定義する定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</p> +### min -<div class="notecard note"> -<p>メモ: input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p> -</div> +許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。 `min` 属性の値が数値でない場合、要素は最小値を持ちません。 -<h2 id="Examples">例</h2> +この値は [`max`](/ja/docs/Web/HTML/Attributes/max) 属性の値以下でなければなりません。 HTML の [`min`](/ja/docs/Web/HTML/Attributes/min) 属性を参照してください。 -<p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p> +### step -<p>range 入力欄がよく使用される場合の例をいくつか示します。</p> +`step` 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 `any` です。刻みの基準値に等しい値（指定されていれば `{{anch("min")}}`、そうでなければ {{htmlattrxref("value", "input")}}、どちらも設定されていなければ適切な既定値）のみが妥当となります。 -<ul> - <li>ボリュームやバランス、フィルター制御のようなオーディオの制御。</li> - <li>カラーチャネル、透過度、明るさなどの色の構成の制御。</li> - <li>難易度、視点距離、ワールドサイズなどのゲームの構成の制御。</li> - <li>パスワードマネージャーが生成するパスワードの長さ。</li> -</ul> +文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（`{{anch("min")}}` や `{{anch("max")}}` など、他の制約には制限されます）。 -<p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p> +> **Note:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。 -<h3 id="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3> +`range` 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を*除いて*、整数の入力のみを許可します。例えば、 `min` に -10 を、 `value` に 1.5 を設定した場合、 `step` が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 [HTML の `step` 属性](/ja/docs/Web/HTML/Attributes/step)を参照してください。</p> -<p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p> +### 標準外の属性 -<p>例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。</p> +### orient -<pre class="brush: html"><input type="range" min="-10" max="10"></pre> +CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える `orient` 属性は、範囲スライダーの向きを定義する定義します。値は `horizontal` が範囲を水平方向に描画することを、 `vertical` が範囲を垂直に描画することを意味します。 -<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> +> **Note:** input 型の属性のうち、 `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, `width` は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。 -<h3 id="Setting_the_values_granularity">値の精度の設定</h3> +## 例 -<p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 0.01:</p> +`number` 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 `range` 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。 -<div id="Granularity_sample1"> -<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> +range 入力欄がよく使用される場合の例をいくつか示します。 -<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> -</div> +- ボリュームやバランス、フィルター制御のようなオーディオの制御。 +- カラーチャネル、透過度、明るさなどの色の構成の制御。 +- 難易度、視点距離、ワールドサイズなどのゲームの構成の制御。 +- パスワードマネージャーが生成するパスワードの長さ。 -<p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p> +原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を 0.5 に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。 -<div id="Granularity_sample2"> -<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> +### 最小値と最大値の指定 -<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> +既定では、最小値は 0 で最大値は 100 です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。 -<p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p> -</div> +例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。 + +```html +<input type="range" min="-10" max="10"> +``` + +{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}} + +### 値の粒度の設定 + +既定では、粒度は 1 であり、値は常に整数であることを意味します。この粒度は {{htmlattrxref("step")}} 属性を変更することで制御することができます。例えば、 5 から 10 の間の値で、小数点以下 2 桁の精度が必要な場合、 `step` の値を 0.01 に設定します。 + +#### step 属性の設定 + +```html +<input type="range" min="5" max="10" step="0.01"> +``` + +{{EmbedLiveSample("Setting_the_step_attribute", 600, 40)}} + +#### step を "any" に設定 + +小数点以下が何桁になろうと、どんな値でも受け入れたい場合は、 {{htmlattrxref("step", "input")}} 属性に `any` という値を指定することができます。 -<h3 id="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3> +```html +<input type="range" min="0" max="3.14" step="any"> +``` -<p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p> +{{EmbedLiveSample("Setting_step_to_any", 600, 40)}} -<h4 id="Range_control_mockups">範囲コントロールのモックアップ</h4> +この例では、 0 から π までの任意の値を選択することができ、選択された値の小数部は制限されません。 -<p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p> +### 目盛りとラベルの追加 -<h5 id="An_unadorned_range_control">簡素な範囲コントロール</h5> +HTML の仕様では、範囲コントロールの表示方法について、ブラウザーにある程度の柔軟性を持たせています。この柔軟性は、目盛りやラベルの分野ほど明確なものはありません。この仕様書では、 {{htmlattrxref("list", "input")}} 属性と {{HTMLElement("datalist")}} 要素を使って範囲コントロールに独自のポイントを追加する方法を説明していますが、コントロールの長さに沿った標準的なハッシュや目盛マークについての要件や推奨事項はありません。 -<p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p> +#### 範囲コントロールのモックアップ + +ブラウザーにはこのような柔軟性がありますが、 HTML が定義する範囲コントロールの機能すべてに対応しているものは今のところありません。ここでは、それらに対応しているブラウザーで、 macOS で得られるかもしれないものを示すモックアップをいくつか紹介します。 + +##### 簡素な範囲コントロール + +これは {{htmlattrxref("list", "input")}} 属性を指定しない場合や、ブラウザーが対応していない場合に表示されるものです。 <table class="fullwidth standard-table"> - <tbody> - <tr> - <th>HTML</th> - <th>Examples</th> - </tr> - <tr> - <td rowspan="4"> - <pre class="brush: html"> -<input type="range"></pre> - </td> - <th>Screenshot</th> - </tr> - <tr> - <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-plain.png"></td> - </tr> - <tr> - <th>Live</th> - </tr> - <tr> - <td>{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th>HTML</th> + <th>例</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html"><input type="range"></pre> + </td> + <th>画面ショット</th> + </tr> + <tr> + <td> + <img alt="macOS の生のスライダーコントロールの画面ショット" src="macslider-plain.png"> + </td> + </tr> + <tr> + <th>ライブ</th> + </tr> + <tr> + <td> + {{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}} + </td> + </tr> + </tbody> </table> -<h5 id="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5> +##### 目盛り付きの範囲コントロール -<p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p> +この範囲コントロールは、コントロール上の一連の目盛りを定義する {{HTMLElement("datalist")}} の ID を指定する `list` 属性を使用しています。 11 個の目盛りがあり、 0% と 10% ごとのマークに 1 つずつあります。各ポイントは {{HTMLElement("option")}} 要素で表され、その {{htmlattrxref("value", "option")}} にはマークが描かれるべき範囲の値が設定されています。 <table class="fullwidth standard-table"> - <tbody> - <tr> - <th>HTML</th> - <th>Examples</th> - </tr> - <tr> - <td rowspan="4"> - <pre class="brush: html"> -<input type="range" list="tickmarks"> - -<datalist id="tickmarks"> - <option value="0"></option> - <option value="10"></option> - <option value="20"></option> - <option value="30"></option> - <option value="40"></option> - <option value="50"></option> - <option value="60"></option> - <option value="70"></option> - <option value="80"></option> - <option value="90"></option> - <option value="100"></option> -</datalist> -</pre> - </td> - <th>Screenshot</th> - </tr> - <tr> - <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-ticks.png"></td> - </tr> - <tr> - <th>Live</th> - </tr> - <tr> - <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th>HTML</th> + <th>例</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> +<option value="0"></option> +<option value="10"></option> +<option value="20"></option> +<option value="30"></option> +<option value="40"></option> +<option value="50"></option> +<option value="60"></option> +<option value="70"></option> +<option value="80"></option> +<option value="90"></option> +<option value="100"></option> +</datalist> + +</pre + > + </td> + <th>画面ショット</th> + </tr> + <tr> + <td> + <img alt="macOS の生のスライダーコントロールの画面ショット" src="macslider-plain.png"> + </td> + </tr> + <tr> + <th>ライブ</th> + </tr> + <tr> + <td> + {{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}} + </td> + </tr> + </tbody> </table> -<h5 id="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5> +##### 目盛りとラベル付きの範囲コントロール -<p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p> +ラベルを付けたい目盛りに対応する {{HTMLElement("option")}} 要素に {{htmlattrxref("label", "option")}} 属性を追加することにより、範囲コントロールにラベルを追加することができます。 <table class="fullwidth standard-table"> - <tbody> - <tr> - <th>HTML</th> - <th>Examples</th> - </tr> - <tr> - <td rowspan="4"> - <pre class="brush: html"> -<input type="range" list="tickmarks"> - -<datalist id="tickmarks"> - <option value="0" label="0%"></option> - <option value="10"></option> - <option value="20"></option> - <option value="30"></option> - <option value="40"></option> - <option value="50" label="50%"></option> - <option value="60"></option> - <option value="70"></option> - <option value="80"></option> - <option value="90"></option> - <option value="100" label="100%"></option> -</datalist> -</pre> - </td> - <th>Screenshot</th> - </tr> - <tr> - <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-labels.png"></td> - </tr> - <tr> - <th>Live</th> - </tr> - <tr> - <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th>HTML</th> + <th>例</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> +<option value="0" label="0%"></option> +<option value="10"></option> +<option value="20"></option> +<option value="30"></option> +<option value="40"></option> +<option value="50" label="50%"></option> +<option value="60"></option> +<option value="70"></option> +<option value="80"></option> +<option value="90"></option> +<option value="100" label="100%"></option> +</datalist> + +</pre + > + </td> + <th>画面ショット</th> + </tr> + <tr> + <td> + <img + alt="macOS での生のスライダーコントロールの画面ショット" + src="macslider-labels.png" + /> + </td> + </tr> + <tr> + <th>ライブ</th> + </tr> + <tr> + <td> + {{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}} + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p> -</div> +> **Note:** 現在、これらの機能に完全に対応しているブラウザーはありません。例えば、 Firefox は目盛りとラベルに全く対応していませんし、 Chrome は目盛りに対応していますが、ラベルには対応していません。 Chrome のバージョン66 (66.0.3359.181) ではラベルには対応していますが、 {{htmlelement("datalist")}} タグの {{cssxref("display")}} プロパティが既定で `none` に設定されておりラベルが非表示なので CSS を使ってスタイル付けする必要があります。 -<h3 id="Change_the_orientation">方向の変更</h3> +### 方向の変更 -<div class="xhidden"> -<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value. This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p> +既定では、ブラウザーが範囲入力をスライダーとしてレンダリングする場合、つまみが左右にスライドするようにレンダリングされます。対応すれば、 CSS で幅の値より大きい高さの値を宣言することで、範囲を垂直にして上下にスライドさせることができるようになります。これは、実はまだ主要なブラウザーでは実装されていません。（Firefox {{bug(981916)}}, [Chrome bug 341071](https://bugs.chromium.org/p/chromium/issues/detail?id=341071) 参照）。また、おそらく、まだ[議論中](https://github.com/whatwg/html/issues/4177)であるかもしれません。 -<p>In the meantime, we can make the range vertical by rotating it using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p> +一方、CSS 座標変換を使って回転させることで、範囲を垂直にすることができます。また、 {{cssxref('appearance')}} を `slider-vertical` に設定する、Firefox で標準ではない `orient` 属性を使う、または Internet Explorer と Edge でテキスト方向を変更するなど、それぞれのブラウザエンジンに合わせた方法で、対象を垂直にしていくことが可能です。 -<p>Consider this range control:</p> +#### 水平の範囲コントロール -<div id="Orientation_sample1"> -<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -</div> +この範囲コントロールを考えてください。 -<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "orientation_sample1.png")}}</p> +```html +<input type="range" id="volume" min="0" max="11" value="7" step="1"> +``` -<p>This control is horizontal (at least on most if not all major browsers; others might vary).</p> -</div> +{{EmbedLiveSample("Horizontal_range_control", 200, 200, "orientation_sample1.png")}} -<h3 id="Standards">Standards</h3> +このコントロールは水平です（少なくとも主要なブラウザーではそうですが、他のブラウザーでは異なるかもしれません）。 -<p>According to the specification, making it vertical requires adding CSS to change the dimensions of the control so that it's taller than it is wide, like this:</p> +#### 標準ベースの垂直範囲コントロール -<div id="Orientation_sample2"> -<h4 id="CSS">CSS</h4> +仕様によると、縦長にするには、以下のように CSS を追加して、コントロールの寸法を横幅よりも縦幅が大きくなるように変更する必要があるそうです。 -<pre class="brush: css">#volume { +```css +#volume { height: 150px; width: 50px; -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> - -<h4 id="Result">結果</h4> - -<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "orientation_sample2.png")}}</p> -</div> +} +``` -<p>Unfortunately, no major browsers currently support vertical range controls directly.</p> +```html +<input type="range" id="volume" min="0" max="11" value="7" step="1"> +``` -<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3> +{{EmbedLiveSample("Standards-based_vertical_range_control", 200, 200, "orientation_sample2.png")}} -<p>You can, however, create a vertical range control by drawing a horizontal range control on its side. The easiest way is to use CSS: by applying a {{cssxref("transform")}} to rotate the element, you can make it vertical. Let's take a look.</p> +残念ながら、現在垂直範囲コントロールに直接対応している主要なブラウザーはありません。 -<h4 id="HTML_2">HTML</h4> +#### transform の使用 -<p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p> +水平方向の範囲コントロールを横に描画することで、垂直方向の範囲コントロールを作成することができます。最も簡単な方法は CSS を使うことです。 {{cssxref("transform")}} を適用して要素を回転させることで、縦長にすることができます。それでは見てみましょう。 -<pre class="brush: html"><div class="slider-wrapper"> - <input type="range" min="0" max="11" value="7" step="1"> -</div></pre> +HTML を更新して {{HTMLElement("input")}} を {{HTMLElement("div")}} で囲み、座標変換が行われた後にレイアウトを修正できるようにします（座標変換は自動的にはページのレイアウトに影響しないので）。 -<h4 id="CSS_2">CSS</h4> +```html +<div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div> +``` -<p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p> +次に、 CSS が必要です。これはページが正しく表示されるように、表示モードとサイズを指定します。要するに、スライダーのためにページの領域を確保し、回転したスライダーが混乱することなく確保したスペースに収まるようにします。 -<pre class="brush: css">.slider-wrapper { +```css +.slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } -</pre> +``` -<p>Then comes the style information for the <code><input></code> element within the reserved space:</p> +次に、予約されたスペース内にある `<input>` 要素のスタイル情報です。 -<pre class="brush: css">.slider-wrapper input { +```css +.slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); -}</pre> - -<p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p> - -<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "orientation_sample3.png")}}</p> +} +``` -<h3 id="appearance_property">appearance property</h3> +コントロールの大きさは、縦 150 ピクセル×横 20 ピクセルに設定されています。マージンは 0 に設定され、{{cssxref("transform-origin")}} はスライダーが回転する空間の中央に移動します。スライダーは幅 150 ピクセルに設定されているので、各辺が 150 ピクセルであるボックスを回転して通過します。原点を各軸で 75px オフセットすることで、その空間の中心を軸に回転することを意味します。最後に、反時計回りに 90° 回転させます。その結果、最大値が上、最小値が下になるように回転された範囲入力が得られます。 -<p>The {{cssxref('appearance')}} property has a non-standard value of <code>slider-vertical</code> that, well, makes sliders vertical.</p> +{{EmbedLiveSample("Using_transform", 200, 200, "orientation_sample3.png")}} -<h4 id="HTML_3">HTML</h4> +#### appearance プロパティの使用 -<p>We use the same HTML as in the previous examples:</p> +{{cssxref('appearance')}} プロパティには `slider-vertical` という標準外の値があり、スライダーを縦にします。 -<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1"> -</pre> +これまでの例と同じ HTML を使用します。 -<h4 id="CSS_3">CSS</h4> +```html +<input type="range" min="0" max="11" value="7" step="1"> +``` -<p>We target just the inputs with a type of range:</p> +`range` 型の入力だけを対象にします。 -<pre class="brush: css">input[type="range"] { +```css +input[type="range"] { -webkit-appearance: slider-vertical; -}</pre> - -<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p> - -<h3 id="orient_attribute">orient attribute</h3> - -<p>In Firefox only, there is a non-standard <code>orient</code> property.</p> +} +``` -<h4 id="HTML_4">HTML</h4> +{{EmbedLiveSample("Using_the_appearance_property", 200, 200)}} -<p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p> +#### orient 属性の使用 -<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> -</pre> +Firefox だけですが、標準外の `orient` プロパティがあります。 -<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p> +前述の例と同様の HTML を使用しますが、この属性に `vertical` の値を設定します。 -<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3> +```html +<input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +``` -<p>The {{cssxref('writing-mode')}} property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects. </p> +{{EmbedLiveSample("Using_the_orient_attribute", 200, 200)}} -<h4 id="HTML_5">HTML</h4> +#### writing-mode: bt-lr; -<p>We use the same HTML as in the previous examples:</p> +{{cssxref('writing-mode')}} プロパティは、一般に国際化や地域化のためにテキスト方向を変更するために使用するべきではありませんが、特殊効果のために使うことができます。 -<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1"> -</pre> +前述の例と同様の HTML を使用します。 -<h4 id="CSS_4">CSS</h4> +```html +<input type="range" min="0" max="11" value="7" step="1"> +``` -<p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p> +入力型が range の物だけを対象に、書字方向を `bt-lr`、すなわち下から上へ、右から左へ設定します。 -<pre class="brush: css">input[type="range"] { +```css +input[type="range"] { writing-mode: bt-lr; -}</pre> - -<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p> - -<h3 id="Putting_it_all_together">Putting it all together</h3> +} +``` -<p>As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:</p> +{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}} -<h4 id="HTML_6">HTML</h4> +#### すべて一緒に設定 -<p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p> +上記の例は異なるブラウザーで動作するため、単一の例が複数のブラウザーで動作するように一緒に指定することができます。 -<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> -</pre> +`orient` 属性に `vertical` の値を設定することで Firefox に対応します。 -<h4 id="CSS_5">CSS</h4> +```html +<input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +``` -<p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</p> +入力型が range のものだけを対象にして、書字方向を既定値から `bt-lr`、すなわち下から上、左から右に指定することで Edge や Internet Explorer に対応し、 `-webkit-appearance: slider-vertical` で WebKit ベースのブラウザーに対応します。 -<pre class="brush: css">input[type="range"] { +```css +input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; -}</pre> +} +``` -<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p> +{{EmbedLiveSample("Putting_it_all_together", 200, 200)}} -<h2 id="Specifications">仕様書</h2> +## 仕様書 -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li> - <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li> - <li><code><a href="/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> - <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li> - <li><a href="/ja/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">ConstantSourceNode による複数の引数の制御</a></li> - <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li> - <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> -</ul> +- [HTML フォーム](/ja/docs/Learn/Forms) +- {{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス +- [`<input type="number">`](/ja/docs/Web/HTML/Element/input/number)` +- {{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}} +- [ConstantSourceNode による複数の引数の制御](/ja/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) +- [Styling the range element](https://css-tricks.com/sliding-nightmare-understanding-range-input) +- [CSS プロパティの互換性](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls) |