[直書きよくない?] 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>

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

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

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

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




3.style要素で直接指定はダメなの?

ソースコードの記述はできるだけすっきりさせたほうがいいです。

簡素化されたWebサイトであればあまり影響はありませんが、style要素で直接cssを指定するのはできるだけ避けたほうがいいです。

なぜなら、「複数ページにまたがるWebサイトの場合、修正箇所が多くなる」、「レイアウト崩れの原因になる」からです。

そのため、style要素で直接cssを指定するのではなく、class属性やid属性で指定していくことをオススメします!

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?