Skip to content

29. link（CSS読み込みとパス）

<link rel="stylesheet" href="...">でCSSを読み込む。headに置く／詰まりやすいのはhrefのパス／404はNetworkで確認。外部CSSでHTMLと見た目を分離して管理する。

•beginnerhtmllinkstylesheetcsspathrelative-pathheaddevtoolsnetworkclass
目次
まず結論
最小の書き方（コピペで動く最小コード）
重要ポイント（ここで迷いがち）
例で理解（よく使うパターン 5つ）
1) 同じフォルダ（最初はこれ）2) cssフォルダに分ける（実務っぽい）3) 下の階層のページから“上のcss”を読む4) 複数CSSを読み込む（順番に注意）5) 最小の“リセットっぽい”ベースを自分で置く
使い分け（styleタグ/インラインとの違い）
実務のコツ（SEO/安全/アクセシビリティ）
NG・禁止例（事故る書き方）
NG1）headじゃなくbodyの最後にlink（チラつきやすい）NG2）relを書き忘れるNG3）パスが間違って404（読み込めてないのに気づかない）NG4）インラインstyleだらけで管理不能
見た目を整える（HTML+CSSセット：4例）
例1）見出しと本文の基本例2）カード（外部CSSで再利用）例3）ナビ（複数ページで使い回す）例4）パス確認用：読み込めたら“線が出る”
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題 2つ）

29. link（CSS読み込みとパス）

まず結論

<link rel="stylesheet" href="..."> でCSSを読み込めば、HTMLと見た目を分離して管理できるようになります。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Link CSS</title>

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1 class="title">こんにちは</h1>
</body>
</html>
Preview を表示

style.css（同じフォルダに作る）

CSSCode
.title{
  border-bottom: 2px solid currentColor;
  display: inline-block;
  padding-bottom: .2rem;
}

重要ポイント（ここで迷いがち）

  • CSS読み込みは <head> に書くのが基本
    ページ表示の最初からスタイルが当たって、チラつきが減ります。
  • 属性はこれだけ覚えればOK
    • rel="stylesheet"：これはCSSですよ
    • href="style.css"：CSSファイルの場所（パス）
  • 詰まりNo.1はパス（ファイルの場所）
    • href="style.css"：HTMLと同じ場所
    • href="css/style.css"：HTMLの下に css/ フォルダ
    • href="../style.css"：1つ上の階層
  • 読み込めてない時の確認
    DevTools → Networkで style.css が404になってないか
    ファイル名のスペル、拡張子、配置場所もチェック。

例で理解（よく使うパターン 5つ）

1) 同じフォルダ（最初はこれ）

TEXTCode
/project
  index.html
  style.css
HTMLCode
<link rel="stylesheet" href="style.css" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

2) cssフォルダに分ける（実務っぽい）

TEXTCode
/project
  index.html
  css/
    style.css
HTMLCode
<link rel="stylesheet" href="css/style.css" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

3) 下の階層のページから“上のcss”を読む

TEXTCode
/project
  css/style.css
  pages/about.html

pages/about.html から読む場合：

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

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

4) 複数CSSを読み込む（順番に注意）

HTMLCode
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="components.css" />
<link rel="stylesheet" href="page.css" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

後に書いた方が上書きされやすいので、意図的に順番を設計します。

5) 最小の“リセットっぽい”ベースを自分で置く

CSSCode
*{ box-sizing: border-box; }
body{ margin: 0; line-height: 1.6; }
img{ max-width: 100%; height: auto; display: block; }

外部リセットに頼らず、まずは自前の最小セットでOK。

使い分け（styleタグ/インラインとの違い）

  • <link>（外部CSS）：基本これ。再利用・管理がラク
  • <style>（head内）：小さな検証や1ページ完結用
  • style=""（インライン）：一時的・例外。増えると地獄

実務のコツ（SEO/安全/アクセシビリティ）

  • class名はHTMLの役割で、見た目はCSSへ（#14と相性良い）
  • **パスは“今いるHTMLから見た相対位置”**で考える
    「CSSはどこ？今のHTMLはどこ？」を図にすると一発。
  • キャッシュで変更が反映されない時がある
    まずはハードリロード（開発中あるある）。それでもダメならパスミス疑い。
  • 印刷用CSSなど、用途別に分けることもできる
    （慣れてからでOK。まずは1枚で十分。）

