次の方法で共有

プログレス コントロールのスタイルを指定する方法 (HTML)

  • [アーティクル]

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

カスケード スタイル シート (CSS) と、JavaScript 用 Windows ライブラリ スタイル シートを使って progress コントロールのスタイルを指定する方法を説明します。

理解しておく必要があること

テクノロジ

必要条件

  • このトピックは、3 種類の progress コントロール (進行状況確定バー、進行状況不定バー、および進行状況不定リング) を作成する方法を読者が理解していることを前提にしています。各種の progress コントロールの追加について学習するには、「クイック スタート: プログレス コントロールの追加」をご覧ください。

便利な CSS プロパティ

これらの CSS プロパティは、progress コントロールのスタイル指定にとりわけ便利です。

  • width
    プログレス コントロールの幅を指定します。進行状況不定リングの場合、幅と高さは同じにする必要があります。

  • height
    プログレス コントロールの高さを指定します。進行状況不定リングの場合、幅と高さは同じにする必要があります。

  • color
    進行状況確定バーのバー部分の色、進行状況不定バーと進行状況不定リング内のドットの色を指定します。

    バーが青い progress 状況確定バーを作成する例を次に示します。

    <progress value="0.4" style="color: blue"  />

プログレス コントロールのスタイルを指定するための擬似要素

progress コントロールには、コントロールの特定部分のスタイルを指定するためにセレクターとして使うことができる以下の擬似要素が用意されています。

  • ::-ms-fill
    progress 状況確定コントロールのバー部分に 1 つ以上のスタイルを適用し、進行状況不定コントロールのアニメーションを指定します。

    animation-name スタイル プロパティ (進行状況不定バーと進行状況不定リングのアニメーションをコントロールする) 以外のすべてのスタイルが、進行状況確定バーのバー部分に適用されます。

    次に、progress コントロールを進行状況不定リングとして表示させる例を示します。

    

/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }

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

プログレス コントロールのスタイルを指定するための擬似クラス

このコントロールでは、このコントロールが特定の状態にある場合にこのコントロールのスタイルを指定するためにセレクターとして使うことができる、次の擬似クラスをサポートします。

  • :indeterminate
    不確定状態にある progress コントロールに 1 つ以上のスタイルを適用します。

    次に、progress 状況不定コントロールのスタイルを定義する例を示します。

    
progress:indeterminate {
    /* styling here */
}

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

プログレス コントロールのスタイルを指定するための WinJS CSS クラス

WinJS には、progress コントロールのスタイルを指定するための CSS クラスがいくつか用意されています。

これらのクラスを使うには、コントロールの class 属性を、クラスの名前に設定します。クラス名をスペースで区切り、複数のクラスを要素に割り当てることができます。次に、win-ring クラスと win-large クラスを progress コントロールに適用する例を示します。

<progress class="win-ring win-large" />

WinJS には、progress コントロールのスタイルを指定するための CSS クラスが用意されています。

  • win-error
    progress 状況確定バーの進行を止め、このバーをエラー スタイルで表示させます。

  • win-large
    progress コントロールを拡大します。このスタイルは、全画面を使ったモーダルな操作に使います。

  • win-medium
    progress コントロールを中程度の大きさにします。20 ポイント テキストの隣に進行状況リングを表示している場合は、このクラスを使います。

  • win-paused
    progress 状況確定バーの進行を止めます。

  • win-ring
    progress コントロールを進行状況不定リングとして表示します。progress コントロールの幅と高さを指定するには、width プロパティと height プロパティを設定するか、win-medium クラスまたは win-large クラスを使う必要があります。

関連トピック

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

プログレス コントロールのガイドラインとチェック リスト

CSS セレクターとは