HTMLファイルにCSSを当ててみよう！CSSを読み込む方法3選！

2025年9月5日2025年11月5日

今回は、主にWeb制作初心者向けに

HTMLファイルにCSSを当てる方法について、3つの方法を紹介していきます！

CSSは、Webサイトを制作する際の重要な役割を担っているので

ここでしっかり勉強していきましょう！

一緒に練習してみたい方は、ぜひVSCodeなどのエディターを開いて

自分でも記述をしてみてくださいね。

CSSの役割

Webサイトは、HTMLやCSS、JavaScriptなどの言語を利用してできています。

HTMLは、基本的にテキストや表などの表示しかできないので

HTMLだけで記述した場合は、大きさがバラバラだったり白と黒の色しかなかったりして

綺麗なサイトとは言えません。

このバラバラなテキストや表の大きさを揃えたり、逆にあるテキストだけを大きくしてメリハリを持たせたり

テキストや背景などに色をつけたり、そういった装飾の役割をするのがCSSです。

ちなみに、CSSはCascading Style Sheetの略称です。

また、今回は紹介しませんがCSSではアニメーションを作ることもできます。

ここで、少し勉強している人は

「アニメーションって、動きがあるからJavaScriptで実装するんじゃないの？」

と思われたかも知れません。

確かに、JavaScriptを実装することもありますが

実装したいものによっては、CSSの記述だけでできてしまうこともあります。

ということで、CSSの主な役割は

・テキストや表の大きさを変えたり、背景色などを変える

・アニメーションを施す

になります。

CSSは、装飾を加えたりアニメーションを表示したりと、Webサイトの中で重要な役割を担う

CSSを読み込む方法3選

では、CSSの役割がわかったところで、さっそくHTMLにCSSを読み込んでみましょう！

せっかくなので、CodePenを利用して、実際にCSSが当たっている様子を見せながら解説していこうと思います。

CSSを当てる前の状態は、こんな感じです。

See the Pen CSSの当て方（HTMLのみ） by わい (@y_programing) on CodePen.

①linkタグで設定する

1つ目は、「linkタグで設定する」方法です。

最も一般的な方法であり、メリットとしてlinkタグの1行だけ入れておけば、htmlファイルが複数あってもその全てに適応できる点です。

linkタグで設定をする場合は

HTML

<link rel="stylesheet" href="◯◯.css">

<link rel="stylesheet" href="◯◯.css">

の形に当てはめていきます。

htmlファイルにstyle.cssを当てたい場合は、<link rel=”stylesheet” href=”style.css”>

reset.cssを当てたい場合は、<link rel=”stylesheet” href=”reset.css”>

と記述します（linkタグを複数入れても問題ありません）。

また、CSSを当てるlinkタグはheadタグの中に入れないと適応されないので、その点も注意してください。

今回は、画面全体の背景をピンクにするCSSを当てていきたいと思います。

style.cssファイルの中に

CSS

body {
 background: pink;
}

body {
 background: pink;
}

を記述し、index.htmlファイルのheadタグ内に

HTML

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="style.css">

を書き込みます。

htmlファイルのheadタグの中に、<link rel=”stylesheet” href=”style.css”>が書かれていることを確認してみてください。

See the Pen CSSの当て方（linkタグで当てる方法） by わい (@y_programing) on CodePen.

②styleタグで設定する

次は、styleタグで設定をする方法です。

1番目に紹介したlinkタグと同じで、styleタグを利用する場合もheadタグの中に記述をします。

記述の仕方は、以下のようになります。

HTML

<style>
 body {
   background: pink;
 }
</style>

<style>
 body {
   background: pink;
 }
</style>

ちなみに、この書き方はWordPressでテーマに追加CSSを当てる方法とほぼ一緒の方法です。

テーマに追加CSSを当てることによって、WordPress側でheadタグ内にstyleタグで記述をする処理が行われているんですね。

では、styleタグを利用する方法を実際に見てみましょう。

See the Pen CSSの当て方（styleタグで当てる方法） by わい (@y_programing) on CodePen.

上手く当たっていますね。

③style属性でHTMLのタグに設定する

2番目のstyleタグの場合と、どう違うの？」

と思うかも知れませんが、今回の方法は、style「属性」にCSSを当てる方法で、HTMLのタグ内に記述をします。

実際の例を見てもらった方が早いと思いますので、さっそくコードを書いていきましょう。

HTML

<body style="background: pink;"></body>

<body style="background: pink;"></body>

こんな感じで記述します。

