<style>

<style>はCSSを記述するためのHTMLタグです。<style>と</style>の間にCSSを記述することにより、このHTML内でそのスタイルシートを適用することができます。<style>タグは<head>と</head>の間に記述します。

タグ

<style>
  <!-- CSS properties -->
</style>

終了タグは省略できない。

属性

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

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

<style type="text/css">
media
参照先の文書がどんなメディアに適したものかを指定する。
media属性
意味
allすべてのデバイス
aural音声合成装置
braille点字プリンタ
embossed点字プリンタ
handheld小画面でモノクロ・狭帯域の携帯デバイス
printページ区切りのある印刷出力、または印刷プレビュー画面
projectionプロジェクター
screenページ区切りのないコンピュータ画面
tty端末(コンソール)
tvテレビ画面のようにコンピュータ画面より解像度の低いカラーディスプレイ

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

<style media="print">
title
タイトルを指定する。

サンプル

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>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body>
    <!-- content -->
  </body>
</html>

AMP

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

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

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

JavaScript

JavaScript からCSSプロパティを参照・変更するには、style プロパティを使う。

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

HTMLタグ