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

2021年2月24日2021年6月1日

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>