ListView およびその項目のスタイル指定 (HTML)

  • [アーティクル]

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

ListView は、さまざまな方法でカスタマイズできます。ListView 自体、それに含まれる項目、それらの項目を構成するテンプレートのスタイルを指定できます。

JavaScript 用 Windows ライブラリ CSS クラスの使用

他の JavaScript 用 Windows ライブラリのコントロールと同様に、ListView には、外観をカスタマイズするために上書きできるクラスが複数用意されています。次のセクションでは、これらのクラスを使って ListView をカスタマイズする方法について説明します。

ListView 自体のスタイル指定

ListView の項目のスタイルを指定する方法について説明する前に、ListView 自体のスタイルを指定する方法を説明します。ListView のスタイル指定に使う主なクラスは次のとおりです。

  • win-listview: ListView 全体のスタイルを指定します。
  • win-viewport: ビューポートのスタイルを指定します。これは、スクロール バーが必要な場合に表示される場所です。
  • win-surface: ListView のスクロール可能な領域のスタイルを指定します。サーフェスがビューポートより大きい場合は、ビューポートにスクロール バーが表示されます。

グループ化された項目を含む典型的な ListView の例を次に示します。

グループ化された項目を含む ListView。

次の図は、同じ ListView を、win-listview、win-viewport、win-surface 部分を強調表示した状態で示します。

ListView の主なコンポーネント

スタイルの一般的な推奨事項

次の例に示すように、ListView には常に ID を割り当て、その ID を CSS セレクターの冒頭部で指定します。

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

ListView コントロールには、既定のスタイルが多数あります。既定のスタイルの 1 つを上書きしても効果が現れない場合は、既定のスタイルが変更されるだけの特徴的な設定が CSS セレクターに指定されていない可能性があります。

ListView コントロール全体のスタイル指定

項目の背景に固定表示される背景画像を ListView コントロールに追加する場合、またはコントロール全体に境界線を適用する場合は、win-listview クラスを上書きします。この例では、背景画像と赤色の境界線を ListView に追加しています。

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

この ListView の外観は次のようになります。

境界線と背景画像のある ListView

ListView の余白のスタイル指定

ListView に余白を適用するには、win-surface クラスを使います。ListView をホストする div 要素には余白を適用しないでください。適切なスタイルが適用されなくなります。代わりに、win-surface を使います。win-surface に余白を追加する場合は、それに応じて ListView の高さを調整してください。 高さを設定するには、ListView をホストする div 要素にスタイルを指定します。

list layout を使うときは、win-surface に余白やパディングを追加しないでください。

既定では、グループ ヘッダーの左余白は 70 ピクセルです。グループを表示する際に win-surface を変更する場合は、左余白を少なくとも 70 ピクセルとし、必要に応じて広げることをお勧めします。

スクロール方向に基づいたビューポートのスタイル指定

win-horizontal クラスと win-vertical クラスを使って、横方向または縦方向へスクロールするときに ListView にスタイルを適用できます。 この例では、横方向へスクロールする ListView で、ビューポートに左余白を追加しています。

#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

次の例では、縦方向へスクロールする ListView で、左余白を削除しています。ビュー状態がスナップの場合、一般的に ListView は縦方向になります。


#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
}

スクロール可能な領域全体のスタイル指定

ListView のスクロール可能な領域のスタイルを指定するには、win-surface クラスを上書きします。この例では、ユーザーが項目をスクロールするとスクロールされる背景画像を ListView に適用します。


#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
}

スタイル指定されたサーフェスを持つ ListView。

読み込み進行状況インジケーターのスタイル指定

ListView では、項目の読み込み中に progress インジケーターが表示されます。 win-progress クラスを上書きすることで、このインジケーターのスタイルを指定できます。この例では progress インジケーターを非表示にします。

#myListView .win-listview .win-progress{
    display: none;
}

項目とグループのスタイル指定

ListView には、グループと項目が格納されます。

  • 各グループは、win-groupheader クラスで表されるグループ ヘッダーに格納されます。
  • 各項目は、win-container クラスで表される項目コンテナーに格納されます。

