WebControl.CssClass WebControl.CssClass WebControl.CssClass WebControl.CssClass Property

定義

クライアントで Web サーバー コントロールによって表示されるカスケード スタイル シート (CSS: Cascading Style Sheet) クラスを取得または設定します。Gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client.

public:
 virtual property System::String ^ CssClass { System::String ^ get(); void set(System::String ^ value); };
[System.ComponentModel.Bindable(true)]
public virtual string CssClass { get; set; }
member this.CssClass : string with get, set
Public Overridable Property CssClass As String

プロパティ値

クライアントで Web サーバー コントロールによって表示される CSS クラス。The CSS class rendered by the Web server control on the client. 既定値は、Empty です。The default is Empty.

次の例は、 CssClassプロパティを使用してHyperLinkコントロールのスタイルを変更する方法を示しています。The following example illustrates how to use the CssClass property to change the style of a HyperLink control.

注意

次のコードサンプルでは、単一ファイルのコードモデルを使用して、分離コードファイルに直接コピーした場合、正しく機能しない可能性があります。The following code sample uses the single-file code model and may not work correctly if copied directly into a code-behind file. このコードサンプルは、.aspx 拡張子を持つ空のテキストファイルにコピーする必要があります。This code sample must be copied into an empty text file that has an .aspx extension. Web フォームコードモデルの詳細については、「 ASP.NET Web Forms Page Code model」を参照してください。For more information on the Web Forms code model, see ASP.NET Web Forms Page Code Model.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    void Button1_Click(object sender, EventArgs e)
    {
        if (HyperLink1.CssClass == "CssStyle1")
            HyperLink1.CssClass = "CssStyle2";
        else
            HyperLink1.CssClass = "CssStyle1";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head2" runat="server">
    <title>CssClass Property Example</title>
    <style type="text/css">
        .CssStyle1   
        { 
           font: 10pt Verdana; 
           font-weight:700;
           color: Green;
        }

        .CssStyle2
        { 
           font: 15pt Times; 
           font-weight:250;
           color: Blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>CssClass Property of a Web Control</h3>
        <asp:HyperLink id="HyperLink1" 
            NavigateUrl="http://www.microsoft.com" 
            CssClass="CssClass1" 
            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 link"
            OnClick="Button1_Click" runat="server" />
         </p>
    </div>
    </form>
</body>
</html>
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
        If HyperLink1.CssClass = "CssStyle1" Then
            HyperLink1.CssClass = "CssStyle2"
        Else
            HyperLink1.CssClass = "CssStyle1"
        End If
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head2" runat="server">
    <title>CssClass Property Example</title>
    <style type="text/css">
        .CssStyle1   
        { 
           font: 10pt Verdana; 
           font-weight:700;
           color: Green;
        }

        .CssStyle2
        { 
           font: 15pt Times; 
           font-weight:250;
           color: Blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>CssClass Property of a Web Control</h3>
        <asp:HyperLink id="HyperLink1" 
            NavigateUrl="http://www.microsoft.com" 
            CssClass="CssClass1" 
            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 link"
            OnClick="Button1_Click" runat="server" />
         </p>
    </div>
    </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">

      void Button1_Click(Object sender, EventArgs e) {
    HyperLink1.CssClass=((HyperLink1.CssClass=="CssStyle1")?"CssStyle2":"CssStyle1");
      }

  </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>

注釈

CssClassプロパティを使用して、Web サーバーコントロールのクライアントに表示する CSS クラスを指定します。Use the CssClass property to specify the CSS class to render on the client for the Web Server control. このプロパティは、すべてのコントロールのブラウザーで表示されます。This property will render on browsers for all controls. ブラウザーに関係なく、常に class 属性としてレンダリングされます。It will always be rendered as the class attribute, regardless of the browser.

重要

この例には、ユーザー入力を受け付けるテキスト ボックスがあります。これにより、セキュリティが脆弱になる可能性があります。This example has a text box that accepts user input, which is a potential security threat. 既定では、ASP.NET Web ページによって、ユーザー入力にスクリプトまたは HTML 要素が含まれていないかどうかが検証されます。By default, ASP.NET Web pages validate that user input does not include script or HTML elements. 詳細については、「スクリプトによる攻略の概要」を参照してください。For more information, see Script Exploits Overview.

たとえば、次のような Web サーバーコントロール宣言があるとします。For example, suppose you have the following Web server control declaration:

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

次の HTML は、前の Web サーバーコントロール宣言用にクライアント上にレンダリングされます。The following HTML is rendered on the client for the previous Web server control declaration:

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

カスケードスタイルシート (CSS) を使用してコントロールの外観をカスタマイズする場合は、インラインスタイルまたは別の CSS ファイルを使用しますが、両方は使用しません。If you use cascading style sheets (CSS) to customize the appearance of a control, use either inline styles or a separate CSS file, but not both. インラインスタイルと別の CSS ファイルの両方を使用すると、予期しない結果が発生する可能性があります。Using both inline styles and a separate CSS file could cause unexpected results.

注意

CSS をサポートしていないブラウザーではCssClass 、プロパティを設定しても効果はありません。On browsers that do not support CSS, setting the CssClass property will have no effect.

適用対象

こちらもご覧ください