CSSリファレンス(使用例)

トップ > CSSリファレンス > サンプル

スタイルシートを用いた使用例として、通常のHTMLタグでは実現が難しいものについて紹介します。スタイルシートをサポートしていないブラウザのために、表示例は、スタイルシートではない方法で表示しています。

<font size=n>よりも柔軟なフォントサイズを指定する

<span style="font-size:20pt">大きなフォント</span>
  ↓
大きなフォント

テキストの背景色を指定する

<span style="background-color:silver">背景色</span>
  ↓
背景色

下線の無いリンクテキストを表示する

<a href="xxx.html" style="text-decoration:none">リンク</a>
  ↓
リンク

行間を適度にあける

<div style="line-height:200%;">
これにより文章の行間が<br>
適度にあくようになります。
</div>
  ↓
これにより文章の行間が
適度にあくようになります。

段落の1行目をインデント(字下げ)する

<style type="text/css">
<!--
p { text-indent: 1em; }
-->
</style>
  ↓
これにより、<p>による段落の1行目が
字下げされるようになります。

インデント(字下げ)する

あああああ
<div style="margin-left:30px">
この行がインデントされます。
</div>
ううううう
  ↓
あああああ
この行がインデントされます。
ううううう

背景を左端のみに表示する

<style type="text/css">
<!--
body { background: url(image/back.gif) repeat-y }
-->
</style>

マウスを乗せたリンクの色を変える(IE4.0)

<style type="text/css">
<!--
a:hover { color: red }
-->
</style>

Copyright (C) 1996-1998 杜甫々
最終更新:1998年3月8日
http://www.tohoho-web.com/css/sample.htm