WebControl.CssClass プロパティとは何？わかりやすく解説 Weblio辞書

.NET Framework クラスライブラリリファレンス

索引トップ用語の索引ランキング

WebControl.CssClass プロパティ

クライアントで Web サーバーコントロールによって表示されるカスケードスタイルシート (CSS: Cascading Style Sheet) クラスを取得または設定します。

名前空間: System.Web.UI.WebControls
アセンブリ: System.Web (system.web.dll 内)
構文

Visual Basic (宣言)

Public Overridable Property
 CssClass As String

Visual Basic (使用法)

Dim instance As WebControl
Dim value As String

value = instance.CssClass

instance.CssClass = value

public virtual string CssClass { get;
 set; }

C++

public:
virtual property String^ CssClass {
    String^ get ();
    void set (String^ value);
}

/** @property */
public String get_CssClass ()

/** @property */
public void set_CssClass (String value)

JScript

public function get CssClass
 () : String

public function set CssClass
 (value : String)

プロパティ値
クライアントで Web サーバーコントロールによって表示される CSS クラス。既定値は Empty です。

解説

CssClass プロパティを使用して、Web サーバーコントロールに対してクライアントに表示する CSS クラスを指定します。このプロパティは、すべてのコントロールに対してブラウザに表示されます。このプロパティは、ブラウザに関係なく、常にクラスの属性として表示されます。

たとえば、Web サーバーコントロールを次のように宣言したとします。

 <asp:TextBox ForeColor="Red" CssClass="class1" />

前の Web サーバーコントロールの宣言に対して、次の HTML がクライアントに表示されます。

 <input type=text class="class1" style="ForeColor:red">

メモ
CSS をサポートしないブラウザでは、CssClass プロパティを設定しても無効です。

Topic	Location
方法 : 外部カスケードスタイルシートを作成する (Visual Studio)	Visual Studio での ASP .NET Web アプリケーションの作成

使用例

CssClass プロパティを使用して、HyperLink コントロールのスタイルを変更する方法の例を次に示します。

メモ
次のコードサンプルはシングルファイルコードモデルを使用しており、分離コードファイルに直接コピーされた場合は正常に動作しない可能性があります。このコードサンプルは、拡張子が .aspx の空のテキストファイルにコピーする必要があります。Web フォームのコードモデルの詳細については、「ASP.NET Web ページのコードモデル」を参照してください。

メモ

次のコードサンプルはシングルファイルコードモデルを使用しており、分離コードファイルに直接コピーされた場合は正常に動作しない可能性があります。このコードサンプルは、拡張子が .aspx の空のテキストファイルにコピーする必要があります。Web フォームのコードモデルの詳細については、「ASP.NET Web ページのコードモデル」を参照してください。

Visual Basic

<%@ Page Language="VB" AutoEventWireup="True"
 %>

 <html>
 <head>
 
   <style>
 
       .CssStyle1   
       { 
           font: 12pt verdana; 
           font-weight:700;
           color:orange;
       }
 
       .CssStyle2
       { 
           font: 15pt times; 
           font-weight:250;
           color:blue;
       }
 
   </style>
 
   <script language="VB" runat="server">
 
    Sub Button1_Click(sender As Object,
 e As EventArgs)
        If HyperLink1.CssClass = "CssStyle1"
 Then
            HyperLink1.CssClass = "CssStyle2"
        Else
            HyperLink1.CssClass = "CssStyle1"
        End If
    End Sub
 
   </script>
 
 </head>
 <body>
 
   <h3>CssClass Property of a Web Control</h3>
 
 <form runat="server">
 
   <asp:HyperLink id="HyperLink1" NavigateUrl="http://www.microsoft.com"
 
     CssClass="spanstyle" Text="Click
 here to go to the Microsoft site" 
     Target="_new" runat="server"/>
 
   <p>
 
   <asp:Button id="Button1" Text="Click
 to change the Css style of the above link"
     OnClick="Button1_Click" runat="server"/>
 
 </form>
 
 </body>
 </html>

<%@ Page Language="C#" AutoEventWireup="True" %>

 <html>
 <head>
 
   <style>
 
       .CssStyle1   
       { 
           font: 12pt verdana; 
           font-weight:700;
           color:orange;
       }
 
       .CssStyle2
       { 
           font: 15pt times; 
           font-weight:250;
           color:blue;
       }
 
   </style>
 
   <script language="C#" runat="server">
 
       void Button1_Click(Object sender, EventArgs e) {
           HyperLink1.CssClass=((HyperLink1.CssClass=="CssStyle1")?"CssStyle2":"CssStyle1");
       }
 
   </script>
 
 </head>
 <body>
 
   <h3>CssClass Property of a Web Control</h3>
 
 <form runat="server">
 
   <asp:HyperLink id="HyperLink1" NavigateUrl="http://www.microsoft.com"
 
     CssClass="spanstyle" Text="Click here to go to the Microsoft
 site" 
     Target="_new" runat="server"/>
 
   <p>
 
   <asp:Button id="Button1" Text="Click to change the Css style
 of the above link"
     OnClick="Button1_Click" runat="server"/>
 
 </form>
 
 </body>
 </html>

JScript

<%@ Page Language="JScript" AutoEventWireup="True" %>

 <html>
 <head>
 
   <style>
 
       .CssStyle1   
       { 
           font: 12pt verdana; 
           font-weight:700;
           color:orange;
       }
 
       .CssStyle2
       { 
           font: 15pt times; 
           font-weight:250;
           color:blue;
       }
 
   </style>
 
   <script language="JSCRIPT" runat="server">
 
    function Button1_Click(sender : Object, e : EventArgs){
        if(HyperLink1.CssClass == "CssStyle1")
            HyperLink1.CssClass = "CssStyle2"
        else
            HyperLink1.CssClass = "CssStyle1"
    }
 
   </script>
 
 </head>
 <body>
 
   <h3>CssClass Property of a Web Control</h3>
 
 <form runat="server">
 
   <asp:HyperLink id="HyperLink1" NavigateUrl="http://www.microsoft.com"
 
     CssClass="spanstyle" Text="Click here to go to the Microsoft
 site" 
     Target="_new" runat="server"/>
 
   <p>
 
   <asp:Button id="Button1" Text="Click to change the Css style
 of the above link"
     OnClick="Button1_Click" runat="server"/>
 
 </form>
 
 </body>
 </html>

<html>
<head>

  <style>

      .CssStyle1   
      { 
          font: 12pt verdana; 
          font-weight:700;
          color:orange;
      }

      .CssStyle2
      { 
          font: 15pt times; 
          font-weight:250;
          color:blue;
      }

  </style>

  <script language="C#" runat="server">





  </script>

</head>
<body>

  <h3><font
 face="Verdana">CssClass Property of a Web Control</font></h3>

<form runat="server">

  <asp:HyperLink id="HyperLink1" NavigateUrl="http://www.microsoft.com"
 
    CssClass="spanstyle" Text="Click here to go to the Microsoft site"
 
    Target="_new" runat="server"/>

  <p>

  <asp:Button id="Button1" Text="Click to change
 the Css style of the above link"
    OnClick="Button1_Click" runat="server"/>

</form>

</body>
</html>