スタイルシート参考(使用例)

使用例;グレンフィナンで使っているスタイルシートの例を書きます.スタイルシートは NN4、Ie3以上で対応しているようです. スタイルシートをサポートしていないブラウザ(NN 3のように)のために、表示例は、スタイルシートではない方法で表示しています.


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

   <SPAN STYLE="background:red">スタイルシートWWW参考</SPAN>
    ↓   

  

スタイル WWW参考

redを #ff0000 としても同じ効果があります.
フォントの色を指定する
 <SPAN STYLE="color:white"> ホワイト</SPAN >
    ↓   
  ホワイト
whiteを #ffffff としても同じ効果があります.


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

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

また、ヘッダーにセットする方法
  <STYLE TYPE="text/css">body{font-size:11pt}</STYLE >


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

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

  2.ヘッダーにセットする方法
    <STYLE TYPE="text/css" >
    A {text-decoration:none;}
    </STYLE>


行間を適度にあける

  <STYLE TYPE="text/css">
  BODY { line-height: 150% }
  </STYLE>
    ↓
  これにより本文の行間が
  適度にあくようになります。 
段落の1行目をインデント(字下げ)する

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

  AAAA
  <BR><SPAN STYLE="margin-left:30px; display:inline">
  この行がインデントされます
  <BR></SPAN><BR>
  BBBB
    ↓
  AAAA
    この行がインデントされます
  BBBB
背景を端に表示する (NN と Ieで表示に違いがあるので注意が必要です) HTML のヘッダー部分に記入します (Ie3では、右縦一列に指定のGIFが表示されます repeat-y は 座標Y方向の意味です)

※ <STYLE TYPE="text/css">BODY {background:色を指定 url(directry/xxxx.gif) repeat-y fixed right top} </STYLE >


各々を 組み合わせて試してみてください