styleタグを利用する場合はheadタグの中でないといけませんでしたが、style属性を利用する場合は、適応させたい要素のタグの中に直接書き込みます。

それでは、style属性を書き込んだ例もCodePenで確認してみましょう。

See the Pen CSSの当て方（style属性で当てる方法） by わい (@y_programing) on CodePen.

このように、CSSの当て方は色々ありますが

初心者のうちは、まず1つ目の「①linkタグで設定する」の方法を使ってみることをお勧めします。

慣れてきたら2, 3番目の

「②styleタグで設定する」「③style属性でHTMLのタグに設定する」

方法の練習をしてみましょう！

CSSを読み込む方法の優先順位について

ここまでで、CSSを読み込む方法を3つ紹介してきました。

しかし、この3つの方法には優先順位があります。

CSSを読み込む方法の優先順位

style属性でHTMLのタグにCSSを記述する
styleタグでCSSを記述する
linkタグでCSSを記述する

番号が若いほど、優先順位が高くなります。

つまりstyle属性でHTMLタグの中にCSSを記述するのが最も優先順位が高くなり、適応されやすいのです。

初心者きつね

じゃあ今度から、極力style属性でHTMLタグの中にCSSを記述していこうかな！

と思ったかもしれませんが、その考え方は危険です。

style属性でHTMLタグの中にCSSを記述する方法は確かに優先順位が高いので確実にCSSが当たりますが

逆に、他2つの方法でCSSを記述することを阻止してしまうことにもなるからです。

例えばstyle属性でh1のfont-sizeに関してのCSSを記述した場合は

その後にstyleタグを利用してh1のfont-sizeに関するCSSを記述しても、そちらは打ち消されてしまうということです。

わい

実際に僕もWordPressサイトの追加CSS機能でCSSを記述したけど、同じプロパティに関する記述が既にstyle属性で当たっていたので効かなかった時があったよ。

現に、僕もサイトに設置してあったスライダーの両端にある矢印の位置をちょうどいい位置に調節しようとしましたが、同じプロパティに関する記述が既にstyle属性で当たっていたので効かなかった時がありました。

なので、style属性を利用する場合はそれでなくてはいけないなどのよっぽどの理由の場合を除いて

極力控えるようにしましょう。

自分だけでそのサイトを形成したり手を加える場合はそれでいいですが

Web制作などでは、既に誰かが改修したサイトの別部分を改修することもあり、その時に担当になった人が困ったり面倒くさい手段を取り入れないといけなくなるからです。

優先順位を無視してCSSを当てる方法

ということでそれぞれのCSSの当て方に優先順位があることは理解できたと思いますが

実は、優先順位を無視してCSSを当てる方法があります。

CSSのプロパティの後ろの数値の部分に「!important」を付ける

それは、CSSのプロパティの後ろの数値の部分に「!important」と付けることです。

これを付けることで、先ほど紹介した記述方法の優先順位に関係なくそのプロパティが何よりも優先されます。

先ほどのスライダーの例でも、他の記述には1つも当たっていなかったので

「!important」を当てることにしました。

その結果、中央から見て上の方に偏っていた両端の矢印を、きちんと中央に揃えることができました。

当て方は

CSS

h1 {
  font-size: 24px !important;
}

h1 {
  font-size: 24px !important;
}

という感じで、数値の直後に半角スペースを入れてから記述をします。

わい

「;（セミコロン）」の後ろではないので気をつけてね！

何でもかんでも「!important」を付ければいいというわけではない

しかし、CSSのプロパティの後ろの数値の部分に「!important」を付けるとそのCSSが効くからといって

無闇に付与し、「!important」だらけになってしまうのはお勧めしません。

理想は、「!important」が付いてしまう記述が1〜2個程度になることです（0個が1番いいですけどね！）。

この記事で紹介した優先順位に従ってCSSの記述を行い、その上で

修正したい部分があるが、どうしてもCSSが効かない場合にのみ「!important」を利用するようにしましょう。

まとめ

ということで、今回はCSSを読み込む方法について、3つの方法を紹介してきました。

軽くおさらいをすると

linkタグで設定する
styleタグで設定する
style属性でHTMLのタグに設定する

の3つの方法でした。

また、効かないCSSに関しては「!important」を付けることで解決する場合もありますが

CSSの当て方の優先順位を守りながら、どうしても効かないCSSがある場合にのみ使用する点に注意しましょう！

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

応援メッセージ・投げ銭を送る！

＼最新情報をチェック／

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

y_programing

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。大手有名企業の提携会社のサイト制作も経験。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。