HTMLにCSSを読み込むには、index.htmlのhead要素内へ、次のlink要素を追加します。
<link rel="stylesheet" href="style.css">ただし、hrefに書くパスがCSSファイルの場所と合っていないと、見た目は変わりません。「コードを書いたのにCSSが反映されない」という場合も、まずファイルの位置とパスを確認することが大切です。
この記事では、HTMLとCSSの2ファイルを作るところから、読み込み後の表示確認、反映されないときの直し方まで初心者向けに解説します。
HTMLにCSSを読み込む基本の書き方
Webページの内容や構造はHTML、色や文字サイズなどの見た目はCSSが担当します。別々に作った2つのファイルをつなぐのが、link要素です。
link要素は終了タグを持たない要素です。CSSを読み込む場合はhead要素内に置きます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS読み込みの練習</title>
</head>rel=”stylesheet”の意味
rel属性は、HTMLファイルと読み込むファイルの関係をブラウザへ伝えます。値をstylesheetにすると、「このファイルをスタイルシートとして使う」という意味になります。
styleSheetやstylesheetsではなく、stylesheetと記述してください。なお、HTML5ではtype="text/css"を付ける必要はありません。
href=”style.css”の意味
href属性には、読み込むCSSファイルの場所を指定します。index.htmlとstyle.cssが同じフォルダーにある場合は、href="style.css"で読み込めます。
./style.cssと書いても同じ意味です。先頭の./は「現在のファイルと同じフォルダーから探す」ことを表します。
HTMLからCSSを読み込む手順
ここからは、実際にindex.htmlとstyle.cssを作ります。CSSを追加する前後で、ブラウザの表示がどう変わるか確認しましょう。
作業用フォルダーと2つのファイルを作る
最初に作業用フォルダーを1つ作り、その中へ次の2ファイルを保存します。ファイル名の末尾が.htmlと.cssになっていることも確認してください。
index.html：ページの内容を書くファイルstyle.css：色や大きさなどの見た目を書くファイル
HTML・CSS向けのエディタをまだ用意していない方は、次の記事で選び方と基本操作を確認できます。
変更前のHTMLを書く
まず、CSSを読み込んでいない状態のHTMLを書きます。次のコードをindex.htmlへ保存してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS読み込みの練習</title>
</head>
<body>
<main>
<h1>はじめてのWebページ</h1>
<p>HTMLからCSSを読み込んでいます。</p>
<a href="#">詳しく見る</a>
</main>
</body>
</html>この時点ではブラウザの標準スタイルで表示されます。文字は並びますが、背景色やボタン風の装飾はまだ付きません。
link要素をhead内へ追加する
次に、title要素の前へlink要素を追加します。今回の2ファイルは同じフォルダーにあるため、パスはstyle.cssです。
<link rel="stylesheet" href="style.css">CSSを書く
style.cssには、ページ全体の背景、見出し、リンクの見た目を指定します。次のコードを追加して保存してください。
body {
margin: 0;
padding: 40px 20px;
background-color: #f2f6ff;
color: #1f2937;
font-family: sans-serif;
}
main {
max-width: 640px;
margin: 0 auto;
padding: 40px;
background-color: #ffffff;
border-radius: 16px;
}
h1 {
color: #2563eb;
}
a {
display: inline-block;
padding: 12px 20px;
border-radius: 8px;
background-color: #f97316;
color: #ffffff;
text-decoration: none;
}変更後のHTMLを確認する
CSSの読み込みを追加した、完成後のindex.htmlは次の状態です。link要素がhead要素の中にあるか確認しましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS読み込みの練習</title>
</head>
<body>
<main>
<h1>はじめてのWebページ</h1>
<p>HTMLからCSSを読み込んでいます。</p>
<a href="#">詳しく見る</a>
</main>
</body>
</html>ブラウザで表示を確認する
index.htmlとstyle.cssを保存したら、index.htmlをブラウザで開き直します。薄い青の背景、白いカード、青い見出し、オレンジ色のリンクが表示されれば、CSSの読み込みは成功です。
HTMLファイルをブラウザで開く操作が分からない場合は、次の記事でダブルクリックとドラッグ＆ドロップの2通りを画像付きで解説しています。
CSSファイルの場所に合わせてパスを指定する
hrefの値は、index.htmlから見たCSSファイルの場所です。この場所を文字で表したものを「パス」と呼びます。
| CSSファイルの場所 | hrefの書き方 |
|---|---|
| HTMLと同じフォルダー | href="style.css" |
| 同じ場所にあるcssフォルダー内 | href="css/style.css" |
| 1つ上のフォルダー | href="../style.css" |
| サイトのルートにあるcssフォルダー内 | href="/css/style.css" |
| 外部サイトで公開されているCSS | href="https://example.com/style.css" |
同じフォルダーにCSSがある場合
index.htmlとstyle.cssが横に並んでいる場合は、ファイル名だけを指定します。
sample-site/
├── index.html
└── style.css<link rel="stylesheet" href="style.css">cssフォルダーにCSSがある場合
CSSファイルをcssフォルダーにまとめた場合は、フォルダー名とファイル名を/でつなぎます。
sample-site/
├── index.html
└── css/
└── style.css<link rel="stylesheet" href="css/style.css">1つ上のフォルダーにCSSがある場合
index.htmlから1つ上のフォルダーへ移動するときは、../を使います。階層を2つ上がる場合は../../です。
sample-site/
├── style.css
└── pages/
└── index.html<link rel="stylesheet" href="../style.css">CSSが読み込まれないときの確認ポイント
CSSが反映されないときは、複雑な設定を変える前に次の項目を上から確認します。初心者がつまずきやすい原因の多くは、パス、ファイル名、保存忘れです。
hrefのパスとファイル名を確認する
実際のフォルダー構成とhrefを見比べてください。style.cssとstyles.css、cssとCSSのような違いも別の名前として扱われる環境があります。
- 拡張子が
.cssになっているか - フォルダー名とファイル名の大文字・小文字が合っているか
css/style.cssの区切りが半角の/になっているか- 全角の引用符や空白が混ざっていないか
link要素の場所と属性を確認する
link要素はhead要素内へ置き、rel="stylesheet"とhref="..."を指定します。src属性ではCSSファイルを指定できません。
<!-- 正しい書き方 -->
<link rel="stylesheet" href="style.css">
<!-- hrefではなくsrcを使っているため読み込めない -->
<link rel="stylesheet" src="style.css">HTMLとCSSを保存して再読み込みする
エディタでコードを変更しただけでは、ファイルの内容が更新されていないことがあります。HTMLとCSSの両方を保存してから、ブラウザの再読み込みボタンを押してください。
古いCSSが残っているように見える場合は、WindowsではCtrl + F5、MacではCommand + Shift + Rで強制再読み込みを試します。
CSSのセレクターと文法を確認する
CSSファイル自体は読み込めていても、セレクターがHTMLと一致していないと目的の要素には反映されません。HTMLがclass="title"なら、CSSは先頭にピリオドを付けて.titleと書きます。
<h1 class="title">はじめてのWebページ</h1>.title {
color: #2563eb;
}波括弧{ }やセミコロン;の不足も確認しましょう。ブラウザの開発者ツールを使うと、適用されているCSSや読み込みエラーを詳しく調べられます。
複数のCSSファイルを読み込む方法
CSSファイルを役割ごとに分けたい場合は、link要素を複数記述できます。たとえば、全体の基本設定とページ固有のデザインを分ける書き方は次のとおりです。
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">同じ要素へ同じ強さの指定が重なった場合は、基本的に後から読み込んだCSSが優先されます。そのため、共通スタイルを先、ページ固有のスタイルを後に置くと管理しやすくなります。
HTMLへCSSを適用する3つの方法
HTMLへCSSを適用する方法は、外部CSSファイルの読み込みだけではありません。style要素やstyle属性を使う方法もあります。
| 方法 | 書く場所 | 向いている用途 |
|---|---|---|
| 外部CSS | 別のCSSファイル | 通常のWebサイト制作 |
| style要素 | HTMLのhead内 | 1ページだけの小さな確認 |
| style属性 | HTML要素の開始タグ内 | 一部分だけの一時的な指定 |
外部CSSファイルをlink要素で読み込む方法
HTMLとCSSを分けて管理でき、複数ページから同じCSSを使えます。修正箇所を探しやすいため、Webサイト制作ではこの方法を基本にしてください。
<link rel="stylesheet" href="style.css">style要素へCSSを書く方法
style要素はhead要素内に置き、そのHTMLページだけで使うCSSを書きます。動作確認には便利ですが、ページが増えると同じCSSを繰り返し書くことになります。
<style>
h1 {
color: #2563eb;
}
</style>style属性で直接指定する方法
style属性を使うと、特定のHTML要素へ直接CSSを指定できます。ただし、HTMLの内容と見た目が混ざり、後からまとめて変更しにくくなるため、多用は避けましょう。
<h1 style="color: #2563eb;">はじめてのWebページ</h1>HTMLとCSSの読み込みでよくある疑問
link要素はbody内に書いてもよいですか？
スタイルシートを読み込むlink要素は、基本的にhead要素内へ書きます。ブラウザが本文を表示する前にCSSを見つけやすく、コードの役割も分かりやすくなるためです。
CSSの@importでも読み込めますか？
CSS内で@import url("other.css");と書く方法もあります。ただし、読み込みの流れが増えて表示が遅くなる場合があるため、通常はHTMLのlink要素で読み込む方法が分かりやすくおすすめです。
CSSファイル名はstyle.cssでないといけませんか？
ファイル名は自由に決められます。main.cssやcommon.cssでも問題ありませんが、実際のファイル名とhrefの値を必ず一致させてください。
まとめ
HTMLにCSSを読み込む基本は、head要素内へ<link rel="stylesheet" href="style.css">を追加する方法です。通常のWebサイト制作では、HTMLとCSSを分ける外部CSSを使うと管理しやすくなります。
CSSが反映されない場合は、hrefのパス、ファイル名、link要素の属性、保存と再読み込みを順番に確認してください。まずは同じフォルダーにindex.htmlとstyle.cssを置く、もっとも簡単な構成から試してみましょう。