アプリバーとツールバーのスタイル指定 (HTML)

[アーティクル]
03/04/2016

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

アプリバーまたはツールバーとそれらのコントロールのスタイルを設定する方法の例を示します。

必要条件

概要

「クイックスタート: コントロールのスタイル」では、Windows 10 の外観をアプリに自動的に適用する一連のスタイルを JavaScript 用 Windows ライブラリのスタイルシートで利用する方法について説明しています。以下の例では、カスケードスタイルシート (CSS) を使って一部のアプリバーのスタイルをカスタマイズする方法を示しています。

淡色テーマと濃色テーマ

アプリに淡色スタイルシートまたは濃色スタイルシートを選ぶと、アプリバーやアプリのその他のコントロールの外観に影響します。サンプルのアプリバー

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

濃色スタイルシートを選ぶには:

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

次のような外観の AppBar が作成されます。

濃色スタイルのアプリバー

または、淡色スタイルシートを選ぶには:

<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

次のような外観の AppBar が作成されます。

淡色スタイルのアプリバー

同じスタイルシートを使用すると、ツールバーが同様の外観になります。

便利な CSS プロパティ

次の CSS プロパティは、AppBar とツールバーのコントロールで一般的に使われています。

境界線の色: アプリバーの境界線の色を制御します。

たとえば、border-color: rgb(255, 224, 100) と指定します。
背景色: アプリバーの背景色を制御します。

たとえば、background-color: rgb(255, 224, 100) と指定します。

注これらの値は、通常、ui-light.css または ui-dark.css で事前に設定されています。

構成要素と状態の一般的なセレクター

コントロールの構成要素と状態のスタイルを指定する場合は、次のような CSS セレクターを使うと便利です。

.win-command AppBar のコマンドラベルのスタイルを指定します。
```
.win-appbar .win-command
{
    color: rgb(28, 160, 218);
}
```
注ユーザーは、省略記号をタッチまたはクリックしてアプリバーを開き、この効果を確認する必要があります。コマンドのラベルは、既定では非表示です。
.win-commandimage ボタンのアイコンイメージのスタイルを指定します。
```
.win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}
```

擬似クラス

次の Pseudo_classes をセレクターとして使うことで、特定の状態にあるときのアプリバーボタンのスタイルを指定できます。

:hover - ユーザーはボタンのアイコンの上にカーソルを置きますが、それをクリックしてアクティブにしません。カーソルがボタンから離れるまで、ボタンの背景色が変わります。この状態のときに、既定ではボタンのラベルのヒントが表示されます。
:active - ユーザーがコントロールを押してからオプションを選ぶか、ボタンが type="toggle" に設定された場合、ボタンがアクティブになります。
:disabled - アイコンの色の変更は、ボタンがユーザーの操作を受け付けることができないことを示します。この擬似クラスを適用する場合、ボタンの disabled プロパティは "disabled" に設定する必要があります。

カスタム配色を使ったアプリバーのスタイルの指定

アプリバーのスタイル指定のもう 1 つの例

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

次のようなアプリバーの配色が作成されます。

黄色のアプリバー

オーバーフロー領域の背景色のスタイルを設定する場合は、次のようになります。

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

同じ方法でツールバーにスタイルを設定する場合は、次のようになります。

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

避けるべきデザイン

CSS を使って AppBar とツールバーの外観や操作感を変更することができます。これは特に、AppBar とツールバーのアニメーションのスムーズな動作に当てはまります。既知のリスク領域を示します。

padding — 既定値を変更しません。
border — 既定値を変更しません。
margin — 余白を均等に指定しますが、ToolBar と AppBar 要素でのみ指定します。
```
.win-toolbar, .win-appbar {
   margin: 3px;
}
```

background-color — スタイル指定は、動作領域とオーバーフロー領域で安全に行うことができます。

.win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

position, float — これらの CSS 属性を ToolBar 要素で直接指定しないでください。ただし、これらの規則を指定する親要素で、ツールバーをラップできます。注この制限は、AppBar には適用されません。

