コントロールの一覧 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
JavaScript を使った Windows ランタイム アプリでは、ユーザー インターフェイス (UI) 開発をサポートする非常に多くのコントロールにアクセスできます。これらのコントロールの一部は視覚的に表示されますが、それ以外のコントロールは他のコントロールまたはコンテンツ (画像、メディアなど) のコンテナーとして機能します。
このトピックでは、JavaScript を使った Windows ランタイム アプリの一般的なコントロールの一覧を、アルファベット順に表示します。
A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z
A
a
ハイパーテキスト リンクのリンク元またはリンク先を指定します。<a href="url">Your text</a>
リファレンス: a
アプリ バー
アプリ特有のコマンドを表示するツール バーを表示します。<div data-win-control="WinJS.UI.AppBar"></div>
リファレンス: WinJS.UI.AppBar
オーディオ
音楽や効果など、ドキュメントで再生されるサウンドまたはオーディオ コンテンツを指定します。<audio> <source src="uri" type="audioType" /> </audio>
リファレンス: audio
B
戻るボタン (Windows のみ)
前に戻る移動をボタンの形で提供します。<div><button data-win-control="WinJS.UI.BackButton"></button></div>
リファレンス: WinJS.UI.BackButton
ボタン
ボタン コントロールを表します。
<button>A button</button>
- または -
<input type="button" value="A button" />
リファレンス: button、input type=button
C
キャンバス
ドキュメント上の画像およびグラフィックスの描画、レンダリング、操作に使われるオブジェクトを提供します。<canvas />
リファレンス: canvas
チェック ボックス
ユーザーが選択またはクリアできるチェック ボックスを表します。
<input type="checkbox" />
リファレンス: input type=checkbox
コンボ ボックス
「"選択"」をご覧ください。コンテンツ ダイアログ
注意する必要がある、または、ユーザーの明示的な操作を求める重要な情報を表示し、アプリ内の他の要素の操作を一時的にブロックします。<div data-win-control="WinJS.UI.ContentDialog"> <!-- Content --> </div
リファレンス: ContentDialog
コンテキスト メニュー
ユーザーが Windows ストア アプリのテキストまたは UI オブジェクト上で操作 (クリップボード コマンドなど) を実行するための軽量なメニューを表示します。var menu = new Windows.UI.Popups.PopupMenu();
リファレンス: Windows.UI.Popups.PopupMenu
D
DatePicker (Windows のみ)
日付を設定します。
<div data-win-control="WinJS.UI.DatePicker"></div>
リファレンス: DatePicker
ドロップダウン リスト
「"選択"」をご覧ください。
E
メール入力ボックス
1 つ以上の電子メール アドレスを受け入れる単一行入力コントロールです。<input type="email" />
リファレンス: input type=email
F
ファイル アップロード
テキスト ボックスと参照ボタンがあるファイル アップロード オブジェクトを作成します。<input type="file" />
リファレンス: input type=file
可変ボックス
レイアウトを定義し、ボックスのサイズを定義するときに利用可能な領域を考慮することで、相対サイズと相対配置を有効にします。<div style="display: -ms-box;"> <!-- Child elements --> </div>
リファレンス: display
FlipView
コレクションを表示します (一度に 1 項目)。<div data-win-control="WinJS.UI.FlipView"></div>
リファレンス: WinJS.UI.FlipView
ポップアップ (Windows のみ)
ユーザーの操作が必要であることを示すメッセージを表示します (ダイアログでは他のユーザー操作がブロックされますが、ポップアップでは別のウィンドウが作成されず、操作もブロックされません)。<div data-win-control="WinJS.UI.Flyout"></div>
リファレンス: WinJS.UI.Flyout
G
グリッド
列と行で構成される可変グリッド領域を定義する CSS レイアウト。<div style="{display: -ms-grid}"> <!-- Child elements --> </div>
リファレンス: display
グリッド ビュー
グリッド レイアウトの ListView です。詳しくは、「"リスト ビュー"」をご覧ください。<div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
リファレンス: WinJS.UI.ListView
H
HTML コントロール
HTML ページからコンテンツを表示します。<div data-win-control="WinJS.UI.HtmlControl"></div>
リファレンス: WinJS.UI.HtmlControl
ハブ (Windows のみ)
ハブ ナビゲーション パターンを作成します。ハブ ナビゲーション パターンは、ハブとそこから移動できる各セクションで構成されます。それぞれのセクションは、ハブ セクションによって定義されます。<div data-win-control="WinJS.UI.Hub"></div>
リファレンス: WinJS.UI.Hub
ハブのセクション (Windows のみ)
ハブのセクションを定義します。<div data-win-control="WinJS.UI.HubSection"></div>
リファレンス: WinJS.UI.HubSection
ハイパーリンク
「"a"」をご覧ください。
I
iframe
他のドキュメントを表示できるインライン フローティング フレームです。<iframe src="url" />
リファレンス: iframe
img
画像を表示します。<img src="url" />
リファレンス: img
項目コンテナー
押下、スワイプ、ドラッグができる項目を定義します。<div data-win-control="WinJS.UI.ItemContainer"></div>
リファレンス: WinJS.UI.ItemContainer
J
- ジャンプ ビュー
「"セマンティック ズーム"」をご覧ください。
L
ラベル
ページ上の他の要素のラベルを指定します。<label for="otherControl">Label text</label> <input type="text" id="otherControl" />
リファレンス: label
リスト ボックス
「"選択"」をご覧ください。リスト ビュー
リストまたはグリッド レイアウト内のデータのコレクションを表示します。<div data-win-control="WinJS.UI.ListView"></div>
リファレンス: WinJS.UI.ListView
M
メディア要素
「"オーディオ"」および「"ビデオ"」をご覧ください。メディア プレーヤー
「"オーディオ"」および「"ビデオ"」をご覧ください。メニュー
メニューを表示します。 (Windows のみ)<div data-win-control="WinJS.UI.Menu"></div>
リファレンス: WinJS.UI.Menu
メニュー コマンド (Windows のみ)
Menu オブジェクトに表示されるコマンドを表します。<button data-win-control="WinJS.UI.MenuCommand" />
リファレンス: WinJS.UI.MenuCommand
メッセージ ダイアログ
ユーザーがすぐに応答する必要であることを示すメッセージを表示します。リファレンス: Windows.UI.Popups.MessageDialog
複数行テキスト ボックス
「"テキスト領域"」をご覧ください。
N
ナビゲーション バー (Windows のみ)
ユーザーが表示または非表示にできるツール バーのナビゲーション コマンドを表示します。<div data-win-control="WinJS.UI.NavBar"></div>
リファレンス: WinJS.UI.NavBar
ナビゲーション バー コマンド (Windows のみ)
ナビゲーション バーのコンテナーに含まれるナビゲーション コマンドを表します。<div data-win-control="WinJS.UI.NavBarCommand"></div>
リファレンス: WinJS.UI.NavBarCommand
ナビゲーション バー コンテナー (Windows のみ)
ナビゲーション バー内のナビゲーション バー コマンドのグループが含まれています。<div data-win-control="WinJS.UI.NavBarContainer"></div>
リファレンス: WinJS.UI.NavBarContainer
数値入力ボックス
数値を受け入れる単一行入力コントロールです。<input type="number" />
リファレンス: input type=number
P
ページ コントロール
ナビゲーション アプリ内のカスタム コントロールまたはページを表します。リファレンス: WinJS.UI.Pages.PageControl
パン スクロール ビュー
「"スクロール ビュー"」をご覧ください。パスワード入力ボックス
テキスト入力コントロールに似ている単一行テキスト入力コントロールですが、ユーザーが入力するときにテキストが表示されません。<input type="password" />
リファレンス: input type=password
ピボット
複数の項目を表示するタブ コントロールを作成します。<div data-win-control='WinJS.UI.Pivot'></div>
リファレンス: WinJS.UI.Pivot
ピボット項目
タブ コントロール内のタブを作成します。<div data-win-control='WinJS.UI.PivotItem'></div>
リファレンス: WinJS.UI.PivotItem
ポップアップ メニュー
「"コンテキスト メニュー"」をご覧ください。進行状況バー
作業が進行中であることを示すバーを表示します。進行状況不定リングは、Windows Phone 8.1 ではサポートされていません。
<progress />
リファレンス: progress
進行状況リング (Windows のみ)
作業が進行中であることを示すリングを表示します。<progress class="win-ring" style="width: 20px; height: 20px" />
リファレンス: progress
プッシュ ボタン
「"ボタン"」をご覧ください。
R
ラジオ ボタン
ユーザーが選択できる値を複数の値の中の 1 つに制限する、選択コントロールの種類です。これを行うには、一連のラジオ ボタンの各ボタンに同じ名前を割り当て、相互にリンクさせる必要があります。<input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label> <input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label> <input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>
リファレンス: input type=radio
範囲
「"スライダー"」をご覧ください。評価 (Windows のみ)
ユーザーが評価できるようにします。または、それまでの評価を表示します。
<div data-win-control="WinJS.UI.Rating"></div>
リファレンス: WinJS.UI.Rating
リピーター
一連のデータから HTML を生成します。このコントロールを使って項目の一覧を生成します。<div data-win-control="WinJS.UI.Repeater"></div>
リファレンス: WinJS.UI.Repeater
リセット ボタン
フォームのデータをリセットします。
<button type="reset">Reset</button>
リファレンス: button、input type=reset
リッチ エディット ボックス/リッチ テキスト ボックス
テキスト入力ボックスと似たテキスト入力機能を備えるコントロールですが、子要素を含むコンテンツを扱うことができます。リッチ テキスト ボックスを作成するには、編集する要素の contentEditable プロパティを設定します。<div contentEditable="true"> <!-- Elements to edit. --> </div>
リファレンス: contentEditable
S
スクロール バー
コンテンツをスクロールするためのコンテナーです。要素の overflow スタイルを scroll または auto に設定すると、このスクロール機能を追加できます。<div style="overflow:scroll;"> <!-- Contents --> </div>
リファレンス: overflow
スクロール ビュー
ユーザーが拡大および縮小できるコンテンツのビューを表示し、エクスペリエンスを向上させるスナップ位置などの機能を提供します。<div style=overflow:scroll;-ms-content-zooming:zoom>> <!-- Contents to edit. --> </div>
リファレンス: overflow、ms-content-zooming
検索ボックス (Windows のみ)
ユーザーが検索クエリを実行したり、候補を選ぶことができます。<div data-win-control="WinJS.UI.SearchBox"></div>
リファレンス: WinJS.UI.SearchBox
選択
リスト ボックス、コンボ ボックス、またはドロップダウン リストを表します。<select> <option>Apple</option> <option>Banana</option> <option>Grape</option> <option>Orange</option> <option>Pear</option> <option>Watermelon</option> </select>
リファレンス: select
セマンティック ズーム
ユーザーが、項目のコレクションの 2 つの異なる表示の間でズームを実行できるようにします。<div data-win-control="WinJS.UI.SemanticZoom"> <!-- Control that provides the zoomed-in view. --> <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div> <!-- Control that provides the zoomed-out view. --> <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div> </div>
リファレンス: WinJS.UI.SemanticZoom
設定ポップアップ (Windows のみ)
アプリの設定にアクセスできるようにします。<div data-win-control="WinJS.UI.SettingsFlyout"></div>
リファレンス: SettingsFlyout
単一行テキスト ボックス
「"テキスト ボックス"」をご覧ください。スライダー
数値を選択するためのスライダーを表示します。<input type="range" />
リファレンス: input type=range
分割ビュー
領域を 2 つの部分に分割します。端から表示できるウィンドウと、空いているスペースに広がるコンテンツ領域の 2 つです。<div data-win-control="WinJS.UI.SplitView"> </div>
リファレンス: SplitView
送信ボタン
クリックするとフォームが送信されるボタンを作成します。
<button type="submit">Submit</button>
リファレンス: button、input type=submit
svg
ベクター グラフィックスをレンダリングできる SVG ドキュメントまたはドキュメント フラグメントを定義します。<svg xmlns="http://www.w3.org/2000/svg"></svg>
リファレンス: svg
T
テキスト ボックス
単一行テキスト入力コントロール。<input type="text" />
リファレンス: input type=text
テキスト領域
複数行テキスト入力コントロール。<textarea></textarea>
リファレンス: textarea
TimePicker (Windows のみ)
ユーザーが時刻を指定できるようにします。
<div data-win-control="WinJS.UI.TimePicker"></div>
リファレンス: WinJS.UI.TimePicker
トグル スイッチ
2 つの状態を切り替えることができるスイッチを表します。<div data-win-control="WinJS.UI.ToggleSwitch"></div>
リファレンス: ToggleSwitch
ツール バー
一連のコマンドを表示します。Toolbar は Flyout や AppBar などの任意の場所に表示できます。<div data-win-control="WinJS.UI.Toolbar"> </div>
リファレンス: Toolbar
ヒント (Windows のみ)
リッチ コンテンツ (画像、書式付きテキストなど) をサポートするリッチなヒントを表示し、より多くの情報を提示します。<div data-win-control="WinJS.UI.ToolTip"></div>
リファレンス: WinJS.UI.Tooltip
ヒント (シンプル)
ある要素について、テキストのみの単純なヒントを表示します。<element title="tooltip text" />
リファレンス: title
U
URL 入力ボックス
URL を受け入れる単一行テキスト入力コントロールです。<input type="url" />
リファレンス: input type=url
V
ビデオ
ドキュメントで再生されるビデオ コンテンツを指定します。<video controls="controls"> <source src="url" type="videoType" /> </video>
リファレンス: video
Viewbox
1 つの子要素のサイズを変更することなく拡大または縮小して、表示領域内に表示されるようにします。このコントロールは、コンテナーのサイズの変更と子要素のサイズの変更に対応します。たとえば、メディア クエリを実行して縦横比が変化した場合、このコントロールが応答します。<div data-win-control="WinJS.UI.ViewBox"></div>
リファレンス: WinJS.UI.ViewBox
W
- Web ビュー
「"iframe"」をご覧ください。
Z
- ズーム対応スクロール ビュー
「"スクロール ビュー"」をご覧ください。