<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>

表示すると

サンプル01
サンプル02
サンプル03

スタイルシート 関連項目

スタイルシート講座をご覧下さい スタイルシートを詳しく解説します。 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img