<style>
<style>要素には、CSS によるスタイルの情報を記述します。
<body>要素内に書くこともできますが、通常 <head>要素内に記述します。
属性
media
スタイルを適用するメディアタイプを指定します。
all
全てのデバイスを指定します。media 属性を指定しない場合は、デフォルトで all となります。
<style media="all"></style>
プリンターのプレビュー画面、印刷時を指定します。
<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>実行結果
ここにテキストを入力します。
対応ブラウザ
関連するタグ
- <head>：HTML文書のヘッダ情報
Code for Fun プログラミング講座では「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで学ぶことができます。
- 何か一つ形にしてみたい！
- 次に何をして良いか分からない…
- プログラミングに挫折しそう…
という方にオススメです。
