解説
HTMLページの中では、スタイル標準、スタイル1、スタイル2、全て同じ状態です。
デザイン変更はCSS(cascade_style_sheet.css)で行っています。
-
スタイル1
ここでは、リストで使うフォント関連の個別設定に変化を加えてみました。
スタイル1共通デザインでは、フォントカラーを緑に設定。
スタイル名 |
タグ |
フォントカラー |
.style1 |
全て |
Green |
これだけならば、この後に続くol、ulタグも同じデザインになるはずですが、
個別に違うデザインを設定できますよっと言う意味で、olタグでは中央寄りに、
ulタグでは左右一杯に幅(X軸方向)に変化を加えてみました。
具体的には以下のデザインを追加しています。
スタイル名 |
タグ |
マージン |
.style1 ol |
ol |
left、right: 10em |
.style1 ul |
ul |
left: 2ex |
-
スタイル2
ここでは、リスト自体の外観に変化を加えてみました。
スタイル2共通デザインでは、フォントカラーを青色に設定。
スタイル名 |
タグ |
フォントカラー |
.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>スタイル1</p>
<ol>
<li>スタイル1</li>
</ol>
<ul>
<li>スタイル1</li>
</ul>
</div>
<div class=style2>
<p>スタイル2</p>
<ol>
<li>スタイル2</li>
</ol>
<ul>
<li>スタイル2</li>
</ul>
</div>
</div>
</body>
</html>