Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<style>

<style> は HTML の要素で、文書あるいは文書の一部分のスタイル情報を含みます。 <style> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<style>
1
12
1
1
18
1
HTML 属性
media
1
12
1
1
18
1
DOM API
HTMLStyleElement

HTMLStyleElement インターフェイスは style 要素を表します。これは親である HTMLElement からプロパティとメソッドを継承しています。
1
12
1
1
18
1
disabled

HTMLStyleElement.disabled プロパティは、このスタイルシートが無効 (true) かそうでないか (false) を取得または設定するために使用することができます。
1
13
1
1
18
1
media

HTMLStyleElement.media プロパティは、スタイル情報の対象と想定されるメディアを指定します。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<style>
  .highlight {
    background-color: yellow;
    padding: 0.2em 0.4em;
  }
  .text-center {
    text-align: center;
  }
</style>

ライブデモ

Document-level style

A <style> element placed inside the document scopes CSS to that page.

プレビュー全画面表示

Scoped-style pattern

Use a unique class to scope styles defined inside a single component block.

プレビュー全画面表示

Media-conditional styles

Use the media attribute to apply styles only on certain devices.

プレビュー全画面表示

実務での使いどころ

  • <style> の活用

    <style> は HTML の要素で、文書あるいは文書の一部分のスタイル情報を含みます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク