【HTML入門】styleタグやstyle属性を使って直接CSSを書き込もう！

2024年3月29日

かい

みなさんこんにちは！

HTMLにCSSを適用させたいとき、どのようにすれば良いか迷っていませんか？

HTMLにCSSを適用するには3つの方法があります。その中でも、HTMLファイルに直接書く方法は「styleタグ」と「style属性」の2つがあります。

styleタグを使ってHTMLに直接CSSを書きたい…
styleタグとstyle属性の違いが分からない
よく見るdiv styleについて理解したい…

そんな方に向けて、今回はstyleについてを徹底解説していきます！

ちなみにHTMLにCSSを適用する一般的な方法は、CSSファイルを読み込む方法です。この方法についても説明していきますね。

「styleタグ」と「style属性」とは

HTMLファイルでCSSを指定するためには、「styleタグ」か「style属性」のどちらかを使います。

styleタグ
HTMLのタグの種類。headタグ内に記述し、タグの開始タグと終了タグの間にCSSを記述する。

style属性
HTMLのタグに付与できる属性。HTMLタグの中にCSSを記述する。

それぞれ細かく見ていきましょう！

styleタグを実際に使ってみよう！

styleタグとはスタイルシートを記述するためのHTMLタグです。

headタグの中に入れて、適応するスタイルを書いていくのが基本ですが、HTMLとCSSを一つのファイルで管理できるので小規模の開発であれば見やすくて良いですね。

下記のようにコードを記述します。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        body {
            background-color: #00ff00
        }

        .container {
            width: 90%;
            text-align: center;
        }

        .first-sentence {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <p class="first-sentence">これはテストの文章です。</p>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

このように、<head></head>に囲まれた中に<style></style>を書くことで、きちんとスタイルがかかっています。しかしこの方法は、量が多くなればなるほど可読性が落ちて中規模以上の開発にはあまり向きません。

style属性を実際に使ってみよう！

style属性は属性ですので他タグの属性として機能します。つまり、divタグにclass属性をつけるのと同じように使うということです。

こちらも実際に見ていきましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
</head>

<body style="background: #00ff00;">
    <div style="text-align: center;">
        <p style="font-weight: bold;">これはテストの文章です。</p>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

いかがでしょうか。同じ状態が再現できました。styleを属性として付与することで、いちいちclassを付与する必要がないので楽ですね。

しかし、同じ要素には毎回styleを書かないといけませんし、コードの量が増えれば同じ変更を何度もしなければ行けなかったりと保守性はかなり悪いです。基本的には、小規模の開発や一部だけ修正するときなどに活躍してくれる方法です。

よく見るdiv styleについてみてみよう

実例としてはよくdivタグにstyle属性がついていることが多いですね。クラスを付与しなくていいので、一つのdivだけスタイルをかけたいときなどに使われることが多いのです。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
</head>

<body style="background: #00ff00;">
    <div style="text-align: center;">
        <p style="font-weight: bold;">これはテストの文章です。</p>
    </div>
    <div>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

こんな感じで一つのdivにだけstyle属性をかけてやれば、

このようにスタイルの範囲を管理できます。

【重要】HTMLにスタイルをつけるならCSS読み込み式がベスト

ここまでstyle属性やstyleタグを使ってHTMLにCSSを適用させてきましたが、実はこれらはあまり出番がありません。

style属性やstyleタグはHTMLに直接記述することになるので、複数のHTMLファイルを作成する際、それぞれのHTMLファイルにいちいちCSSを記述しなければならないので、超めんどくさいんです。しかも同じようなパーツの修正が入ったとき、全てのファイルを更新しなければならないので、保守性がかなり悪くなってしまいます。

Web制作で一般的なCSS適用方法は、CSSファイルを別途用意してHTMLファイルに読み込ませる方法です。これならCSSの変更があった場合、CSSファイルだけを更新すれば全てのHTMLファイルに変更版のCSSを適用できるのでとっても便利なのです。

HTMLにCSSを読み込ませてみよう！

実際にHTMLファイルにCSSファイルを読み込んでみましょう。

samurai
├── index.html
└── style.css

このようなファイル構造でファイルを用意しました。中身を見ていきます。

【index.html】

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <p class="first-sentence">これはテストの文章です。</p>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

【style.css】

body {
    background-color: #00ff00
}

.container {
    width: 90%;
    text-align: center;
}

.first-sentence {
    font-weight: bold;
}

画像のように、きちんとスタイルがかかっていることが確認できますね。CSSファイルを読み込むには別ファイルで.cssという拡張子のファイルを作り、HTMLファイルで

というような感じで読み込むことができます。

こうすることでファイルを分割することができるので、コードの読みやすさや保守性の高さを実現できるわけです。

相対パスとは

href=“”の中に書く相対パスとは、呼び出すファイルから見て呼び出されるファイルがどこにあるかということを示すパスです。

予備知識としては、

同階層が、”./“
一つ後の階層が、”/“
一つ前の階層が、”../“

になります。例えば

samurai
├── css
│   └── style.css
└── index.html

このような階層で、index.htmlからstyle.cssを呼び出す相対パスは

href="css/style.css"

こうですし、

samurai
├── css
│   └── style.css
└── src
    └── index.html

こうであれば、

href="../css/style.css"

こうなります。ちなみに、同階層を示す”./“は省略可能ですので覚えておくようにしましょう。

HTMLにstyleを適用するときのQ&A

Q1.3つの読み込み方はどの様に使い分ければいい？

A.基本的にはCSS読み込みで作成することをオススメします。

とはいえ他の方法も使える場面があるので、下記を参考に判断してみてください。

styleタグ	LPなどのワンページサイト
style属性	小規模サイトで軽微な修正そのうち消す想定の追加（台風◯号のお知らせとか）
CSSファイル読み込み	基本的にこれ大規模サイトでも小規模サイトでも使える