スライドショー

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

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

HTML/CSSが学べるスクール10校┃安さ・地域別・オンライン別に厳選
更新日 : 2020年4月15日

まとめ

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

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

かい

かい

日向徹かこよすぎか

[email protected]