NG・禁止例（事故る書き方）

NG1）headじゃなくbodyの最後にlink（チラつきやすい）

HTMLCode
<body>
  ...
  <link rel="stylesheet" href="style.css" />
</body>
Preview を表示

✅ 正：headへ

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

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

NG2）relを書き忘れる

HTMLCode
<link href="style.css" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

✅ 正

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

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

NG3）パスが間違って404（読み込めてないのに気づかない）

HTMLCode
<link rel="stylesheet" href="styles.css" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

✅ 正：ファイル名と場所を合わせる（Networkで確認）

NG4）インラインstyleだらけで管理不能

HTMLCode
<h1 style="...">...</h1>
<p style="...">...</p>
Preview を表示

✅ 正：classへ寄せる

HTMLCode
<h1 class="title">...</h1>
Preview を表示

見た目を整える（HTML+CSSセット：4例）

外部CSS前提で「コピペでそれっぽく」なるセットです。

例1）見出しと本文の基本

例1）見出しと本文の基本

HTMLCode
<!-- index.html（外部CSS前提） -->
<main class="wrap">
<h1 class="title">ページタイトル</h1>
<p class="lead">ここに導入文が入ります。</p>
</main>
CSSCode
/* style.css */
*{ box-sizing: border-box; }
body{ margin: 0; line-height: 1.8; }
.wrap{ max-width: 920px; margin: 0 auto; padding: 24px 16px; }
.title{
margin: 0 0 .6rem;
display: inline-block;
padding-bottom: .2rem;
border-bottom: 2px solid currentColor;
}
.lead{ margin: 0; opacity: .9; }
Preview を表示

例2）カード（外部CSSで再利用）

例2）カード（外部CSSで再利用）

HTMLCode
<div class="wrap grid">
<article class="card">
  <h2 class="card__title">カード1</h2>
  <p class="card__text">本文…</p>
</article>

<article class="card">
  <h2 class="card__title">カード2</h2>
  <p class="card__text">本文…</p>
</article>
</div>
CSSCode
*{ box-sizing: border-box; }
body{ margin: 0; line-height: 1.8; }
.wrap{ max-width: 920px; margin: 0 auto; padding: 24px 16px; }

.grid{ display: grid; gap: 1rem; }
@media (min-width: 760px){ .grid{ grid-template-columns: 1fr 1fr; } }

.card{
border: 1px solid rgba(0,0,0,.18);
border-radius: 18px;
padding: 1rem 1.1rem;
box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.card__title{ margin: 0 0 .4rem; font-size: 1.1rem; }
.card__text{ margin: 0; line-height: 1.85; }
Preview を表示

例3）ナビ（複数ページで使い回す）

例3）ナビ（複数ページで使い回す）

HTMLCode
<nav class="nav" aria-label="主要メニュー">
<a class="nav__link" href="/">ホーム</a>
<a class="nav__link" href="/about.html">会社情報</a>
</nav>
CSSCode
.nav{ display: flex; gap: .6rem; flex-wrap: wrap; padding: 16px; }
.nav__link{
display: inline-block;
padding: .55rem .85rem;
border: 1px solid rgba(0,0,0,.2);
border-radius: 999px;
text-decoration: none;
}
.nav__link:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.10); }
Preview を表示

例4）パス確認用：読み込めたら“線が出る”

例4）パス確認用：読み込めたら“線が出る”

HTMLCode
<h1 class="test">CSS読めてる？</h1>
CSSCode
.test{
border: 3px dashed currentColor;
display: inline-block;
padding: .4rem .6rem;
}
Preview を表示

線が出れば読み込みOK。出なければパスかlinkを書き間違いです。

理解チェック（3問・答え付き）

Q. CSS読み込みの基本タグは？

A. <link rel="stylesheet" href="...">。

Q. href="css/style.css" はどんな配置を想定？

A. HTMLの下に css/ フォルダがあり、その中に style.css がある。

Q. CSSが当たらないときの最優先チェックは？

A. パス（配置）と404（Networkで確認）。

ミニ演習（すぐ試せる小課題 2つ）

  1. index.html と style.css を同じフォルダに置き、例4の“線が出るテスト”で読み込み確認をしてください。

  2. css/ フォルダを作って style.css を移動し、href を css/style.css に直して、まだ当たるか確認してください。