スタイルシート入門(使用例)
スタイルシートを用いた使用例として、通常のHTMLタグでは実現が難しいものについて紹介します。スタイルシートをサポートしていないブラウザのために、表示例は、スタイルシートではない方法で表示しています。
<font size=n>よりも柔軟なフォントサイズを指定する
<span style="font-size:20pt">大きなフォント</span>
↓
大きなフォント
テキストの背景色を指定する
<span style="background:silver">背景色</span>
↓
| 背景色 |
下線の無いリンクテキストを表示する
<a href="xxx.html" style="text-decoration:none">リンク</a>
↓
リンク
行間を適度にあける
<style type="text/css">
<!--
BODY { line-height: 150% }
-->
</style>
↓
<!--
BODY { line-height: 150% }
-->
</style>
これにより本文の行間が
適度にあくようになります。
適度にあくようになります。
段落の１行目をインデント（字下げ）する
<style type="text/css">
<!--
P { text-indent: 16px }
-->
</style>
↓
<!--
P { text-indent: 16px }
-->
</style>
これにより、<p>による段落の１行目が
字下げされるようになります。
字下げされるようになります。
インデント（字下げ）する
あああああ
<div style="margin-left:30px">
この行がインデントされます。
</div>
ううううう
↓
<div style="margin-left:30px">
この行がインデントされます。
</div>
ううううう
あああああ
この行がインデントされます。
ううううう
この行がインデントされます。
ううううう
背景を左端のみに表示する
<style type="text/css">
<!--
BODY { background: url(image/back.gif) repeat-y }
-->
</style>
<!--
BODY { background: url(image/back.gif) repeat-y }
-->
</style>
マウスを乗せたリンクの色を変える(IE4.0)
<style type="text/css">
<!--
A:hover { color: red }
-->
</style>
<!--
A:hover { color: red }
-->
</style>
<< PAGE TOP >>
