HTML Styleタグについて
定義と使用方法
<style>タグは、内部CSSをHTMLドキュメントに埋め込むために使用されます。このタグを使用することで、別途外部のCSSファイルをリンクすることなく、直接文書内でスタイルを定義することができます。一般的には以下のように使用されます。
使用例：
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
p {
font-size: 16px;
}
</style>
ブラウザのサポート
ほとんどの現代的なブラウザは<style>タグをサポートしています。以下は主要なブラウザでのサポート状況をまとめた表です。
| ブラウザ | バージョン | サポート状況 |
|---|---|---|
| Google Chrome | 4.0+ | サポート |
| Mozilla Firefox | 3.5+ | サポート |
| Safari | 4.0+ | サポート |
| Microsoft Edge | 全バージョン | サポート |
| Internet Explorer | 5.5+ | サポート |
属性とイベント
<style>タグには特定の属性やイベントリスナーはありません。ただし、HTML 5仕様において、type属性が推奨されています。
属性
- type: スタイルシートのMIMEタイプを指定します。通常「text/css」を指定します。
イベント
このタグの特性上、イベントリスナーを直接バインドする方法はありません。
コードの例
以下は、<style>タグを使用してHTML文書にスタイルを適用する簡単な例です。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #e0f7fa;
}
h1 {
color: #00695c;
text-align: center;
}
p {
font-size: 18px;
color: #004d40;
}
</style>
</head>
<body>
<h1>サンプルページ</h1>
<p>これはスタイルタグの例です。</p>
</body>
</html>
よくある質問 (QA)
Q1: <style>タグはどこに配置するべきですか？
A1: <style>タグは通常、<head>セクション内に配置します。
Q2: 外部スタイルシートと<style>タグはどちらが良いですか？
A2: 外部スタイルシートは再利用性が高く、メンテナンスが容易です。小規模なプロジェクトや特定のページだけのスタイルを適用する場合には<style>タグが便利です。
Q3: <style>タグ内でJavaScriptを使用できますか？
A3: <style>タグ内ではJavaScriptを使用できません。スタイルはCSSで指定する必要があります。