[PR]ﾃﾚﾋﾞ番組表
今夜の番組ﾁｪｯｸ

とほほのスタイルシート入門(使用例)

とほほのWWW入門 > とほほのスタイルシート入門 > サンプル
1998年3月8日版

スタイルシートを用いた使用例として、通常の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>
　　↓
これにより本文の行間が
適度にあくようになります。　

■ 段落の１行目をインデント（字下げ）する

<STYLE TYPE="text/css">
<!--
P { text-indent: 16px }
-->
</STYLE>
　　↓
　　これにより、<P>による段落の１行目が
字下げされるようになります。

■ インデント（字下げ）する

あああああ
<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-1999 杜甫々
http://tohoho.wakusei.ne.jp/wwwcss4.htm