かんたんASP.NET - リスト

第7章 WebサイトのデザインとJavaScript


リスト 7-1 HTMLタグでのデザイン

<font color="red" size="7"><b><u><i>Text</i></u></b></font>

↑Top


リスト 7-2 単純なCSS

<html>
<head>
  <title>CSS直接指定</title>
</head>
<body>
  <p>CSSなし</p>
  <p style="font-size: x-large">大きな字</p>
</body>
</html>

↑Top

リスト 7-3 クラスを用いたCSS

<html>
<head>
  <style type="text/css">
    .large {
      font-size: x-large;
    }
  </style>
</head>
<body>
  <span class="large">テキスト</span>
  <p class="large">テキスト</p>
</body>
</html>

↑Top


リスト 7-4 クラスを別ファイルに定義したCSS

.large {
  font-size: x-large;
}
<html>
<head>
  <link type="text/css" href="style.css" />
</head>
<body>
  <span class="large">テキスト</span>
  <p class="large">テキスト</p>
</body>
</html>

↑Top


リスト 7-5 ASP.NET WebページでのCSSクラス指定

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>CSS サンプル</title>
  <style type="text/css">
    .large {
      font-size: x-large;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" runat="server"
      Text="テキスト" CssClass="large"></asp:Label>
  </div>
  </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>CSS サンプル</title>
  <style type="text/css">
    .large {
      font-size: x-large;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" runat="server"
      Text="テキスト" CssClass="large"></asp:Label>
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-6 SkinFileの記述例

<asp:button runat="server"
	BackColor="Black"
	ForeColor="LightGray"
	BorderStyle="Dotted" />

<asp:button runat="server"
	SkinId="MyButton"
	BackColor="White"
	ForeColor="Gray"
	BorderStyle="Dashed" />

↑Top


リスト 7-7 @PageディレクティブのTheme属性

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="SkinFile" %>
<%@ Page Language="CS" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="SkinFile" %>

↑Top


リスト 7-8 構成ファイルでのTheme指定方法

<system.web>
<pages theme="テーマ名">
~
</pages>
</system.web>

↑Top


リスト 7-9 aspxファイルでのスキン設定

<asp:Button ID="Button1" runat="server" Text="Button" />
<br /><br />
<asp:Button ID="Button2" runat="server" Text="Button"
  SkinID="MyButton" />
<br /><br />
<asp:Button ID="Button3" runat="server" Text="Button"
  EnableTheming="False" />

↑Top


リスト 7-10 MasterPageファイル

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
      runat="server">
    </asp:ContentPlaceHolder>
  </div>
  </form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
      runat="server">
    </asp:ContentPlaceHolder>
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-11 MasterPageファイルの例

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h1>Master Page Test Site</h1>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
      runat="server">
    </asp:ContentPlaceHolder>
    <hr />
    <asp:HyperLink ID="TopHyperLink" runat="server"
      NavigateUrl="Default.aspx">Top</asp:HyperLink>
  </div>
  </form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h1>Master Page Test Site</h1>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
      runat="server">
    </asp:ContentPlaceHolder>
    <hr />
    <asp:HyperLink ID="TopHyperLink" runat="server"
      NavigateUrl="Default.aspx">Top</asp:HyperLink>
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-12 コンテンツページ

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head"
  Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  Runat="Server">
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head"
  Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  Runat="Server">
</asp:Content>

↑Top


リスト 7-13 コンテンツページの例

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head"
  Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  Runat="Server">
  <h2>コンテンツページ</h2>
</asp:Content>
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head"
  Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  Runat="Server">
  <h2>コンテンツページ</h2>
</asp:Content>

↑Top


リスト 7-14 クライアントサイドのJavaScript

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>JavaScriptテスト</title>
  <script type="text/javascript">
    function test() {
      alert('test');
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input id="Button1" type="button"
      value="button" onclick="test();" />
  </div>
  </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>JavaScriptテスト</title>
  <script type="text/javascript">
    function test() {
      alert('test');
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input id="Button1" type="button"
      value="button" onclick="test();" />
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-15 ボタンのクリックイベントハンドラ

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

  ClientScript.RegisterClientScriptBlock( _
    Me.GetType() _
    , "ClientScriptBlock" _
    , "function test() { alert('test'); }" _
    , True)

  ClientScript.RegisterStartupScript( _
    Me.GetType() _
    , "StartupScript" _
    , "test();" _
    , True)

End Sub

protected void Button1_Click(object sender, EventArgs e)
{
  ClientScript.RegisterClientScriptBlock(
    this.GetType()
    , "ClientScriptBlock"
    , "function test() { alert('test'); }"
    , true);

  ClientScript.RegisterStartupScript(
    this.GetType()
    , "StartupScript"
    , "test();"
    , true);
}

↑Top


リスト 7-16 ClientScriptManagerサンプル起動直後のHTMLソース(抜粋)

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

<head><title>
  JavaScriptテスト
</title></head>
<body>
  <form name="form1" method="post" action="Default.aspx"
    id="form1">
  <div>
    <input type="submit" name="Button1" value="Button"
      id="Button1" />
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-17 ClientScriptManagerサンプルボタンクリック後のHTMLソース(抜粋)

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

<head><title>
  JavaScriptテスト
</title></head>
<body>
  <form name="form1" method="post" action="Default.aspx" id="form1">
<script type="text/javascript">
//<![CDATA[
function test() { alert('test'); }//]]>
</script>
  <div>
    <input type="submit" name="Button1" value="Button" id="Button1" />
  </div>
  </form>
<script type="text/javascript">
//<![CDATA[
test();//]]>
</script>
</body>
</html>

↑Top


リスト 7-18 MasterPage.masterファイル

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h1>
      <asp:Label ID="CommonHeaderLabel" runat="server"
        Text="共通ヘッダー" SkinID="Header"></asp:Label>
    </h1>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
      runat="server">
    </asp:ContentPlaceHolder>
  </div>
  </form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h1>
      <asp:Label ID="CommonHeaderLabel" runat="server"
        Text="共通ヘッダー" SkinID="Header"></asp:Label>
    </h1>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
      runat="server">
    </asp:ContentPlaceHolder>
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-19 ThemeA.aspxファイル

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="ThemeA.aspx.vb" Inherits="ThemeA" Theme="ThemeA" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  runat="Server">
  <h2>
    <asp:Label ID="HeaderLabel" runat="server"
      Text="テーマA"></asp:Label>
  </h2>
  <asp:Label ID="Label1" runat="server"
    Text="ラベル"></asp:Label>
  <asp:TextBox ID="TextBox1" runat="server">テキスト
  </asp:TextBox>
  <asp:Button ID="Button1" runat="server" Text="ボタン" />
  <hr />
  <asp:HyperLink ID="HyperLink1" runat="server"
    NavigateUrl="~/ThemeB.aspx">
    テーマB</asp:HyperLink>
</asp:Content>

<%@ Page Title="テーマA" Theme="ThemeA" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ThemeA.aspx.cs" Inherits="ThemeA" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  Runat="Server">
  <h2>
    <asp:Label ID="HeaderLabel" runat="server"
      Text="テーマA"></asp:Label>
  </h2>
  <asp:Label ID="Label1" runat="server"
    Text="ラベル"></asp:Label>
  <asp:TextBox ID="TextBox1" runat="server">テキスト
  </asp:TextBox>
  <asp:Button ID="Button1" runat="server" Text="ボタン" />
  <hr />
  <asp:HyperLink ID="HyperLink1" runat="server"
    NavigateUrl="~/ThemeB.aspx">
    テーマB</asp:HyperLink>
</asp:Content>

↑Top


リスト 7-20 ThemeB.aspxファイル

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="ThemeB.aspx.vb" Inherits="ThemeB" Theme="ThemeB" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
  runat="Server">
  <h2>
    <asp:Label ID="HeaderLabel" runat="server"
      Text="テーマB"></asp:Label>
  </h2>
  <asp:Label ID="Label1" runat="server"
    Text="ラベル"></asp:Label>
  <asp:TextBox ID="TextBox1" runat="server">テキスト
  </asp:TextBox>
  <asp:Button ID="Button1" runat="server" Text="ボタン" />
  <hr />
  <asp:HyperLink ID="HyperLink1" runat="server"
    NavigateUrl="~/ThemeA.aspx" ForeColor="Cyan">
    テーマA</asp:HyperLink>
</asp:Content>

<%@ Page Title="テーマB" Theme="ThemeB" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ThemeB.aspx.cs" Inherits="ThemeB" %>

<asp:Content ID="Content1"
  ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2"
  ContentPlaceHolderID="ContentPlaceHolder1"
   Runat="Server">
  <h2>
    <asp:Label ID="HeaderLabel" runat="server"
      Text="テーマB"></asp:Label>
  </h2>
  <asp:Label ID="Label1" runat="server"
    Text="ラベル"></asp:Label>
  <asp:TextBox ID="TextBox1" runat="server">テキスト
  </asp:TextBox>
  <asp:Button ID="Button1" runat="server" Text="ボタン" />
  <hr />
  <asp:HyperLink ID="HyperLink1" runat="server"
    NavigateUrl="~/ThemeA.aspx" ForeColor="Cyan">
    テーマA</asp:HyperLink>
</asp:Content>

↑Top


リスト 7-21 ThemeA/Stylesheet.cssファイル

body
{
  background-color: #CCCCCC;
}

↑Top


リスト 7-22 ThemeA/ThemeA.skinファイル

<asp:Label runat="server" SkinId="Header"
  Font-Italic="true"></asp:Label>
<asp:Label runat="server" Font-Bold="true"></asp:Label>
<asp:TextBox runat="server" BorderStyle="Solid">
</asp:TextBox>
<asp:Button runat="server" BorderStyle="Dashed" />

↑Top


リスト 7-23 ThemeB/Stylesheet.cssファイル

body
{
  background-color: #333333;
}

↑Top


リスト 7-24 ThemeB/ThemeB.skinファイル

<asp:Label runat="server" SkinId="Header"
  Font-Underline="true" ForeColor="White" />
<asp:Label runat="server" ForeColor="White" />
<asp:TextBox runat="server" BorderStyle="Dotted"
  BackColor="#666666" ForeColor="White" />
<asp:Button runat="server" BorderStyle="Groove"
  BorderWidth="3" BackColor="#666666" ForeColor="White" />
<asp:HyperLink runat="server" ForeColor="Cyan" />

↑Top


リスト 7-25 Default.aspxファイル

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>JavaScriptテスト</title>
  <script type="text/javascript">
    function clientClick() {
      // テキストボックスの入力値を表示
      var text = document.getElementById("Text1")
      alert(text.value);
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h4>クライアントサイド</h4>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="Click"
      onclick="clientClick();" />

    <h4>サーバーサイド</h4>
    <asp:TextBox ID="TextBox1" runat="server">
    </asp:TextBox>
    <asp:Button ID="Button2"
      runat="server" Text="Click" />
  </div>
  </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>JavaScriptテスト</title>
  <script type="text/javascript">
    function clientClick() {
      // テキストボックスの入力値を表示
      var text = document.getElementById("Text1")
      alert(text.value);
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h4>クライアントサイド</h4>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="Click"
      onclick="clientClick();" />

    <h4>サーバーサイド</h4>
    <asp:TextBox ID="TextBox1" runat="server">
    </asp:TextBox>
    <asp:Button ID="Button2"
      runat="server" Text="Click" onclick="Button2_Click" />
  </div>
  </form>
</body>
</html>

↑Top


リスト 7-26 Default.aspx.vbファイル

Partial Class _Default
  Inherits System.Web.UI.Page

  Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
    ' テキストボックスの入力値と現在の日時を表示する
    ' クライアントスクリプト登録
    ClientScript.RegisterClientScriptBlock( _
      Me.GetType() _
      , "ClientScriptBlock" _
      , "function serverClick() {" _
        & String.Format("alert('{0}\n{1}');" _
          , TextBox1.Text, Now.ToString()) _
        & "}" _
      , True)

    ' 登録したクライアントスクリプトを呼び出す
    ' スタートアップスクリプト登録
    ClientScript.RegisterStartupScript( _
      Me.GetType() _
      , "StartupScript" _
      , "serverClick();" _
      , True)
  End Sub
End Class

using System;

public partial class _Default : System.Web.UI.Page
{
  protected void Button2_Click(object sender, EventArgs e)
  {
    // テキストボックスの入力値と現在の日時を表示する
    // クライアントスクリプト登録
    ClientScript.RegisterClientScriptBlock(
      this.GetType()
      , "ClientScriptBlock"
      , "function serverClick() {"
        + String.Format("alert('{0}\n{1}');"
          , TextBox1.Text, DateTime.Now.ToString())
        + "}"
      , true);

    // 登録したクライアントスクリプトを呼び出す
    // スタートアップスクリプト登録
    ClientScript.RegisterStartupScript(
      this.GetType()
      , "StartupScript"
      , "serverClick();"
      , true);
  }
}

↑Top