既知の問題

ツールバーの非表示 - ツールバーコンポーネントは、パブリック API のみを使って非表示にする必要があります。"包括的な" CSS クラスを使ってビューから複数のコンポーネントを非表示にすることが一般的ですが、これはツールバー (または AppBar) に対しては良い方法ではありません。問題は、ツールバーのパフォーマンスが、コマンドが表示されるかどうかを判断するために DOM に依存するのではなく、コマンドの状態をキャッシュするために最適化されていることです。これにより、ツールバーは利用できるアクティブ領域に収まらないときに、アダプティブなオーバーフローコマンドとすることができ、DOM から読み取るときに発生する、コストがかかるブラウザーレイアウトを回避することができます。 CSS を使ってスタイルボタンを非表示とすることは、ツールバーが、一部のスタイルが非表示となったことを認識せず、ウィンドウのサイズ変更中にツールバーのアクティブ領域の利用可能な領域が縮小されるとすぐに、コマンドのオーバーフローを開始することを意味します。

その代わり、Command.hidden プロパティを設定するか、ToolBar.showOnlyCommands() メソッドを呼び出すことでのみ、ツールバーのコマンドを表示または非表示にする必要があります。
アダプティブオーバーフローエラー - ツールバーのアダプティブオーバーフロー動作は、ToolBar 要素が "コンテンツに合わせてサイズ変更" になっているときは正常に動作しません。

たとえば、ツールバーコンポーネントは、他のコンポーネント内に存在するように設計されています (通常、別の div 要素内にネストされます)。通常、独自の div 内で、ツールバーは親の幅の最大 100% を占めます。ただし、親によって使われる CSS レイアウトがいくつかの可変ボックス内でネストされ、親のカスタム transportcontrols クラスで align-items:center; を使ってコマンドの幅にツールバーを押しつぶしているだけの場合、予期しない動作になります。ツールバーはその width をキャッシュし、十分な容量がないと判断すると、コマンドのオーバーフローを試みます。ツールバーには、一定の要素の幅が必要ですが、このシナリオで使われるスタイルにより、柔軟性のある幅になります。

このシナリオの回避策は、(ツールバーの非表示の解決策と組み合わされた場合でも) 親のカスタム transportcontrols クラスを変更して align-items:stretch; を使うことです。テストでは、これは簡単な解決策であることが示されていますが、なんらかの理由で align-items に変更を加えることができない場合、align-self:stretch を ToolBar 要素に直接配置することで、最終的な結果を達成できます。

要約と次のステップ

この記事では、AppBar およびツールバーとそのコントロールのスタイルを指定する方法の例をいくつか示しました。また、アプリケーションで AppBar とツールバーの使用に関する問題を回避できるように、留意する必要がある設計の問題のいくつかも示しました。

AppBar とツールバーのスタイル指定の—実践—について詳しくは、WinJS を試す Web サイトをご覧ください。コードを操作すると、その結果がすぐに表示されます。

次の方法で共有

アプリバーとツールバーのスタイル指定 (HTML)

必要条件

概要

淡色テーマと濃色テーマ

便利な CSS プロパティ

構成要素と状態の一般的なセレクター

擬似クラス

カスタム配色を使ったアプリバーのスタイルの指定

避けるべきデザイン

既知の問題

要約と次のステップ

関連トピック

その他のリソース

次の方法で共有

アプリ バーとツール バーのスタイル指定 (HTML)

必要条件

概要

淡色テーマと濃色テーマ

便利な CSS プロパティ

構成要素と状態の一般的なセレクター

擬似クラス

カスタム配色を使ったアプリ バーのスタイルの指定

避けるべきデザイン

既知の問題

要約と次のステップ

関連トピック

その他のリソース

アプリバーとツールバーのスタイル指定 (HTML)

カスタム配色を使ったアプリバーのスタイルの指定