<style> 【スタイルシートを記述する】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op8] [Op9] [Ns6] [Ns7]
<style>タグは、スタイルシートを指定する際に、<head>〜</head>の間に記述します。<body>〜</body>の間の要素に対してスタイルシートを適用する方法は3通りあります。
スタイルシートの指定方法
<link>タグをヘッダーに記述し外部ファイルを呼び出す
最も推奨される方法です。<link>タグを用いて、外部スタイルシートファイルを呼び出します。
<style>タグでヘッダーに埋め込む
このページで紹介する方法です。その文章にのみ適応したいスタイルシートがある場合に適しています。
style="プロパティ"属性で要素に直接指定
これは各要素に対して直接style属性を与えるものです。特定の要素に対してのみスタイルシートを適用したい時に向いています。
<style>タグの使用方法
まず<head>〜</head>の間に<style>、</style>タグを記述し、間に<!-- -->（コメントアウト）を入れ子状にして記述します。さらにコメントアウトされた中に、各セレクタとプロパティでスタイルシートを記述していきます。
この方法を取る事で、スタイルシートが使えない環境下で表示された場合に、ヘッダーのソースがブラウザに表示されてしまう可能性を防ぐ事が出来ます。
スタイルシートを使用する場合は
<meta http-equiv="Content-Style-Type" content="text/css">
という一行をヘッダーに加えておきましょう。
<style>の使用例
ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>スタイルシートサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
.sample01 {
color: #ccffcc;
font-size: xx-large;
border-bottom: 1px dashed #000000;
background: #00cc00;
margin: 10px;
}
.sample02 {
color: #ccccff;
font-size: x-large;
text-align: center;
border-bottom: 1px dashed #0066ff;
background: #0000cc;
margin: 10px;
}
.sample02 {
color: #ffcccc;
font-size: large;
text-align: right;
border-bottom: 1px dashed #ff6600;
background: #cc0000;
margin: 10px;
}
-->
</style>
</head>
<body>
<div class="sample01">サンプル01</div>
<div class="sample02">サンプル02</div>
<div class="sample03">サンプル03</div>
</body>
</html>
表示すると
スタイルシート 関連項目
| スタイルシート講座をご覧下さい | スタイルシートを詳しく解説します。 |
