【超簡単】HTML内にCSSを読み込みさせる方法【できない方向け】

2022 8/24

2022年8月24日

HTML内にCSSを適切に読み込みさせる方法を知りたい
HTML内のどこの位置・場所にCSSを記述すればいいのか
相対パスがよく分からない

本記事では『HTML内でCSSファイルを読み込みさせる方法』について詳しく解説していきます。

本記事の内容

読み込みができない理由
HTMLとCSSの読み込み方
相対パスでの読み込み方
CSSが優先される順序

当サイトでは、相対パス:linkを使ったファイルの読み込みをおすすめしています。

最初のうちはlinkを使ったファイルの読み込み方を採用するべきだと思っています。

なぜなら、linkを使った案件が多いからです。

ですので、収入を増やしたいのであれば、オーソドックスな方法を採用しましょう。

記事の内容

なぜHTML内にCSSを読み込みさせることができないのか

なぜHTML内にCSSを読み込むことができないのか — なぜHTML内にCSSを読み込みさせることができないのか

HTML内にCSSファイルの読み込みができない理由は下記の通りです。

そもそも読み込み方が全然分からない
相対パスでの読み込み方が分からない
コードが少しでも間違えている

全然分からない方は、本記事を全体的に学んでみてください。

相対パスの方法で悩んでいる方は初心者向けの情報はスキップしてください。

コードが少しでも間違えている＝ほとんどの方がこの理由でファイルを読み込めていないのが現実です。

もう一度、コードを見直してみてください。

【初心者向け】HTMLとCSSの読み込み方

最初のうちに学んでおくべきファイルの読み込み方は下記の通りです。

前提：HTML・CSSファイルを準備する

CSSファイルとlinkさせる
styleタグで読み込み
インラインで読み込み

どれも役立つ知識ですので、実際に手を動かして学んでみてください。

読み込み前提：HTML・CSSファイルを準備する

今回のフォルダ構成は上記の通りです。

実際の案件ではcssフォルダの中にstyle.cssファイルが入っているのが多いです。

ですので、本記事でもこの構成を採用しています。

CSSファイルを読み込みさせる方法

今回のフォルダ構成の場合は、下記のようにlinkを記述しましょう。

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

相対パス：フォルダ名/CSSファイル名

次に案件で多いのはassetsフォルダの中にCSSフォルダがあり、その中にstyle.cssファイルがあるケースです。

このように書けば、CSSファイルの読み込む方は問題ありません。

styleタグでの読み込み方

styleタグを使って読み込みをさせることができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>当サイト</h1>
</body>
</html>

結果はこのようになります。

また、styleタグはhead内でなくても記述が可能です。

ただ、styleタグを使う場合は、内容を把握しやすくするためにもhead内に記述することをおすすめします。

インラインで読み込みさせる方法

この方法もあまり案件で見ない方法ですが、一応学習しておきましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1 style="color: blue">当サイト</h1>
</body>
</html>

結果はこのようになります。

個人的にはあまりこの読み込み方はおすすめしていません。

CSSが読み込みされる際の優先順序

CSSを複数読み込む方はこの点に注意しましょう。

読み込みされる優先順序

インライン
styleタグ
相対パス(link)

例えば、下記のような記述を見ていきましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <!--style.cssではカラーを黄色にしています。-->
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1 style="color: blue">当サイト</h1>
</body>
</html>

このような結果から、インラインでの記述が優先されることがわかりました。

次はインラインを削除した場合を見ていきましょう。

この場合は、styleタグが優先されます。

ここまでの優先順序をもう一度まとめておきます。