ListView のグループ ヘッダー コンポーネントとコンテナー コンポーネント

項目のスタイル指定

ListView 内の項目のスタイルを指定するには、2 つの方法があります。項目テンプレートにスタイルを適用するか、win-container クラスを上書きします。テンプレートで必ず行う必要があることが 1 つあります。項目のサイズ設定です。項目のサイズを設定しないと、希望どおりのレイアウトになりません。

項目のサイズを設定するには:

  • WinJS.Binding.Template を使用している場合は、この例のように、WinJS.Binding.Template 要素の子のサイズを設定します。

    <!-- The WinJS.Binding.Template element. -->
<div id="templateExample" data-win-control="WinJS.Binding.Template">

    <!-- This is the root element. Be sure to set its width and height. -->
    <div style="width: 120px; height: 125px;">


        <img src="#" data-win-bind="alt: title; src: picture"
            style="width: 60px; height: 60px;" />
        <div>
            <h4 data-win-bind="innerText: title">
            </h4>

            <h6 data-win-bind="innerText: text">
            </h6>
        </div>
    </div>
</div>

  • テンプレート関数を使用している場合は、関数が返す DOM 要素の幅と高さを設定します。

項目コンテナーのスタイル指定

項目コンテナーのスタイルを指定するには、win-container クラスを上書きします。この例では、各項目コンテナーに余白を追加しています。

#myListView .win-listview .win-container{
    margin: 2px;
}

win-container でスタイルを指定できるプロパティは、margin と background の 2 つのみです。

透明な項目を作成するには、背景色を透明に設定します。次の例では、透明な項目を作成しています。

#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}

項目の余白とパディングのスタイル指定

項目間のスペースを広げるには、win-container クラスに余白を設定します。項目間のスペースを広げるためにパディングを追加することはお勧めできません。代わりに、余白を使ってください。同じ ListView 内のすべての項目に同じ余白を設定する必要があります。

ListView の項目の表示が開始された後で、win-container の余白またはパディングを変更しないでください。

グループ ヘッダーのスタイル指定

グループ ヘッダーのスタイルを指定するには、win-groupheader クラスを上書きします。この例では、グループ ヘッダーに灰色の背景を追加しています。

#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}

スタイル指定されたグループ ヘッダーを持つ ListView。

項目の対話的操作のスタイル指定

ホバー状態の項目のスタイル指定

ユーザーがポインターを項目上に置くと、項目はホバー状態になります。ホバー状態の項目のスタイルを変更するには、hover 擬似クラスを使います。この例では、ホバー状態の項目の背景と輪郭を変更しています。

#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}

ホバー状態の項目を持つ ListView

フォーカスが設定された項目のスタイル指定

フォーカスが設定された項目のスタイルを指定するには、項目コンテナーのスタイルを指定するときに、スタイル セレクターの一部として win-focus クラスを使います。フォーカスの輪郭のスタイルを指定するには、win-focusedoutline クラスを使います。この例では、輪郭を赤色の破線に変更しています。

#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

選択された項目のスタイル指定

既定では、選択された項目には選択の枠線が表示されます。選択された項目が "塗りつぶされた" ような外観にするには、ListView に win-selectionstylefilled CSS クラスを適用します。

選択された項目の外観をさらにカスタマイズするには、次のクラスを上書きします。

  • win-selectionborder

    選択された項目の周囲の境界線のスタイルを指定します。

  • win-selectionbackground

    選択された項目の背景のスタイルを指定します。

  • win-selectionhint

    選択された項目の背後に表示される 2 番目のチェック マークである選択ヒントのスタイルを指定します。項目をスワイプすると選択ヒントが表示されます。

  • win-selectioncheckmark

    選択された項目のチェック マークです。

  • win-selectioncheckmarkbackground

    選択された項目のチェック マークの背景です。

また、項目が選択されたときに、項目コンテナーなどの他のコンポーネントをカスタマイズするために、スタイル セレクターの一部として win-selected クラスを追加できます。