<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使用には、次のような制限がある。

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:largecolor: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タグ