スタイルシートでのDIVとSPANの利用法

◆スタイルシートでのDIVの利用法

カスケーディング・スタイルシート(Cascading Style Sheets, CSS) では、HTML のタグごとにスタイルを設定することができる。

H1 { color: blue; }

<H1><H2><H3>や<P>等の意味があるタグとは関係なく、もう少し広い領域でスタイルを設定したい時には<DIV>を使う。以下の例では、第1.1節と第1.2節に対して class="important" を適応し、第1.3 節には適応していない。

<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
<TITLE>スタイルシートの例題:クラスの利用</TITLE>
<STYLE TYPE="text/css"><!--
.important    { color:red; }  /* class="important" と指定したものだけ */
--></STYLE>
</HEAD>

<BODY>

<H1>第1章</H1>

<P>パラグラフ。パラグラフ。パラグラフ。パラグラフ。</P>

<DIV class="important">

    <H2>第1.1節</H2>

    <P>パラグラフ。パラグラフ。パラグラフ。パラグラフ。</P>

    <H2>第1.2節</H2>

    <P>パラグラフ。パラグラフ。パラグラフ。パラグラフ。</P>

</DIV>

<H2>第1.3節</H2>

<P>パラグラフ。パラグラフ。パラグラフ。パラグラフ。</P>

<H1>第2章</H1>

<P>パラグラフ。パラグラフ。パラグラフ。パラグラフ。</P>

</BODY>
</HTML>

[表示例]

◆スタイルシートでのSPANの利用法

<DIV> は、複数パラグラフ(<P>)や複数章節項(<H1><H2><H3>)を含む時につかう。 1行以内の短い時には、 <SPAN></SPAN>を使う。

<P>
普通の言葉。<SPAN class="important">重要な言葉。</SPAN>普通の言葉。
</P>

[表示例]

Last updated: 2018/05/13 22:14:38

Yasushi Shinjo / <yas@cs.tsukuba.ac.jp>