Programming

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

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

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

 

本記事の内容

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

おにちゃん塾では、相対パス:linkを使ったファイルの読み込みをおすすめしています。

<link rel="stylesheet" href="">

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

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

おにちゃん
おにちゃん

実際に、案件をこなす僕が言うのだから間違いないです。

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

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

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

なぜHTML内にCSSファイルの読み込みができないのか

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

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

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

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

おにちゃん
おにちゃん

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

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

 

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

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

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

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

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

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

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

 

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

フォルダ構成

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

おにちゃん
おにちゃん

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

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

 

CSSファイルとlinkさせる方法

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

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

 

相対パス

フォルダ名/CSSファイル名

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

<link rel="stylesheet" href="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>

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

CSSをstyleタグを使って読み込ませる

また、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が読み込まれる優先順序

CSSが読み込まれる優先順序

CSSが読み込まれる優先順序

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

読み込まれる優先順序

  1. インライン
  2. styleタグ
  3. 相対パス(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>
CSSファイルをインラインで読み込み方

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

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

CSSをstyleタグを使って読み込ませる

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

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

  1. インライン
  2. style
  3. 相対パス

 

まとめ:HTML内にCSSを読み込みさせる方法

まとめ:HTML内にCSSを読み込みさせる方法

まとめ:HTML内にCSSを読み込ませる方法

本記事では【超簡単】HTML内にCSSを読み込みさせる方法【できない方向け】について詳しく解説してきました。

おにちゃん
おにちゃん

HTMLやCSSを始めたばかりの頃は分からないことだらけで大変だと思いますが、めげずに頑張ってみてください。

 

おにちゃん塾でおすすめしている記事は下記の通りです

HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】
HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】HTMLやCSSを独学で学ぶ方法を詳しく解説。おすすめの本、おすすめのサイトなども解説済み ...
ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事