解説
HTMLページの中では、スタイル標準、スタイル１、スタイル２、全て同じ状態です。
デザイン変更はCSS（cascade_style_sheet.css）で行っています。
-
スタイル１
ここでは、リストで使うフォント関連の個別設定に変化を加えてみました。
スタイル１共通デザインでは、フォントカラーを緑に設定。
| ｽﾀｲﾙ名 |
タグ |
ﾌｫﾝﾄｶﾗｰ |
| .style1 |
全て |
Green |
これだけならば、この後に続くol、ulタグも同じデザインになるはずですが、
個別に違うデザインを設定できますよっと言う意味で、olタグでは中央寄りに、
ulタグでは左右一杯に幅（X軸方向）に変化を加えてみました。
具体的には以下のデザインを追加しています。
| ｽﾀｲﾙ名 |
タグ |
ﾏｰｼﾞﾝ |
| .style1 ol |
ol |
left、right: 10em |
| .style1 ul |
ul |
left: 2ex |
-
スタイル２
ここでは、リスト自体の外観に変化を加えてみました。
スタイル２共通デザインでは、フォントカラーを青色に設定。
| ｽﾀｲﾙ名 |
タグ |
ﾌｫﾝﾄｶﾗｰ |
| .style2 |
全て |
Blue |
これだけならば、この後に続くol、ulタグは同標準デザインになるはずですが、
やはり個別に違うデザインを設定できますよっと言う意味で、以下のデザインを追加しています。
ここでのポイントは、アイコンに対する文字の水平および垂直方向位置共に違いがあります。
olタグ（チェックアイコン）側はあえて未修正、ulタグ（ローディングアイコン）側で修正してあります。
| ｽﾀｲﾙ名 |
タグ |
垂直位置 |
文字送り |
ﾊﾟﾃﾞｨﾝｸﾞ |
ﾏｰｼﾞﾝ |
ｱｲｺﾝ
(../img/check/) |
| .style2 ol |
ol |
− |
− |
− |
− |
check2.gif |
| .style2 ul |
ul |
middle |
− |
− |
− |
loading.gif |
| .style2 ul li |
li |
− |
- 2ex |
top: 4px、left: 2ex |
top: -4px |
− |
実験
次のHTMLとCSSをドラッグ〜コピー〜貼り付けしてご確認いただけます。
/* カスケードスタイルシートのデモ */
/* cascade_style_sheet.css */
.bass
{
font-size: 85%;
background-color: #fcfcfc;
border: #669999 1px solid;
line-height: 2ex;
margin: 1ex;
padding: 1ex;
}
.bass ol, .bass ul
{
border: #cccccc 1px dashed;
}
.style1
{
color: Green;
}
.style1 ul
{
margin-left: 2ex;
}
.style1 ol
{
margin-left: 10em;
margin-right: 10em;
}
.style2
{
color: Blue;
}
.style2 ol
{
list-style-image: url(../img/check/check2.gif);
}
.style2 ul
{
list-style-image: url(../img/check/loading.gif);
vertical-align: middle;
}
.style2 ul li
{
text-indent: -2ex;
margin-top: -4px;
padding-top: 4px;
padding-left: 2ex;
}
<!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>list編（CSSでTAGデザイン変更♪）／hiroshiのホームページ作成テクニック</title>
<link href="../css_design/cascade_style_sheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>list編（CSSでTAGデザイン変更♪）</h1>
<div class=bass>
<div>
<p>スタイル標準</p>
<ol>
<li>スタイル標準</li>
</ol>
<ul>
<li>スタイル標準</li>
</ul>
</div>
<div class=style1>
<p>スタイル１</p>
<ol>
<li>スタイル１</li>
</ol>
<ul>
<li>スタイル１</li>
</ul>
</div>
<div class=style2>
<p>スタイル２</p>
<ol>
<li>スタイル２</li>
</ol>
<ul>
<li>スタイル２</li>
</ul>
</div>
</div>
</body>
</html>