ここではW3C-002の定義済みCSSを解説します。

グローバルメニューは現在のページを選択状態のclass「stay」にします。

<li><a href="about.html" class="stay">ABOUT</a></li>

ttl-cross

タイトルバー（見出し背景）のCSSは二種類定義してあります。

タイトルバーサンプル　「クラスttl-cross」

<h* class="ttl-cross">タイトルバーサンプル　「クラスttl-cross」</h*>

タイトルバーサンプル　「クラスttl-gray」

<h* class="ttl-gray">タイトルバーサンプル　「クラスttl-gray」</h*>

矢印アイコン(クラスicn-arrow)を呼び出すには2通りの方法があります。

• リストタグを利用(ul)
• リストタグを利用(ul)
• リストタグを利用(ul)

<ul class="icn-arrow">
<li>リストタグを利用(ul)</li>
<li>リストタグを利用(ul)</li>
<li>リストタグを利用(ul)</li>
</ul>

リストタグを利用(dl)

dlタグに適用するとこのようにddタグに付きます。

dlタグに適用するとこのようにddタグに付きます。

dlタグに適用するとこのようにddタグに付きます。

<dl class="icn-arrow">
<dt>リストタグを利用(dl)</dt>
<dd>dlタグに適用するとこのようにddタグに付きます。</dd>
<dd>dlタグに適用するとこのようにddタグに付きます。</dd>
<dd>dlタグに適用するとこのようにddタグに付きます。</dd>
</dl>

個別（ブロック要素）

<p class="icn-arrow">個別（ブロック要素）</p>

個別（インライン要素）

<p><a href="#" class="icn-arrow">個別（インライン要素）</a></p>

フォントのCSSはサイズ、スタイル、カラー等複数定義してあります。

フォントサイズ

小(クラスs) / 中(標準) / 大(クラスl) / 特大(クラスxl)

<span class="s">小(クラスs)</span> / 中(標準) / <span class="l">大(クラスl)</span> / <span class="xl">特大(クラスxl)</span>

フォントカラー

red / orange / pink / brown / peru / orchid / blue / sblue / green / ygreen / lgreen / gold / black / gray

<span class="red">red</span> /
<span class="orange">orange</span> /
<span class="pink">pink</span> /
<span class="brown">brown</span> /
<span class="peru">peru</span> /
<span class="orchid">orchid</span> /
<span class="blue">blue</span> /
<span class="sblue">sblue</span> /
<span class="green">green</span> /
<span class="ygreen">ygreen</span> /
<span class="lgreen">lgreen</span> /
<span class="gold">gold</span> /
<span class="black">black</span> /
<span class="gray">gray</span>

フォントスタイル

標準 / 太字(b) / イタリック(i) / 下線(u) / 打消し線(d)

標準 /
<span class="b">太字</span>(b) /
<span class="i">イタリック</span>(i) /
<span class="u">下線</span>(u) /
<span class="d">打消し線</span>(d)

画像

ボックス要素や画像を右・左に簡単に回り込み出来るよう定義してあります。

左に回りこみ

<p><img src="img/sample.jpg" alt="" class="left" />左に回りこみ</p>

右に回りこみ

<p><img src="img/sample.jpg" alt="" class="right" />左に回りこみ</p>

画像枠

<p><img src="img/sample.jpg" alt="" class="bdr" /><br />画像枠</p>

ボックス枠

<p class="bdr">ボックス枠</p>