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

HOME > とほほのWWW入門 > とほほのスタイルシート入門 > 使用例
1998年3月8日版
スタイルシートを用いた使用例として、通常のHTMLタグでは実現が難しいものについて紹介します。スタイルシートをサポートしていないブラウザのために、表示例は、スタイルシートではない方法で表示しています。

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

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

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

<SPAN STYLE="background:#CCCCCC">とほほのWWW入門</SPAN>
  ↓
とほほのWWW入門

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

<A HREF="xxx.html" STYLE="text-decoration:none">リンク</A>
  ↓
リンク

行間を適度にあける

<STYLE TYPE="text/css">
BODY { line-height: 150% }
</STYLE>
  ↓
これにより本文の行間が
適度にあくようになります。 

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

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

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


あああああ
<BR><SPAN STYLE="margin-left:30px; display:inline">
この行がインデントされます。
<BR></SPAN><BR>
ううううう
  ↓
あああああ
  この行がインデントされます。
ううううう

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

<STYLE TYPE="text/css">
BODY { background: url(image/back.gif) repeat-y }
</STYLE>

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )