おにちゃん塾の商品一覧

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

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

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

おにちゃん

執筆者:WEB制作でフリーランスをしている大学生エンジニアの僕が詳しく解説します

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

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

<link rel=”stylesheet” href=””>

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

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

おにちゃん

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

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

目次

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

なぜHTML内にCSSを読み込むことができないのか
なぜ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ファイルがあるケースです。

<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を読み込みさせる方法【できない方向け】

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる