次の方法で共有


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

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

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

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>
    

    リファレンス: buttoninput 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>
    

    リファレンス: overflowms-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>
    

    リファレンス: buttoninput 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 のみ)
    TimePicker 淡色スタイル

    ユーザーが時刻を指定できるようにします。

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

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

    クイック スタート: TimePicker の追加

  • トグル スイッチ
    2 つの状態を切り替えることができるスイッチを表します。

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

    リファレンス: ToggleSwitch

  • ツール バー
    一連のコマンドを表示します。ToolbarFlyoutAppBar などの任意の場所に表示できます。

    <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