みなさんこんにちは！
HTMLにCSSを適用させたいとき、どのようにすれば良いか迷っていませんか？
HTMLにCSSを適用するには3つの方法があります。その中でも、HTMLファイルに直接書く方法は「styleタグ」と「style属性」の2つがあります。
styleタグとstyle属性の違いが分からない
よく見るdiv styleについて理解したい…
そんな方に向けて、今回はstyleについてを徹底解説していきます！
ちなみにHTMLにCSSを適用する一般的な方法は、CSSファイルを読み込む方法です。この方法についても説明していきますね。
「独学と並行しながら、副業で稼げるようになれるかな…」
そんな不安を抱えている人は、ぜひ「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。フリーランスエンジニアの支援を受けながら、実際の副業案件にも挑戦できます。
これまで4万5,000名以上の受講生を指導してきた侍エンジニアなら、未経験からでも挫折なく副業での収入獲得に直結するスキルが身につけられますよ。
「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ファイル読み込み | 基本的にこれ 大規模サイトでも小規模サイトでも使える |
Q2.CSSがきちんと適用されない、何故？
A.CSSがきちんと適用されない場合は、下記のポイントをチェックしてみてください。
- 綴り間違ってない？
- 「；」入ってる？
- 全角スペース入っていない？
- タグや読みこみの場合は「{ }」属性の場合「“”」で囲われてる？
- classには「.」idには「＃」ついてる？
Q3.何をどうしても上手く行かないときは
A.いろいろ調べてみてもわからなかったり、色んなパターンで試してもイメージ通りにいかない時は必ずあります。
そんな時は、もう寝ましょう！悩み続けるばかりでは問題は解決しません。気持ちを切り替えたり、一旦考えをリセットしてみたりすると、意外と簡単に解決できちゃうこともあります。
しかしそれでもわからなくて、もしかしてHTMLやCSSは自分に向いていないかも……と不安になってしまった時は、誰かに頼ってみてはいかがでしょうか？知り合いのエンジニアに聞いてみたり、しっかり学ぶならスクールに通うのも手ですね！
下記の記事でオススメのスクールをまとめているので、ぜひ参考にしてみてください。
まとめ
いかがでしたでしょうか。今日は、styleタグとstyle属性の違いから使い方、また実際の現場で使われる相対パスでCSSファイルを読み込む方法ということについて説明してきました。
HTMLにCSSをかけることは基本中の基本ですので必ずマスターしておきましょう！ それでは！！
