次の方法で共有

ASP.NET Web サーバー コントロールと CSS スタイル

  • [アーティクル]

更新 : 2007 年 11 月

ForeColor、BackColor、Height、Width などの各種の表示形式プロパティを設定することにより、コントロールの外観を制御できます。また、いくつかのコントロールは、追加のスタイル関連設定を公開するスタイル オブジェクトをサポートしています。

h4kete56.alert_note(ja-jp,VS.90).gifメモ :

ASP.NET Web ページは、実行時に HTML ページとして動作します。そのため、Web サーバー コントロール以外のページ上の要素の外観はカスケード スタイル シート (CSS: cascading style sheet) を使用して設定できます。さらに、カスケード スタイル シートの設定を含む ASP.NET テーマを定義し、ページまたはサイトに適用することもできます。詳細については、「ASP.NET のテーマとスキン」を参照してください。

ここでは、デザイン時またはプログラムによってスタイルを操作する方法を含めて、スタイルを直接設定する方法について説明します。

ブラウザへの表示形式プロパティのレンダリング

ページが実行されると、表示形式プロパティは、ユーザーが使用しているブラウザの機能に応じてレンダリングされます。ユーザーのブラウザがカスケード スタイル シート (CSS) をサポートしている場合、表示形式プロパティは、コントロールを構成する HTML 要素のスタイル属性としてレンダリングされます。たとえば、HyperLink Web サーバー コントロールを定義し、ForeColor プロパティを Red に設定し、Bold プロパティを true に設定し、Size プロパティを xx-small に設定しているときに、ユーザーのブラウザがスタイル シートをサポートしている場合、コントロールは次のように描画されます。

<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>

<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>

ブラウザがスタイルをサポートしていない場合、コントロールは他の方法 (<font> 要素など) を使用してレンダリングされます。上記の例は、スタイルをサポートしないブラウザでは次のようにレンダリングされます。

<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>

<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>

ブラウザに応じてレンダリングが異なるプロパティには、ほかに BorderWidth や BorderColor などがあります。

また、BorderStyle など、スタイルを使用しないとレンダリングできない表示形式プロパティもあります。したがって、スタイルをサポートしていないブラウザでは、これらのプロパティは無視されます。詳細については、「ASP.NET Web サーバー コントロールとブラウザの機能」を参照してください。

コントロールのスタイル オブジェクト

コントロールは、ForeColor、BackColor などの表示形式プロパティの他に、追加の表示形式プロパティをカプセル化した 1 つ以上のスタイル オブジェクトを公開します。1 つの例は Font スタイル プロパティで、Size、Name、Bold などのフォントに関する個々のプロパティを含む FontInfo 型のオブジェクトを公開します。

いくつかのコントロールは、コントロールの特定の部分の表示形式を設定するためのスタイル オブジェクトを公開します。たとえば、Calendar Web サーバー コントロールには、DayStyle (各日付)、SelectedDayStyle (ユーザーが選択した日、週、または月)、WeekendDayStyle などのスタイル オブジェクトが含まれています。SelectedDayStyle スタイル オブジェクトを使用すると、ユーザーが選択する日の BackColor プロパティと ForeColor プロパティを設定できます。

ほとんどのスタイル オブジェクトは、テーブルのセルの属性を設定するため、Style 型または TableItemStyle 型です。Font プロパティは FontInfo 型です。

スタイル オブジェクトの優先順位と継承

複雑なコントロールでは、スタイル オブジェクトがほかのスタイル オブジェクトの特性を継承することがよくあります。たとえば、Calendar コントロールの SelectedDayStyle オブジェクトは DayStyle オブジェクトに基づいています。SelectedDayStyle のプロパティを明示的に設定しない場合は、DayStyle オブジェクトの特性が継承されます。

