2019.12.02 2022.12.16

<style>要素の使い方・サンプルコード

Sara

<style>
属性
使用例
対応ブラウザ
関連するタグ

<style>

<body>要素内に書くこともできますが、通常 <head>要素内に記述します。

属性

media

スタイルを適用するメディアタイプを指定します。

all

全てのデバイスを指定します。media 属性を指定しない場合は、デフォルトで all となります。

<style media="all"></style>

print

プリンターのプレビュー画面、印刷時を指定します。

<style media="print"></style>

screen

一般的なウェブブラウザを指定します。and と組み合わせてスマートフォンへの対応によく使用されます。

以下のように指定すると画面の幅が768px以下の場合に適用されます。

<style media="screen and (max-width: 768px)"></style>

その他のメディアタイプ

その他のメディアタイプ tty, tv, projection, handheld, braille, embossed, aural は非推奨となっています。

参考：メディアクエリの使用

type

スタイル言語を MIME タイプで定義します。省略した場合は text/css となります。

scoped

* 現在非推奨になっています。

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら

使用例

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <style media="all">
    span {
      color: red;
    }
  </style>
</head>
<body>
  <p>ここに<span>テキスト</span>を入力します。</p>
</body>
</html>

実行結果

ここにテキストを入力します。

対応ブラウザ

<style>要素の使い方・サンプルコード

<style>

属性

media

all

print

screen

その他のメディアタイプ

type

scoped

グローバル属性

使用例

HTMLコード

実行結果

対応ブラウザ

関連するタグ

<track>要素の使い方・サンプルコード

<input type="week">の使い方・サンプルコード

<div>要素の使い方・サンプルコード

<abbr>要素の使い方・サンプルコード

<rt>要素の使い方・サンプルコード