コントロールの一覧 (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

  クイック スタート: 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

  クイック スタート: 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

  クイック スタート: 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

  HTML ハブ コントロールのサンプル

• ハブのセクション (Windows のみ)
  ハブのセクションを定義します。

  <div data-win-control="WinJS.UI.HubSection"></div>
  

  リファレンス: WinJS.UI.HubSection

  HTML ハブ コントロールのサンプル

• ハイパーリンク
  「"a"」をご覧ください。

I

• iframe
  他のドキュメントを表示できるインライン フローティング フレームです。

  <iframe src="url" />
  

  リファレンス: iframe

• img
  画像を表示します。

  <img src="url" />
  

  リファレンス: img

• 項目コンテナー
  押下、スワイプ、ドラッグができる項目を定義します。

  <div data-win-control="WinJS.UI.ItemContainer"></div>
  

  リファレンス: WinJS.UI.ItemContainer

  HTML 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

  クイック スタート: 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

  HTML NavBar コントロールのサンプルに関するページ

• ナビゲーション バー コマンド (Windows のみ)
  ナビゲーション バーのコンテナーに含まれるナビゲーション コマンドを表します。

  <div data-win-control="WinJS.UI.NavBarCommand"></div>
  

  リファレンス: WinJS.UI.NavBarCommand

  HTML NavBar コントロールのサンプルに関するページ

• ナビゲーション バー コンテナー (Windows のみ)
  ナビゲーション バー内のナビゲーション バー コマンドのグループが含まれています。

  <div data-win-control="WinJS.UI.NavBarContainer"></div>
  

  リファレンス: WinJS.UI.NavBarContainer

  HTML NavBar コントロールのサンプルに関するページ

• 数値入力ボックス
  数値を受け入れる単一行入力コントロールです。

  <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

  HTML リピーター コントロールのサンプル

• リセット ボタン
  

  フォームのデータをリセットします。

  <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

  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

  クイック スタート: 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

• ズーム対応スクロール ビュー
  「"スクロール ビュー"」をご覧ください。

関連トピック

try.buildwinjs.com