クイック スタート: コントロールのスタイル (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

JavaScript を使った Windows ランタイム アプリでコントロールの外観をカスタマイズするには、Web サイトの場合と同様に、カスケード スタイル シート (CSS) を使います。JavaScript を使った Windows ストア アプリも、高度なコントロール スタイル機能をサポートしています。JavaScript 用 Windows ライブラリによるスタイルの包括的なセットによって、アプリに Windows 8 の外観を簡単に適用できます。

ここでは、WinJS スタイル シートを含める方法、HTML コントロール (組み込みコントロール) のスタイルを設定する方法、WinJS コントロールのスタイルを設定する方法、WinJS の文字体裁クラスを使用する方法を説明します。

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

必要条件

JavaScript 用 Windows ライブラリ スタイル シートを使うことの利点

WinJS のスタイル シートの特徴を次に示します。

  • 一連のスタイルを適用するだけで、コントロールの見栄えが良くなり、タッチ ベース ディスプレイで快適に使うことができます。
  • ハイ コントラスト モードを自動的にサポート。適用するスタイルはハイ コントラストとなるようにデザインされているため、アプリがハイ コントラスト モードのデバイスで実行されているときに正確に表示されます。
  • その他の言語を自動的にサポート。WinJS スタイル シートでは、Windows 8 がサポートするすべての言語に対して、自動的に正しいフォントが適用されます。1 つのアプリで複数の言語を使って、正確に表示することもできます。
  • 読む方向が異なる言語を自動的にサポート。HTML と WinJS のコントロール、レイアウト、スタイルでは、文章を右から左に読む言語に自動的に対応します。

最新の JavaScript 用 Windows ライブラリ スタイル シートの使用

最新の WinJS スタイル シートを有効にするには

  1. [WinJS を入手する] から最新バージョンをダウンロードし、アプリまたは Web サイトのディレクトリにコピーします。
  2. WinJS 機能を使うアプリまたは Web サイトの各ページに WinJS CSS とスクリプト参照を追加します。

この例は、ルート ディレクトリに WinJS ファイルがあるアプリでこれらの参照がどのように見えるかを示しています。

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS の既定のスタイル シートである ui-dark.css と ui-light.css は、アプリに Windows の外観を適用します。

  • 主に画像やビデオを表示するアプリには、濃色スタイル シートを使うことをお勧めします。
  • テキストが大量に含まれるアプリには、淡色スタイル シートを使うことをお勧めします。

(カスタム配色を使っている場合、お使いのアプリの外観が最適に見えるスタイル シートを使ってください)。

これらのスタイル シートは以下のスタイルを定義します。

  • 基本スタイル

    html 要素、body 要素、iframe 要素のスタイル。

  • 組み込み HTML コントロール スタイル

    button などの、組み込み HTML コントロールのスタイル。

  • その他の組み込み HTML コントロール クラス

    組み込み HTML コントロールに割り当てて、その外観を変えることができる CSS クラス。これらのクラスのすべての一覧については、「HTML コントロールのための CSS クラス」をご覧ください。

  • WinJS コントロールのスタイル

    WinJS コントロールのスタイルを設定できる部分を表す CSS クラス。

  • 文字体裁スタイル

    h1、dd、p 要素のような文字体裁要素のスタイル。

  • その他の文字体裁クラス

    テキストのスタイル指定に使用できる CSS クラス。たとえば、win-type-large クラスを使って、要素のテキストを大きくすることができます。

アプリの外観のカスタマイズ

アプリの外観をカスタマイズする場合、WinJS スタイルを捨てて最初から作り直す必要はありません。変更するスタイルを上書きすることで、簡単に段階的に変更できます。

実際、独自に作成するよりも、WinJS スタイルを上書きする方が良い結果が得られます。ハイ コントラスト モードでアプリを実行すると、既定のスタイルの色に加えた変更は、ハイ コントラストをサポートする配色によって自動的に上書きされます。

独自のスタイル シートを作成し、WinJS スタイルシートの後にそのスタイルシートを適用することで、既定のスタイル シートのすべてのスタイルを上書きすることができます。


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

カラーの指定

WinJS のスタイル シートを上書きするか、独自のスタイルを指定できます。CSS システム カラーを使用すると、ハイ コントラスト モードでアプリを実行するとき自動的に適正に表示されるため、独自のスタイルを指定する場合は CSS システム カラーの使用をお勧めします。システム カラーの一覧については、「ユーザー定義のシステム カラー」をご覧ください。

ユーザー定義のシステム カラーを使わず、RGB 値を指定する場合、既にある WinJS スタイルを上書きするのであれば問題ありません。WinJS のスタイルを上書きし、システムをハイ コントラスト モードに切り替えると、カスタム カラー情報は無視され、代わりにハイ コントラスト モード互換パレットが使われます。

HTML コントロールのスタイル

CSS を使用して標準的な HTML ページのスタイルを設定するように、HTML コントロール (button、textarea、select など、HTML5 規格に含まれるコントロール) のスタイルを設定することができます (CSS とその動作について詳しくは、HTML/CSS/JavaScript の基本に関するページをご覧ください)。

たとえば、幅 400 ピクセルとなるようにテキスト入力ボックスのスタイルを設定するには、次のように CCS を作成します。

input[type=text]
{
    width: 400px;
}

テキスト入力コントロール

標準的なコントロールには複数のコンポーネント (下位区分) があります。たとえば、前の例のテキスト入力コントロールは、テキスト値とクリア ボタンという 2 つの部分から構成されています。

ラベル付きコンポーネントを使用したテキスト入力コントロール

JavaScript を使った Windows ストア アプリでは、CSS 疑似要素を利用して、多くのコントロールの各部のスタイルを個別に設定することができます。テキスト入力値に対応する擬似要素は -ms-value、クリア ボタンに対応する擬似要素は -ms-clear です。

値が入力されたテキスト入力コントロール

コントロールの各部のスタイルを設定するには、次の構文を使用します。

element selector::part name { /* ここにスタイルを入力してください */ }

たとえば、テキスト入力ボックスのクリア ボタンのスタイルを設定するには、次のスタイルを作成します。

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

オレンジ色の枠で囲まれたクリア ボタンを持つテキスト入力コントロール

擬似要素セレクターに他のセレクターを組み合わせることで、特定のクラス名または ID を持つコントロールを対象として設定できます。

たとえば、"orangeButton" クラスを使うテキスト入力コントロールのクリア ボタンのスタイルを設定するには、次のスタイルを作成します。

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

擬似要素とその他のセレクターを結合するさまざまな方法について詳しくは、「CSS セレクターとは」をご覧ください。

各 HTML コントロールで使用できる構成要素は次のとおりです。

コントロール 構成要素
input type=checkbox -ms-check
input type=radio -ms-check
input type=password -ms-reveal
input type=range -ms-fill-lower、-ms-fill-upper、-ms-thumb、-ms-track、-ms-ticks-after、-ms-ticks-before、-ms-tooltip
input type=email、input type=number、input type=password、input type=search、input type=tel、input type=url -ms-value、-ms-clear
input type=file -ms-value、-ms-browse
progress -ms-fill
select -ms-value、-ms-expand

 

また、Select コントロールの option 要素で CSS スタイルがサポートされ、色やフォント スタイルなど、ドロップダウン項目の外観をより細かく制御することができます。これによってたとえば、フォント ピッカー コントロールを使った編集のシナリオに対応できます。ユーザーは、使うフォントを選ぶ前にドロップダウンでさまざまなフォント スタイルをプレビューすることができます。


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

HTML コントロール クラスの使用

スタイル シートに含まれる CSS クラスを組み込み HTML コントロールに割り当てることで、コントロールにさまざまな外観を適用することができます。たとえば、win-backbutton クラスを使って、通常のボタンの外観を [戻る] ボタンと同じような外観にすることができます。

<button class="win-backbutton"></button>

このクラスを使用すると、ボタンの外観は次のようになります。

backbutton CSS クラスを使用したボタン

JavaScript 用 Windows ライブラリ コントロールのスタイル

WinJS コントロールのスタイルを操作するには、そのコントロールの WinJS CSS クラスを上書きします。たとえば、AppBar のスタイルを設定するには、win-appbar クラスを上書きします。

次の例では、ListView の進行状況インジケーターを非表示にするスタイルを作成します。

.win-listView .win-progress {
    display: none;
}

利用可能なクラスの完全なリストについて詳しくは、「WinJS CSS クラス」をご覧ください。指定のコントロールが使うクラスについて詳しくは、そのコントロールの参照ページをご覧ください。

ListView、FlipView など、一部のコントロールでは項目テンプレートもサポートされます。項目テンプレートを使用することで、リスト項目の外観と内容を非常に細かく設定することができます。詳しくは、「クイック スタート: ListView の追加」と「クイック スタート: FlipView の追加」をご覧ください。

文字体裁クラスの使用

スタイル シートには、テキストを含めてすべての要素に適用できる文字体裁の CSS クラスも使用できます。たとえば、win-title クラスを使って、見出しに Windows 8 タイトル スタイルを適用できます。この例では、文字体裁クラスを使ってさまざまな種類のタイトルを作成しています。


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

文字体裁クラスを使った要素

これらの文字体裁クラスのすべての一覧について詳しくは、「文字体裁 CSS クラス」をご覧ください。

サンプル

スタイルについて詳しくは、これらのサンプルをチェックしてください。

要約

WinJS スタイル シートの使用方法、組み込みコントロールと WinJS コントロールのスタイルを設定する方法、WinJS で文字体裁用に提供されているその他の CSS クラスの使用方法について学習しました。

関連トピック

HTML/CSS/JavaScript の基本

CSS セレクターとは

WinJS CSS クラス

HTML コントロールのための CSS クラス

Windows ランタイムと JavaScript 用 Windows ライブラリの API リファレンス