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

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

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

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

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

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

HTML
<span style="background-color:silver">背景色</span>
表示
背景色

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

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

行間を適度にあける

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

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

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

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

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

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

HTML
<style>
body { background: url(image/back.gif) repeat-y }
</style>

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

HTML
<style>
a:hover { color: red }
</style>

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