ボタンのスタイルを指定する方法

  • [アーティクル]

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

多くの CSS プロパティと擬似クラスで button のスタイルを指定できます。 このトピックでは、一般に使われているプロパティと擬似クラスの一部を取り上げて説明します。このほか、WinJS の win-backbutton CSS クラスの使い方を、例を使って説明します。

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

テクノロジ

必要条件

便利な CSS プロパティ

CSS には、HTML 要素のスタイル指定に使用できる多くのプロパティが用意されています。ただし、このプロパティには膨大な数があり、残らず目を通すことは気が遠くなる作業です。そこで、ここでは button コントロールのスタイル指定にとりわけ便利な CSS プロパティを一部抜粋して一覧にしています。

  • font-family
    ボタンのテキストに使うフォントを指定します。 この例では、font-family を "Segoe UI Light" に設定します。

    <button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>

  • font-size
    ボタンのテキストに使うフォントのサイズを指定します。絶対サイズ、相対サイズ、長さの絶対値、百分率など、さまざまな形式を使用できます。詳しくは、font-size のリファレンスをご覧ください。

    この例では、font-family を 20 ポイントに設定します。

    <button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>

  • color
    ボタン テキストの色を指定します。

    この例では、color プロパティの設定方法をいくつか示しています。

    <button id="pinkButton1" style="color: DeepPink">A button</button>
<button id="pinkButton2" style="color: #FF1493">A button</button>
<button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>

  • background-color
    ボタンの表面の色を指定します。

    この例では、background-color プロパティの設定方法をいくつか示しています。

    <button id="backgroundButton1" style="background-color: Black">A button</button>
<button id="backgroundButton2" style="background-color: #000000">A button</button>
<button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>

  • border
    ボタンの境界線の太さ、線のスタイル、色を指定します。

    この例では、2 ピクセルの実線による境界線を作成します。

    <button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>

(使用できる CSS プロパティはここに挙げたものがすべてではありません。CSS プロパティの一覧の完全版については、「カスケード スタイル シートのリファレンス」をご覧ください。)

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

button コントロールには、スタイル指定のための擬似要素は含まれていません。

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

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

  • :hover
    ユーザーが button の上にカーソルを置いているものの、クリックしてアクティブ化していないときの button コントロールにスタイルを適用します。

    この例では、ホバー状態の button のスタイルを定義します。

    #hoverButton:hover {
    background-color: deeppink;
}

    <button id="hoverButton">A button</button>

  • :active
    アクティブになっているときの button コントロールにスタイルを適用します。button がアクティブになるのは、ユーザーがコントロールを押してから離すまでの間です。ユーザーがコントロールを押し、ドラッグしたままポインターをボタンの外に持っていった場合でも、コントロールはユーザーがポインターを離すまでアクティブになった状態が続きます。

    この例では、アクティブ状態の button の背景色を変更します。

    #activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}

    <button id="activeButton">A button</button>

  • :focus
    フォーカスがあるときの button コントロールにスタイルを適用します。 button にフォーカスを設定するには、いくつかの方法があります。

    • ポインティング デバイスで button を指定します。
    • Tab キーや Shift + Tab キーで button に移動します。
    • keyboard shortcut を使って button を選びます。

    この例では、button がフォーカスを受け取ったときの button の背景色を変更します。

    #focusButton:focus {
   background-color: #ffc;
}

    <button id="focusButton">A button</button>

  • :disabled
    無効になっているときの button コントロールにスタイルを適用します。 ボタンを無効にするには、HTML に disabled 属性を追加するか、JavaScript で disabled プロパティを true に設定します。

    この例では、ボタンを無効にし、そのスタイルを定義します。

    #disabledButton:disabled {
   border-style: dotted;
}

    <button id="disabledButton" disabled>A button</button>

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

WinJS CSS クラス

WinJS には、特定のコントロールのスタイル指定に使うことができる CSS が用意されています。button コントロールについては、win-backbutton クラスがあります。これは、button にナビゲーション ボタンの外観を設定し、前の場所に戻れるようにするためのものです。

注  このクラスを使うには、ページに WinJS のスタイル シートへの参照が含まれていることが必要です。詳しくは、「JavaScript 用 Windows ライブラリ スタイル シート」をご覧ください。

 

この例では、win-backbutton クラスを使って button にナビゲーション ボタンのスタイルを指定します。

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

このクラスを使うと、button の外観は次のようになります。

win-backbutton クラスを使ったボタン

関連トピック

HTML 基本コントロールのサンプルに関するページ

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

ボタンのガイドラインとチェック リスト