Web でタブコントロールを設定する方法

Web 用タブコントロールの外観は、次のプロパティを使用して設定できます。

[ Tab Control Class ] プロパティ

タブコントロールに関連付けるテーマクラスを指定するコントロールプロパティです。タブコントロールに事前に定められているクラスは Tab ですが、テーマ内で Tab クラスの下にほかのクラスを作成することもできます。次の図を参照してください。

TabPage クラス

コントロールのタブページは、Tab クラス (またはその下位クラス) の下にまとめられているクラスプロパティを使用してスタイルを指定できます。
これらのプロパティは次のとおりです:

Tab Item Class: タブコントロールのタブページのスタイルを設定します。
First Tab Item Class: タブコントロールの最初のタブページのスタイルを設定します。
Last Tab Item Class: タブコントロールの最後のタブページのスタイルを設定します。
Tab Strip Class: タブページがすべて含まれるストリップのスタイルを設定します。これは Section クラスです。

タブページのポイント、フォーカス、選択の効果を変更する方法

タブページでは、ユーザーがタブページをポイントしたとき、選択したとき、またはフォーカスを設定したときのスタイルを変更できます。
これには、TabPage クラスの下にまとめられている次のクラスプロパティを使用します。

Selected Class
Hovered Class
Focused Class

これらのクラスは、TabPage クラスまたはその下位クラスです。

例

次の図に示すタブコントロールが必要であるとします。

この例では、 [ Tab Control Class ] プロパティは TabSessions です。TabSessions クラスには、次の関連付けがあります:

Tab Item Class = TabPageSessions
First Tab Item Class = TabPageSessions
Last Tab Item Class= TabPageSessions
Tab Strip Class = TabSessionStrip

TabPageSessions と TabSessionStrip のプロパティは背景色を #458686 に設定し、フォントのプロパティを次のようにします:
.TabPageSessions
{
    background-color: #458686;
text-decoration: none;
    color: white;
    text-transform: uppercase;
}
TabPageSessions の [ Selected Class ] プロパティは TabPageSessionsSelected クラスに設定します。このクラスでは、選択されたタブページのデザイン仕様に従って [ ForeColor ] プロパティを黒に設定します。