English 中文 العربية 日本語 Português

<style>: STYLE 要素

最終更新：2026-10-13

<style>STYLE 要素

外部ファイルを使わずに CSS ルールを文書内に直接書きます。media 属性で適用条件を制限できます。

カテゴリメタデータ
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </style> タグ
ステータス標準

📝 構文

<style>
  selector { property: value; }
</style>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性値説明
typeStyle language, default text/css, usually omitted.
mediaMedia condition that limits when the style applies.
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<style> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： style はデモに便利ですが、本番サイトでは再利用性のため外部 CSS（link）を推奨します。

❓ よくある質問

Qstyle タグは head と body のどちらに置くべきですか？
A仕様上、style は head の中にしか置けません（body の中の style はコンテンツモデル違反です）。実際のブラウザは容認しますが、重要な CSS を head に集めて FOUC を防ぐのが正攻法です。コンポーネント化の文脈で JS が style を注入する場合は別の話です。
Qstyle と link で CSS を読み込む違いは何ですか？
A<style> はインラインのスタイルブロックで、HTML と一緒に届き追加リクエストが不要なため、初屏の重要 CSS に向きます。<link> は外部ファイルで、キャッシュされ、複数ページで再利用でき、保守しやすいため、サイト全体のスタイルに向きます。定番の性能最適化は、head の style に重要 CSS を置き、残りを link で非同期に読む組み合わせです。
Qstyle の media 属性はどう使いますか？
Astyle に media='print' を付けると印刷時だけ効く CSS になり、media='(max-width: 600px)' なら条件付きで有効になります。注意点として、条件に合わない style ブロックは適用されませんが、ダウンロードと解析は行われます。
<head> <link> <meta>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%