[直書きよくない?] htmlのstyle要素とは? 文字色・文字サイズの指定方法も分かりやすく解説!

style要素について知りたい人

style要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

style要素とは?
style要素の使い方
style要素で直接指定はダメなの?

HTMLに文字色や文字サイズを指定するなどCSSを適用させたいという方はいませんか?

HTMLにCSSを適用させる方法の一つにstyle要素を使うという手段があります。

style要素はHTML文書にCSSによるスタイル情報を記述することができます。

なんとstyle要素を利用するとHTMLに直書きすることができます。

そこでこの記事ではstyle要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

style要素の評価

頻出度

(3.0)

重要度

(3.0)

総合評価

(3.0)

1.style要素とは?

HTML文書にCSSスタイルシートを適用するには、HTML文書に直接CSSを直書きで埋め込みする方法とCSSのみを記述したファイルのURLを指定する方法の2通りがあります。

style要素はHTML文書に直接CSSを直書きで埋め込みするときに利用します。

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

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

HTMLとCSSを一つのファイルで管理できるので小規模の開発であれば見やすくて良いですね。

2.style要素の使い方

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

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

type属性

type属性はスタイルシートの記述言語を示す属性です。

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

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

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

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

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

media属性

media属性はリンク先の文書や読み込む外部リソースが、どのメディアに適用するのかを指定します。

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