CSS 導入方法

JPKODA 編集部 May 6, 2026

HTMLドキュメントにCSSスタイルを適用するためのさまざまな手法について、深く掘り下げていきましょう。それぞれの手法にはメリットとデメリットがあり、状況に応じて使い分ける必要があります。

本章では、プロジェクトに最適な方法を選択し、プロジェクトの規模が大きくなっても効率的にCSSコードを管理するための不可欠な知識を提供します。

1. HTMLにCSSを適用する3つの方法

HTMLにCSSをリンクさせる方法は、主に以下の3つがあります。

インラインスタイル (Inline Styles): style 属性を使用して、HTML要素内に直接スタイルを記述します。
内部スタイルシート (Internal Stylesheets): HTMLドキュメントの <head> セクションにある <style> タグ内にCSSコードを記述します。
外部スタイルシート (External Stylesheets): 独立した .css ファイルを作成し、<link> タグを使用してHTMLドキュメントに読み込みます。

それでは、それぞれの手法を詳しく見ていきましょう。

2. インラインスタイル (Inline Styles)

インラインスタイルは、style 属性を用いて、特定のHTML要素に対して直接CSSルールを適用する方法です。

例:

<p style="color: blue; font-size: 16px;">これはインラインスタイルが適用された段落です。</p>

この例では、段落のテキストが青色になり、フォントサイズは 16px に設定されます。

2.1 インラインスタイルのメリット

優先順位（詳細度/Specificity）が最も高い: インラインスタイルは非常に高い詳細度を持ちます。つまり、内部または外部スタイルシートで定義されたスタイルを常に上書きします。（詳細は後のモジュールで解説します）。
素早い適用: 単一の要素に素早くスタイルを適用したい場合、特にテストや微調整の際には非常に便利です。

2.2 インラインスタイルのデメリット

再利用性の欠如: スタイルが各要素に個別に適用されるため、コードの重複が発生し、サイト全体の一貫性を保つのが難しくなります。
メンテナンスの困難さ: サイトの規模が大きくなるにつれ、インラインスタイルの管理は煩雑になり、ミスが発生しやすくなります。
関心の分離（Separation of Concerns）に反する: コンテンツ（HTML）と表現（CSS）が混ざることは設計原則に反しており、コードの可読性と保守性を低下させます。

2.3 インラインスタイルをいつ使うべきか

インラインスタイルは慎重に使用すべきであり、主に以下のようなケースに限定されます。

テスト目的: 特定の要素でスタイルを素早く試したい場合。
動的に生成されるコンテンツ: サーバサイドのロジックに基づいて動的にスタイルを適用する必要がある場合。
スタイルの強制的な上書き: 特定の要素に対して、外部・内部スタイルシートの指定をどうしても上書きしたい場合。

3. 内部スタイルシート

内部スタイルシートは、HTMLドキュメントの <head> セクション内にある <style> タグにCSSコードを埋め込む方法です。

例:

<!DOCTYPE html>
<html>
<head>
  <title>内部スタイルシートの例</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>これは内部スタイルシートでスタイルを設定した段落です。</p>
  <p>同じ内部スタイルシートが適用された別の段落です。</p>
</body>
</html>

この例では、このHTMLドキュメント内のすべての <p> 要素が緑色になり、フォントサイズは 18px になります。

3.1 内部スタイルシートのメリット

集中管理: スタイルが一箇所に定義されているため、単一ページのスタイル管理が容易になります。
再利用性の向上: 同じページ内の複数の要素に対してスタイルを適用できます。
追加のHTTPリクエストが不要: CSSがHTMLに埋め込まれているため、外部ファイルを読み込むための追加リクエストが発生せず、わずかにページロードが速くなる場合があります。

3.2 内部スタイルシートのデメリット

再利用性が限定的: スタイルは、そのスタイルが定義されている特定のHTMLドキュメント内でのみ有効です。
関心の分離が不完全: HTMLとCSSが混在しているため、長期的にはコードのメンテナンスが難しくなります。
大規模サイトには不向き: サイトのページ数が増えるにつれ、ページごとに内部スタイルシートを作成するのは非効率的です。

3.3 内部スタイルシートをいつ使うべきか

内部スタイルシートは以下の場合に適しています。

小規模なウェブサイト: 数ページしかなく、すべてを自己完結させたい場合。
シングルページアプリケーション (SPA): すべてのコンテンツが単一のページにロードされるアプリケーション。
クイックプロトタイピング: 外部ファイルを作成せずに、素早くページのスタイルを構築したい場合。

4. 外部スタイルシート

