ウェブランサー

<style> スタイルシートを指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
タイプ -
取り扱い 標準

<style>タグは、スタイルシートを指定する際に、<head>~</head>の間に記述します。外部に用意したCSSファイルを読み込む場合には、<link>要素を使います。<body>~</body>の間の要素に対してスタイルシートを適用する方法は3通りあります(下記参照)。

<style>タグに指定できる属性

type="値"
スタイルシートの言語を指定します。殆どの場合 type="text/css" を指定します。
media="値"
適応するメディアを指定することができます。
title="値"
スタイルシートのタイトルを指定することができます。
scoped="値" (HTML5)
scoped属性を指定した場合、そのstyle要素の親要素と子要素に対してスタイルを適用します。

<style>の使用サンプル

<link>タグをヘッダーに記述し外部ファイルを呼び出す
最も推奨される方法です。<link>タグを用いて、外部スタイルシートファイルを呼び出します。
HTML
<html>
<head>
<title>スタイルシートサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
外部スタイルシートを読み込みます。
</body>
</html>
<style>タグでヘッダーに埋め込む
その文章にのみ適応したいスタイルシートがある場合に適しています。
HTML

<html>
<head>
<title>スタイルシートサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
.sample01 {
 color: #000066;
 font-size: 20px;
 border-left: 3px solid #0066FF;
 padding: 0px 0px 0px 10px;
 margin: 10px;
}
.sample02 {
 color: #FFFFFF;
 font-size: 16px;
 text-align: center;
 border: 1px solid #999999;
 background-color: #FF6600;
 margin: 10px;
}
-->
</style>
</head>
<body>

<div class="sample01">スタイルサンプル01<div>

<div class="sample02">スタイルサンプル02<div>

</body>
</html>
style="プロパティ"属性で要素に直接指定
これは各要素に対して直接style属性を与えるものです。特定の要素に対してのみスタイルシートを適用したい時に向いています。
HTML
<div style="color:#000066; font-size:20px; border-left: 3px solid #0066FF; padding:0px 0px 0px 10px; margin:10px;">要素に直接スタイルシートを指定01</div>

<div style="color:#FFFFFF; font-size:16px; text-align:center; border:1px solid #999999; background-color:#FF6600; margin:10px;">要素に直接スタイルシートを指定02</div>
表示確認
要素に直接スタイルシートを指定01
要素に直接スタイルシートを指定02

<style>に関連するHTMLタグ

ルート・ヘッダー・メタデータ要素
<base> ページの基準となるURLを指定する
<!DOCTYPE> ドキュメントタイプの宣言
<head> ドキュメントのヘッダーを定義する
<html> HTML文書の開始を宣言してドキュメントルートを定義する
<link> 関連するファイルをリンクする
<meta> ドキュメントについてのメタ情報を追加する
<style> スタイルシートを指定する
<title> ウェブページのタイトルを指定する