CSSファイルの読み込み方

今回は別ファイルのCSSを読み込む方法を紹介いたします。どのようにして HTMLファイルからCSSを読み込むのか確認していきましょう。

HEAD内に読み込みコードを記載

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

CSSファイルの基本的な読み込み方は<head>タグ内で<link>タグを用いて読み込む方法です。rel属性には”stylesheet”を記載し、href属性には読み込みたいcssのパスを記載します。

サンプル

HTML

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

<h1>タイトル</h1>
<div>
  <p class="content">本文</p>
  <p>まとめ</p>
</div>

CSS

h1 {
  color:blue;
}

.content {
  width:50%;
  background-color:red;
}

ブラウザ表示

タイトル

本文

まとめ

上記はHTMLファイルと同じフォルダ内(同じ階層)に “style.css” というCSSファイルを作成した場合のパスになります。

※CSSの適応がされない場合はCSSファイルのパスやファイル名が間違っている可能性が高いです。

実際の開発現場では多くのCSSファイルがあり、必要に応じて複数個のCSSファイルを読み込むケースが多々あります。上からファイルが読み込まれるので（厳密には並列的）、下記の場合はmain.cssが先に読み込まれ、次にstyle.cssが読み込まれます。

HTML

<head>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="style.css">
</head>