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

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

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

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

この記事でお話すること

style要素とは?
style要素の使い方
style要素で直接指定はダメなの?
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

リンク

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント