言語: HTML | XAML

機能別コントロール (HTML)

Applies to Windows and Windows Phone

JavaScript を使った Windows ランタイム アプリでは、多くの機能を実行するコントロールを使用できます。類似する機能を持つコントロールを比較すると、シナリオに合わせて適切なコントロールを選ぶことができます (アルファベット順のコントロール一覧については、「コントロールの一覧」をご覧ください)。

これらの機能の実際の使い方については、「アプリの機能の概要」シリーズの次のトピックをご覧ください :  Windows ストア アプリ UI の概要

アプリ バーとコマンド

アプリ バー

アプリ特有のコマンドを表示するツール バーを表示します。


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

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

クイック スタート: アプリ バーの追加

コンテキスト メニュー

ユーザーが JavaScript を使った Windows ランタイム アプリのテキストまたは UI オブジェクト上で操作 (クリップボード コマンドなど) を実行するための軽量なメニューを表示します。


var menu = new Windows.UI.Popups.PopupMenu();


リファレンス: Windows.UI.Popups.PopupMenu

メニュー (Windows のみ)

メニューを表示します。


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

リファレンス: Menu

メニュー コマンド (Windows のみ)

Menu オブジェクトに表示されるコマンドを表します。


<button data-win-control="WinJS.UI.MenuCommand" />

リファレンス: MenuCommand

