2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

style要素とは? 分かりやすく解説します!

style要素の評価
頻出度
(3.0)
重要度
(3.0)
総合評価
(3.0)




1.style要素とは?

style要素は、文書内にスタイルシートを記述するための要素です。

この要素はhead要素内(<head>~</head>)で使用します。




2.style要素の使い方

style要素で使用できるグローバル属性はtyle属性とmedia属性の2つです。

それぞれの使い方をみていきましょう。

type属性

<!DOCTYPE html>
<html lang="ja">
<head>
<title>type属性の使い方</title>
<style type="text/css">
body {color:orange;}
</style>
</head>
<body>
・・・
</body>
</html>

type属性は、スタイリングシートのMIMEを指定します。

CSSを指定したい場合は「type=”text/css”」となります。

type属性は必須属性ではなく、指定しない場合には「type=”text/css”」がデフォルトで適用されます。

上記のソースコードはbodyの文字色をオレンジにするというものになっています。

media属性

<!DOCTYPE html>
<html lang="ja">
<head>
<title>media属性の使い方</title>
<style media="handheld">
body {color:orange;}
</style>
</head>
<body>
・・・
</body>
</html>

media属性は、どのメディアにどのスタイルを適用するかを指定します。

W3Cの仕様で規定されているmedia属性の値は以下の通りです。

  • all:すべてのメディア
  • screen:一般的なディスプレイ
  • print:通常のプリンタ
  • projection:プロジェクタ
  • tv:テレビ
  • handheld:ハンドヘルドデバイス
  • tty:固定文字サイズの端末
  • embossed:点字プリンタ
  • braille:点字の触角デバイス
  • speech:読み上げブラウザ

上記のソースコードは携帯デバイスのbodyの文字色をオレンジにするというものになっています。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です