HTML <style>

HTML文書にCSSスタイルシートを適用するには、HTML文書に直接CSSを直書きで埋め込みする方法と、CSSのみを記述したファイルのURLを指定する方法の2通りがある。<style>タグは、HTML文書に直接CSSを直書きで埋め込みするHTMLタグである。

書き方

<style>
  /* CSS */
</style>

属性

style要素には次の属性を指定できる。

amp-custom

AMP (Accelerated Mobile Pages) でCSSを指定するには、style要素に amp-custom 属性を指定する。属性値は省略できる。

<style amp-custom>
  /* CSS */
</style>

AMPでのCSS使用には、次のような制限がある。

!important 修飾子は使用できない
カスタムフォントを除き、<link rel="stylesheet"> で外部のCSSをインポートすることはできない。

media

参照先の文書がどんなメディアに適したものかを指定する。

media属性
値	意味
all	すべてのデバイス
aural	音声合成装置
braille	点字プリンタ
embossed	点字プリンタ
handheld	小画面でモノクロ・狭帯域の携帯デバイス
print	ページ区切りのある印刷出力、または印刷プレビュー画面
projection	プロジェクター
screen	ページ区切りのないコンピュータ画面
tty	端末（コンソール）
tv	テレビ画面のようにコンピュータ画面より解像度の低いカラーディスプレイ

style要素でCSSをHTMLに直書きする場合は @media を使えないので、media属性で対象メディアを指定する。

<style media="screen">
  body {
    color: #333333;
  }
</style>
<style media="print">
  body {
    color: black;
  }
</style>

title

代替スタイルシートを指定する。

<style title="secondary">
  /* CSS */
</style>

titleはHTML5のグローバル属性であるが、styleタグのtitle属性は特別な意味合いを持つ。

ウェブ・ブラウザによっては、適用するCSSをデフォルトのスタイルシートから代替スタイルシートへ切り替えることができる。

ただし、すべてのウェブ・ブラウザで切り替えられるわけではない。各ブラウザの対応状況は次のとおり。

代替スタイルシートの対応状況
ウェブ・ブラウザ	対応状況
Brave	未対応
Chrome	未対応
Edge	未対応
Firefox	対応済
Internet Explorer	対応済
Opera	対応済
Safari	未対応

市場シェアの高いブラウザであるChromeやSafariで未サポートであるため、原則的にstyle要素のtitle属性は使用しないほうがよい。

type

MIMEタイプを指定する。現状は "text/css" しか指定できないため、省略してよい。

<style type="text/css">

タグの省略

開始タグおよび終了タグは省略できない。

親要素

style要素の親要素はhead要素である。

<head>
  <style>
    /* CSS */
  </style>
</head>

style要素は複数あってもよい。

<head>
  <style>
    /* CSS */
  </style>
  <style>
    /* CSS */
  </style>
</head>

内容

style要素の内容に含められるのは、テキストのみである。タグは使用できない。

使い方

HTMLのstyleタグにセレクタを記述すると、セレクタにマッチする要素にスタイルシートが適用される。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS example</title>
    <style>
      h1 {
        color: red;
        font-size: large;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
  </body>
</html>

上記の例の場合、このHTML文書に含まれるすべてのh1要素に対して、font-size:large と color:red の2つのCSSプロパティが適用される。

外部のファイルにCSSを記述する

HTMLにCSSを直書きするのではなく、外部のファイルにCSSを記述した場合は、link要素を使う。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS example</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body>
    <!-- content -->
  </body>
</html>

JavaScript

JavaScript からは HTMLStyleElement インタフェースを通じてstyle要素にアクセスできる。

HTMLStyleElement インタフェースは次のプロパティを持つ。

HTMLStyleElement
プロパティ	型	説明
innerText	DOMString	ノードやその子孫の描画されるテキストの内容
media	DOMString	要素のmedia属性
style	CSSStyleDeclaration	要素のstyle属性
title	DOMString	要素のtitle属性

JavaScriptから要素のstyle属性に「display: none;」を設定する例を次に示す。

document.getElementById('errmsg').style.display = 'none';

HTMLタグ

参考文献

WHATWG (2021) "The elements of HTML" HTML Living Standard