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

みなさんこんにちは!

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ファイルで

<link rel=”stylesheet” href=”相対パス”>

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

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

相対パスとは

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ファイル読み込み 基本的にこれ
大規模サイトでも小規模サイトでも使える

Q2.CSSがきちんと適用されない、何故?

A.CSSがきちんと適用されない場合は、下記のポイントをチェックしてみてください。

  • 綴り間違ってない?
  • 「;」入ってる?
  • 全角スペース入っていない?
  • タグや読みこみの場合は「{ }」属性の場合「“”」で囲われてる?
  • classには「.」idには「#」ついてる?

Q3.何をどうしても上手く行かないときは

A.いろいろ調べてみてもわからなかったり、色んなパターンで試してもイメージ通りにいかない時は必ずあります。

そんな時は、もう寝ましょう!悩み続けるばかりでは問題は解決しません。気持ちを切り替えたり、一旦考えをリセットしてみたりすると、意外と簡単に解決できちゃうこともあります。

しかしそれでもわからなくて、もしかしてHTMLやCSSは自分に向いていないかも……と不安になってしまった時は、誰かに頼ってみてはいかがでしょうか?知り合いのエンジニアに聞いてみたり、しっかり学ぶならスクールに通うのも手ですね!

下記の記事でオススメのスクールをまとめているので、ぜひ参考にしてみてください。

まとめ

いかがでしたでしょうか。今日は、styleタグとstyle属性の違いから使い方、また実際の現場で使われる相対パスでCSSファイルを読み込む方法ということについて説明してきました。

HTMLにCSSをかけることは基本中の基本ですので必ずマスターしておきましょう! それでは!!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次