スライドショー

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

styleタグと style属性とは?

みなさんこんにちは!

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は自分に向いていないかも……と不安になってしまった時は、誰かに頼ってみてはいかがでしょうか?知り合いのエンジニアに聞いてみたり、しっかり学ぶならスクールに通うのも手ですね!

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

初心者必見!HTML・CSSを学べるオススメのプログラミングスクール5選
更新日 : 2019年7月26日

まとめ

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説