Perl/ActivePerl For UNIX/Linux/Windows
 
TryThe Homepage
初めてのCGI
CGI 研究室
ダイナミックCGI
ダウンロード
サービス
サーバ構築(Windows)
データベースアクセス
有料サービス
FAQ
お問い合わせ
このページを印刷
スタイルシートの使用
スタイルシートは、今までのHTMLのタグに機能を追加する為に開発されたテクノロジーで、 名前のごとく見た目のスタイルを細かく設定できるだけでなく、タグをブロック化したオブジェクトとして管理できます。 ここでは最も基本的な文字の大きさや、色の設定を解説しています。
フォントサイズやフォントの色は<font>タグでも指定できますが、styleで設定したフォントサイズや、 フォンとカラーはいつでも動的に変更できる事がタグとは違うところです。 また、ポイント(pt)単位で設定されたフォントは訪問者のブラウザ設定に関係なく、 指定された大きさで表示されますので、レイアウトが崩れる事も防いでくれます。
スタイルシートは、その都度1つ1つのタグに設定する事も可能ですが、 別ファイルにして各ページの先頭で読み込むことができます。
ホームページ全体に適用したい場合などには非常に便利です。
メモ帳などのテキストエディタに、
a:link { text-decoration:none; color:#FF0000 }
a:visited { text-decoration:none; color:#0000FF }
a:active { text-decoration:none; color:#00FF00 }
a:hover { text-decoration:none; color:#FFFF00 }
このように入力して「mainstyle.css」と保存しておき、実際に表示する各ページの<body>タグの上にでも、
<link rel="stylesheet" href="mainstyle.css" type="text/css">
このようにスタイルシートを呼び出すHTMLタグを追加するだけです。
※本来は<head>から</head>の間に置く
各ページで違ったスタイルシートを使用する場合は、<body>タグの上に、
<style TYPE=text/css>
    a:link { text-decoration:none; color:#FF0000 }
    a:visited { text-decoration:none; color:#0000FF }
    a:active { text-decoration:none; color:#00FF00 }
    a:hover { text-decoration:none; color:#FFFF00 }
</style>
このように設定するスタイルを記述します。
  • スタイルシートの大文字、小文字
    スタイルシート内では大文字小文字を区別しません。
    これはIEでもNetscapeでも同様です。どちらで書いても結構ですが、JavaScriptと、 CGIで使用する場合は、Perlとの区別が付きにくくなりますので、 どちらか一方に決めておいたほうがいいと思われます。
    <p><div style="COLOR: #FF0000">大文字で書いています。</div></p>
    <p><div style="color: #0000FF">小文字で書いています。</div></p>


  • リンク色の設定
    通常何も設定されていない場合は、リンクが付けられた文字列にアンダーラインが付けられます。
    このアンダーラインを削除して他の属性を設定します。
    <style TYPE=text/css>
      a:link { text-decoration:none; color:#FF0000 }
      a:visited { text-decoration:none; color:#0000FF }
      a:active { text-decoration:none; color:#00FF00 }
      a:hover { text-decoration:none; color:#FFFF00 }
    </style>
    <p>これはリンク色を設定するサンプルです。</p>
    <a href=javascript:void(0)>ここにマウスをセットしてください。</a>


  • ページ全体のフォントサイズを設定
    ページ全体のフォントサイズを設定するには<body>タグに直接、
    <body style="FONT-SIZE: 11pt">と書くことができますが、これでは全てのページに設定する必要がありますので、 スタイルシートのファイルに次のコードを追加して全てのページに適用する事もできます。
    <style TYPE=text/css>
      body { font-size: 15pt }
    </style>
    <p>ドキュメント全体のフォントサイズです。</p>
    <table border=1><tr><td>
    テーブル内には適用されません。
    </td></tr></table>

    ボディタグに設定したスタイルは<div>タグなどの領域には適用されますが、テーブル内のセルには適用されません。 テーブル内のセルにもフォントサイズを設定する場合は、
    テーブル内のフォントを固定したい場合は、
    <style TYPE=text/css>
      body { font-size: 11pt }
      td { font-size: 14pt }
    </style>
    <table border=1><tr>
    <td>
    テーブル内は14ポイントに設定
    </td>
    <td>
    セルをいくつ追加してもテーブル内フォントサイズが適用されます。
    </td>
    </tr></table>


  • 文字の背景色
    各領域ごとにページ全体の背景色とは別の色で背景色を設定できます。
    <p><div style="background:Red">背景色は赤です。</div></p>
    <p><div style="background:Blue">背景色は青です。</div></p>

Copyright 2004 Terra. All rights reserved. No reproduction or republication without written