外部スタイルシートは、CSSルールを記述した独立した .css ファイルを作成し、HTMLドキュメントから <link> タグで接続する方法です。現代のWeb開発において最も推奨される手法です。

例:
まず、CSSファイル（例: styles.css）を作成します。

/* styles.css */
body {
  background-color: lightblue;
}
h1 {
  color: navy;
}

次に、このCSSファイルをHTMLドキュメントにリンクさせます。

<!DOCTYPE html>
<html>
<head>
  <title>外部スタイルシートの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>これは見出しです。</h1>
  <p>これは段落です。背景はライトブルーになります。</p>
</body>
</html>

4.1 `<link>` タグの属性

rel="stylesheet": リンク先のドキュメントと現在のドキュメントの関係を指定します。ここでは、リンク先が「スタイルシート」であることを示します。
href="styles.css": CSSファイルのURLを指定します。パスは相対パス（例のように）または絶対パスが使用可能です。
type="text/css": モダンブラウザでは省略可能ですが、古いブラウザとの互換性のために記述されることがあります。
media="screen": スタイルシートが最適化されているメディアタイプを指定します。代表的な値には screen（PC画面用）、print（印刷用）、all（すべてのデバイス）などがあります。

4.2 外部スタイルシートのメリット

高い再利用性: 一つのCSSファイルを複数のHTMLドキュメントに適用できるため、サイト全体の一貫性を容易に保てます。
優れた保守性: CSSコードがHTMLから分離されているため、管理や更新が非常にスムーズです。
組織化: CSSを独立したファイルに分けることで、プロジェクト全体の構造が整理されます。
キャッシュ (Caching): ブラウザは外部CSSファイルをキャッシュ（一時保存）するため、2回目以降のアクセス時にロード時間を短縮できます。
明確な関心の分離: コンテンツと表現を完全に分けることで、クリーンでメンテナンスしやすいコードになります。

4.3 外部スタイルシートのデメリット

追加のHTTPリクエスト: 各外部ファイルごとにHTTPリクエストが発生し、初回ロード時間にわずかな影響を与える可能性があります（ただし、多くの場合キャッシュのメリットがこれを上回ります）。
ファイルパスへの依存: パスの記述が間違っていると、スタイルが読み込まれません。

4.4 外部スタイルシートをいつ使うべきか

外部スタイルシートは、ほとんどのWebサイトで推奨される方法です。

大規模なウェブサイト: 複数ページで一貫性と保守性が不可欠な場合。
複雑なプロジェクト: 大量のCSSコードを含むプロジェクト。
チーム開発: 複数の開発者が同じコードベースで作業する場合。

5. 実践的な例とデモ

実際のシナリオでこれらの手法がどう使い分けられるか見てみましょう。シンプルなブログを構築すると仮定します。

5.1 インラインスタイル (非推奨)

<h1><span style="color: #333; font-family: Arial;">ブログのタイトル</span></h1>
<p style="font-size: 14px; line-height: 1.6;">これはブログ記事の最初の段落です。</p>
<a href="#" style="color: blue; text-decoration: none;">続きを読む</a>

問題点: 複数の記事がある場合、各ページで同じスタイルを繰り返す必要があり、後でデザインを変更したくなった時に膨大な手間がかかります。

5.2 内部スタイルシート (小規模ブログ向け)

<!DOCTYPE html>
<html>
<head>
  <title>マイブログ</title>
  <style>
    body { font-family: sans-serif; }
    h1 { color: #333; font-family: Arial; }
    p { font-size: 14px; line-height: 1.6; }
    a { color: blue; text-decoration: none; }
  </style>
</head>
<body>
  <h1>ブログのタイトル</h1>
  <p>これはブログ記事の最初の段落です。</p>
  <a href="#">続きを読む</a>
</body>
</html>

改善点: インラインよりは良いですが、新しい記事ページを作るたびにこのコードをコピー＆ペーストしなければなりません。

5.3 外部スタイルシート (推奨)

まず、style.css というファイルを作成します。

/* style.css */
body { font-family: sans-serif; }
h1 { color: #333; font-family: Arial; }
p { font-size: 14px; line-height: 1.6; }
a { color: blue; text-decoration: none; }

次に、HTMLでリンクします。

<!DOCTYPE html>
<html>
<head>
  <title>マイブログ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ブログのタイトル</h1>
  <p>これはブログ記事の最初の段落です。</p>
  <a href="#">続きを読む</a>
</body>
</html>

ベストプラクティス: これで、すべてのブログページで style.css を再利用できます。デザインを変更したい時は、style.css を1回修正するだけで全ページに反映されます。