ナビゲーション バー (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 コントロールのサンプルに関するページ

ポップアップ メニュー

「"コンテキスト メニュー"」をご覧ください。

ボタン

戻るボタン (Windows のみ)

前に戻る移動をボタンの形で提供します。


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

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

ボタン

ボタン コントロール

ボタン コントロールを表します。


<button>A button</button>

- または -


<input type="button" value="A button" />

リファレンス: buttoninput type=button

クイック スタート: ボタンの追加

プッシュ ボタン

「ボタン」をご覧ください。

リセット ボタン

リセット ボタン

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


<button type="reset">Reset</button>

リファレンス: buttoninput type=reset

クイック スタート: ボタンの追加

送信ボタン
送信ボタン コントロール

クリックするとフォームが送信されるボタンを作成します。


<button type="submit">Submit</button>


リファレンス: buttoninput type=submit

クイック スタート: ボタンの追加

コレクション コントロールとデータ コントロール

FlipView

コレクションを表示します (一度に 1 項目)。


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

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

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

グリッド ビュー

グリッド レイアウトの ListView です。詳しくは、「"リスト ビュー"」をご覧ください。


<div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

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

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

ジャンプ ビューアー

「セマンティック ズーム」をご覧ください。

リピーター

一連のデータから HTML を生成します。このコントロールを使って項目の一覧を生成します。


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

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

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

セマンティック ズーム

ユーザーが、項目のコレクションの 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.Flyout"></div>

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

クイック スタート: ポップアップの追加

メニュー (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

クイック スタート: メッセージ ダイアログの追加

ポップアップ メニュー

ショートカット メニューを表します。


var popupMenu = new Windows.UI.Popups.PopupMenu();


リファレンス: Windows.UI.Popups.PopupMenu

設定ポップアップ (Windows のみ)

アプリの設定にアクセスできるようにします。


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


リファレンス: SettingsFlyout

ヒント (Windows のみ)

リッチ コンテンツ (画像、書式付きテキストなど) をサポートするリッチなヒントを表示し、より多くの情報を提示します。


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

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

ヒント (シンプル)

ある要素について、テキストのみの単純なヒントを表示します。


<element title="tooltip text" />

リファレンス: title

グラフィックス

キャンバス

ドキュメント上の画像およびグラフィックスの描画、レンダリング、操作に使われるオブジェクトを提供します。


<canvas />

リファレンス: canvas

クイック スタート: キャンバスへの描画

svg

ベクター グラフィックスをレンダリングできる SVG ドキュメントまたはドキュメント フラグメントを定義します。


<svg xmlns="http://www.w3.org/2000/svg"></svg>

リファレンス: svg

画像

img

画像を表示します。


<img src="url" />

リファレンス: img

レイアウト コントロール

可変ボックス

CSS レイアウトは、ボックスのサイズを定義するときに利用可能な領域を考慮することで、相対サイズと相対配置を有効にします。


<div style="display: -ms-box;">
    <!-- Child elements -->
</div>

リファレンス: display

グリッド

列と行で構成される可変グリッド領域を定義する CSS レイアウト。


<div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>


リファレンス: display

ハブ (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 ハブ コントロールのサンプル

項目コンテナー

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


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

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

HTML ItemContainer のサンプル

パン スクロール ビュー

「"スクロール ビュー"」をご覧ください。

ピボット

複数の項目を表示するタブ コントロールを作成します。


<div data-win-control='WinJS.UI.Pivot'></div>

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

ピボット項目

タブ コントロール内のタブを作成します。


<div data-win-control='WinJS.UI.PivotItem'></div>

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

スクロール バー

コンテンツをスクロールするためのコンテナーです。要素の 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

Viewbox

1 つの子要素のサイズを変更することなく拡大または縮小して、表示領域内に表示されるようにします。このコントロールは、コンテナーのサイズの変更と子要素のサイズの変更に対応します。たとえば、メディア クエリを実行して縦横比が変化した場合、このコントロールが応答します。


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

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

ズーム対応スクロール ビュー

「"スクロール ビュー"」をご覧ください。

メディア コントロール

オーディオ

音楽や効果など、ドキュメントで再生されるサウンドまたはオーディオ コンテンツを指定します。


<audio>
    <source src="uri" type="audioType" />
</audio>

リファレンス: audio

メディア要素

「"オーディオ"」および「"ビデオ"」をご覧ください。

メディア プレーヤー

「"オーディオ"」および「"ビデオ"」をご覧ください。

ビデオ

ドキュメントで再生されるビデオ コンテンツを指定します。


<video controls="controls">
   <source src="url" type="videoType" />
</video> 

リファレンス: video

ナビゲーション

HTML コントロール

HTML ページからコンテンツを表示します。


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

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

iframe

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


<iframe src="url" />

リファレンス: iframe

ページ コントロール

ナビゲーション アプリ内のカスタム コントロールまたはページを表します。

リファレンス: WinJS.UI.Pages.PageControl

クイック スタート: 単一ページ ナビゲーションの使用

Web ビュー

「"iframe"」をご覧ください。

プログレス コントロール

進行状況バー

プログレス コントロールのスタイル

作業が進行中であることを示すバーを表示します。


<progress />

リファレンス: progress

クイック スタート: プログレス コントロールの追加

進行状況リング (Windows のみ)

作業が進行中であることを示すリングを表示します。


<progress class="win-ring" style="width: 20px; height: 20px" />

リファレンス: progress

クイック スタート: プログレス コントロールの追加

評価コントロール

評価 (Windows のみ)

評価コントロール

ユーザーが評価できるようにします。または、それまでの評価を表示します。


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

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

クイック スタート: 評価の追加

選択コントロール

チェック ボックス

複数のチェック ボックス コントロール

ユーザーが選択またはクリアできるチェック ボックスを表します。


<input type="checkbox" />

リファレンス: input type=checkbox

クイック スタート: チェック ボックスの追加

コンボ ボックス

「"選択"」をご覧ください。

DatePicker (Windows のみ)
DatePicker 淡色スタイル

日付を設定します。


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

リファレンス: DatePicker

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

ファイル アップロード

テキスト ボックスと参照ボタンがあるファイル アップロード オブジェクトを作成します。


<input type="file" />

リファレンス: input type=file

リスト ボックス

「"選択"」をご覧ください。

リスト ビュー

リストまたはグリッド レイアウト内のデータのコレクションを表示します。


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

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

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

ラジオ ボタン

ユーザーが選択できる値を複数の値の中の 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.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

スライダー

数値を選択するためのスライダーを表示します。


<input type="range" />


リファレンス: input type=range

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

テキスト コントロール

メール入力ボックス

1 つ以上のメール アドレスを受け入れる単一行入力コントロールです。


<input type="email" />

リファレンス: input type=email

複数行テキスト ボックス

「"テキスト領域"」をご覧ください。

数値入力ボックス

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


<input type="number" />

リファレンス: input type=number

パスワード入力ボックス

テキスト入力コントロールに似ている単一行テキスト入力コントロールですが、ユーザーが入力するときにテキストが表示されません。


<input type="password" />

リファレンス: input type=password

リッチ エディット ボックス/リッチ テキスト ボックス

テキスト入力ボックスと似たテキスト入力機能を備えるコントロールですが、子要素を含むコンテンツを扱うことができます。リッチ テキスト ボックスを作成するには、編集する要素の contentEditable プロパティを設定します。


<div contentEditable="true">
    <!-- Elements to edit. -->
</div>

リファレンス: contentEditable

単一行テキスト ボックス

「"テキスト ボックス"」をご覧ください。

テキスト ボックス

単一行テキスト入力コントロール。


<input type="text" />

リファレンス: input type=text

テキスト領域

複数行テキスト入力コントロール。


<textarea></textarea>

リファレンス: textarea

URL 入力ボックス

URL を受け入れる単一行テキスト入力コントロールです。


<input type="url" />

リファレンス: input type=url

ユーザー ヘルプ

ラベル

ページ上の他の要素のラベルを指定します。


<label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

リファレンス: label

ヒント (Windows のみ)

リッチ コンテンツ (画像、書式付きテキストなど) をサポートするリッチなヒントを表示し、より多くの情報を提示します。


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

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

ヒント (シンプル)

ある要素について、テキストのみの単純なヒントを表示します。


<element title="tooltip text" />

リファレンス: title

関連トピック

コントロールの一覧
クイック スタート: コントロールの追加
クイック スタート: WinJS コントロールとスタイルの追加
Windows Phone での WinJS API の変更点

 

 

表示:
© 2015 Microsoft