この継承は、設定するスタイル オブジェクトのプロパティに優先順位があることを意味しています。たとえば、Calendar コントロールのスタイル オブジェクトのプロパティの優先順位を次に示します。ここでは、優先順位が低い順に示しています。

  1. 基本の Calendar コントロールの表示形式プロパティ

  2. DayStyle スタイル オブジェクト

  3. WeekendDayStyle スタイル オブジェクト

  4. OtherMonthDayStyle スタイル オブジェクト

  5. TodayDayStyle スタイル オブジェクト

  6. SelectedDayStyle スタイル オブジェクト

コンテナ要素とテキスト要素の間でスタイルが分割されている場合、困難な状況になることがあります。たとえば、コントロールのスタイル シートがあり、テキスト スタイル プロパティをリンクに適用し、その他のスタイルをコンテナに適用するとします。メニュー項目に MenuItemStyle、カレンダー コントロールに TodayDayStyle など、コントロールのスタイル プロパティを使用してスタイルを設定する場合、このような状況が発生します。ただし、CssClass プロパティによって定義されるプロパティを使用する方が困難です。というのも、ASP.NET にはサーバー上のクラスのコンテンツを取得する方法がないためです。ASP.NET は CssClass プロパティに定義されているスタイルをテキスト要素とコンテナ要素の両方に適用し、インライン スタイルを追加して、この二重適用の効果 (二重の境界線、プロポーショナル フォントの重ね掛けなど) を抑えます。

コントロールのスタイルを設定する最善の方法は、コントロールによって定義されるスタイル プロパティを使用し、必要に応じて、スタイル シートまたはインライン スタイルを使用して細かい調整を個々の要素に加えることです。コントロールのスタイル プロパティによって定義されるスタイルをオーバーライドするには、スタイル シートまたはインライン スタイルに !important CSS 規則を使用します。

hovernodestyle 要素に CssClass プロパティを使用するコード例を次に示します。このクラスは a:visited 定義をオーバーライドするために、myclass と a.myclass:visited の 2 回定義されます。

<%@ Page Language="C#" %>
<html>
<head runat="server">
  <asp:sitemapdatasource id="SiteMapSource" runat="server" />
  <style type="text/css">
    a:visited 
    {
      color: #000066
    }
    myclass, a.myclass:visited {
      color: #FF0000
    }
  </style>
</head>
<body>
  <form runat="server">
    <a href="https://www.Contoso.com">Contoso</a>
    <asp:treeview id="treeview1" runat="server" 
        initialexpanddepth="1"  
        datasourceid="SiteMapSource" 
        forecolor="#444444" 
        font-names="Verdana" 
        font-size="0.8em">
      <nodestyle font-bold="true" />
      <hovernodestyle cssclass=myclass />
    </asp:treeview>
  </form>
</body>
</html>

カスケード スタイル シート (CSS) を使用してコントロールの外観をカスタマイズする場合、インライン スタイルまたは別個の CSS ファイルを使用します (両方同時には使用しません)。インライン スタイルと別個の CSS ファイルの両方を使用すると、予期しない結果が発生する可能性があります。

CSS スタイルおよびクラスの直接制御

コントロールは、表示形式プロパティとスタイル オブジェクトに加えて、CSS スタイルをより直接的に操作するために CssClass プロパティと Style プロパティの 2 つのプロパティを公開します。CssClass プロパティを使用すると、コントロールにスタイル シート クラスを割り当てることができます。Style プロパティを設定することにより、スタイル属性の文字列がコントロールにそのまま書き込まれるように設定できます。Style プロパティを使用すると、他のプロパティでは公開されないスタイル属性を設定できます。Style プロパティは、Add、Remove などのメソッドのコレクションを公開します。これらのメソッドを呼び出せば、スタイルを直接設定できます。

Style プロパティの設定は、対応する個別の表示形式プロパティには反映されません。たとえば、Style プロパティに文字列 background-color:red を設定すると、コントロールは赤の背景色で描画されますが、BackColor プロパティは赤には設定されません。また、表示形式プロパティと Style プロパティの両方を設定した場合は、個々の表示形式プロパティが Style プロパティより優先されます。

参照

概念

ASP.NET Web サーバー コントロールとブラウザの機能

その他の技術情報

ASP.NET Web サーバー コントロールの操作