【CSS】レッスン2-02:HTML文書にCSSを読み込む方法

一つ前の章では文字に色を付ける方法について学習しました。

今回はHTML文書にCSSを読み込む3つの方法について見ていきましょう。

Lesson2-1:CSS学習の入り口|文字に色を付けよう
Lesson2-2:CSSを読み込む3つの方法 ◁今回はココ
Lesson2-3:テキストスタイルを変更しよう
Lesson2-4:4種類のセレクタを使いこなそう
Lesson2-5:ボックスモデルを理解しよう
Lesson2-6:ボックススタイルを変更しよう
Lesson2-7:継承とカスケードを理解しよう

Webページの見た目を整えるためにはHTMLにスタイルを適用するCSS(Cascading Style Sheets)が必要です。CSSを適用することで、文字の色やサイズ、レイアウトの調整などを簡単に行うことができます。

しかしCSSをHTMLに適用する方法は1つではなく、大きく分けて内部CSS外部CSSインラインCSSの3種類があります。

どの方法を選ぶかはプロジェクトの規模やメンテナンス性、チーム開発の方針によって異なります。

この記事ではそれぞれの方法の特徴や使い方をわかりやすく解説し、適切な方法を選べるように学んでいきましょう。

<<前のページ HTML/CSSの記事一覧 次のページ>>

内部CSSとは

内部CSSとはHTML文書の<head>タグ内に<style>タグを用いて記述する方法であり、Lesson2-1で紹介した方法です。

この方法を使用すると、特定のHTMLファイル内だけでスタイルを適用することができます。

内部CSSの記述方法

内部CSSを使用するには、以下のように<style>タグの中にスタイルルールを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部CSSの例</title>
    <style>
        /* すべての段落の文字色を青に設定 */
        p {
            color: blue;
            font-size: 16px;
        }

        /* 見出しの背景色を設定 */
        h1 {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <h1>内部CSSのサンプル</h1>
    <p>この段落は内部CSSによって青色に設定されています。</p>
</body>
</html>

内部CSSの利点

内部CSSを使用することで、以下のようなメリットがあります:

  1. すぐにスタイルを適用できる
    CSSファイルを別途作成する必要がないため、手軽にスタイリングできる。
  2. ページ単位で一貫したデザインが可能
    特定のページにのみ適用したいスタイルを簡単に管理できる。
  3. 外部ファイルの読み込みが不要
    ネットワークの影響を受けずに表示速度を維持できる。

内部CSSの欠点

しかし、内部CSSにはいくつかのデメリットも存在します:

  1. 他のページへの再利用が難しい
    同じデザインを複数ページに適用する場合、各ページにスタイルを記述する必要がある。
  2. HTMLファイルの可読性が低下する
    CSSコードがHTMLファイル内に増えることで、構造が複雑になり管理が難しくなる。
  3. メンテナンスが難しくなる
    大規模なプロジェクトでは、スタイルの変更が煩雑になりやすい。

内部CSSはHTMLファイル内の<style>タグを使って手軽にスタイルを適用できる方法です。

特定のページに対してデザインを一貫させるのに便利ですが、複数ページでの再利用や管理のしやすさに欠けるため、適用範囲が限定されることに注意が必要です。

外部CSSとは

外部CSSとはスタイルをHTMLファイルとは別の.cssファイルに記述し、そのファイルをHTML内で読み込む方法です。

この方法を使用することで、複数のHTMLファイルに同じスタイルを適用し、ウェブサイト全体のデザインを統一することができます。

外部CSSの記述方法

外部CSSを使用するには、以下の手順でスタイルを適用します。

1. CSSファイルの作成

例えばstyles.cssというファイルを作成し、以下のようにスタイルを記述します。

@charset "utf-8";
/* 段落の文字色とフォントサイズを設定 */
p {
    color: green;
    font-size: 18px;
}

/* 見出しのスタイルを指定 */
h1 {
    color: darkblue;
    text-align: center;
}

1行目の「@charset “utf-8”;」はCSSファイルの文字エンコーディング(文字コード)を指定するためのルールです。

外部CSSを使用する際には必ず1行目に記述しましょう。

2. HTMLファイルでCSSを読み込む

作成したCSSファイルをHTMLの<head>タグ内で<link>タグを使って読み込みます。

リンクタグは以下のように書き込みましょう。

『<link rel=”stylesheet” href=”ファイル名.css”>』

「rel=”stylesheet”」の部分でCSSファイルの読み込みを宣言し、「href=”ファイル名.css”」の部分で、実際のリンクを貼ります。

実際の例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部CSSの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>外部CSSのサンプル</h1>
    <p>この段落は外部CSSにより緑色に設定されています。</p>
</body>
</html>

htmlファイルとcssファイルを作成し、外部CSSを読み込んでみましょう。

ふたつのファイルを同じフォルダ内に保存すれば、上記のコードをコピー&ペーストするだけで実施可能です。

保存場所を分ける場合はhtmlコード内の「href=”styles.css”」の部分を相対リンクに変更してください。

外部CSSの利点

外部CSSには以下のメリットがあります:

  1. 再利用性が高い
    一つのCSSファイルを複数のHTMLページで共有できるため、デザインの一貫性を保ちやすい。
  2. HTMLファイルの可読性を向上
    HTMLファイル内にスタイルを記述しないため、コードの見通しが良くなる。
  3. メンテナンスが容易
    スタイルを一元管理できるため、修正が必要な際に1つのCSSファイルを更新するだけで、すべてのページに反映される。

外部CSSの欠点

しかし外部CSSにも以下のデメリットもあります:

  1. 追加のHTTPリクエストが発生する
    CSSファイルを読み込むため、ページの読み込み速度に影響する場合がある。
  2. ネットワークエラーの影響を受ける
    外部ファイルが正しく読み込めないと、ページのデザインが崩れる可能性がある。
  3. 初期セットアップが必要
    CSSファイルの作成とリンク設定が必要なため、初心者には手間に感じることがある。

外部CSSはスタイルを一元管理し、複数ページでの一貫性を保つのに最適な方法です。

メンテナンス性が高く、HTMLの構造をシンプルに保てる反面、読み込み速度やネットワーク依存の問題があるため、適切なキャッシュ管理を考慮する必要があります。

インラインCSSとは

インラインCSSとは、HTMLの各要素に直接スタイルを指定する方法です。

要素のstyle属性を使用し、スタイルルールを記述することで特定の要素のみに個別のスタイルを適用できます。

主に限定的なスタイルの適用や、テスト・デバッグ用途に適しています。

インラインCSSの記述方法

インラインCSSはHTMLタグのstyle属性を使って記述します。

<p>などの段落タグや<h1>や<h2>などの見出しタグの開始タグの中に直接styleを書き込むことで、その要素だけにスタイルを指定することができます。

例えば、次のようなコードを書くことができます。

<!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>
    <h1 style="color: red; text-align: center;">インラインCSSのサンプル</h1>
    <p style="font-size: 18px; color: blue;">この段落はインラインCSSで青色に設定されています。</p>
</body>
</html>

インラインCSSの利点

インラインCSSを使用することで、以下のようなメリットがあります:

  1. 素早く適用できる
    HTMLファイル内の特定の要素に即座にスタイルを適用できるため、修正や試験的な適用が容易。
  2. 外部ファイル不要
    CSSファイルを用意せずに直接スタイルを適用できるため、手軽にデザインを調整可能。
  3. スタイルの優先度が高い
    インラインCSSは、外部CSSや内部CSSよりも優先度が高く、特定の要素に対するスタイルの上書きに便利。

インラインCSSの欠点

一方で、インラインCSSにはいくつかのデメリットもあります:

  1. 再利用性が低い
    各要素ごとにスタイルを記述するため、同じスタイルを適用する際に手間がかかる。
  2. 可読性が低下する
    HTMLコード内にスタイルが混在することで、コードの見通しが悪くなり、管理が煩雑になる。
  3. 保守性が悪い
    ページ全体のデザイン変更時に、一つ一つの要素を修正する必要があり、作業効率が低下する。

インラインCSSは特定の要素に素早くスタイルを適用するのに便利ですが、再利用性や管理のしやすさに欠けるため、広範囲なスタイル適用には適していません。

基本的には一時的なスタイル変更や、動的にスタイルを変更する場合に使用するのが適切です。

使用シーン別の選択ポイント|どの方法を選ぶべきか?

CSSをHTMLに適用する方法には「内部CSS」「外部CSS」「インラインCSS」の3つがありますが、どの方法を選ぶかは用途や目的によって異なります。

それぞれの特徴を理解し、適切な場面で使い分けることが重要です。

内部CSSを選ぶべき場合

内部CSSは以下のような場合に選択しましょう。

  • 1ページだけの簡単なデザイン調整を行うとき
  • 外部ファイルの読み込みを避けて、ページの読み込み速度を重視したいとき
  • 小規模なプロジェクトで、CSS管理が簡単な場合

例:社内向けの報告書や、単発のランディングページなどに適しています。

外部CSSを選ぶべき場合

外部CSSは以下のような場合に選択しましょう。

  • 複数のページに同じスタイルを適用し、一貫したデザインを保ちたいとき
  • 保守性や拡張性を重視し、スタイルの管理を一元化したいとき
  • チーム開発など、複数人で作業を分担する場合

例:企業の公式ウェブサイトや、複数ページ構成のブログなどに適しています。

インラインCSSを選ぶべき場合

インラインCSSは以下のような場合に選択しましょう。

  • 一部の要素にだけ緊急でスタイルを適用したいとき
  • 動的にスタイルを変更するスクリプト(JavaScriptなど)を使用する場合
  • 他の方法で適用されたスタイルを一時的に上書きしたい場合

例:特定のボタンの色を変更したり、特定のメッセージ部分を目立たせるなど、簡単なデザイン調整に適しています。

CSSの優先順位について

同じ要素に対してインラインCSS、内部CSS、外部CSSの3種類の方法が競合した場合、どのスタイルが適用されるかは、CSSの優先順位(カスケードルール)によって決まります。CSSの優先順位は以下のようになっています:

  1. インラインCSS(最優先)
  2. 内部CSS(HTML内の<style>タグ)
  3. 外部CSS(.cssファイルからの読み込み)

つまり、インラインCSS > 内部CSS > 外部CSSの順に適用され、優先度の高いスタイルが適用されます。

各方法の比較表

項目 内部CSS 外部CSS インラインCSS
優先順位 高い 低い 最優先
適用範囲 1ページのみ 複数ページ 個々の要素
再利用性 低い 高い ほぼなし
メンテナンス性 普通 高い 低い
読み込み速度 速い(外部リクエスト不要) やや遅い(ファイルの読み込みが必要) 速い(外部リクエスト不要)
コードの可読性 普通 高い 低い

どの方法を選ぶかは、ウェブページの規模や管理のしやすさチームの運用方針によって決まります。

基本的には小規模なページでは内部CSS、複数ページの統一デザインには外部CSS、一時的な調整にはインラインCSSを使用するのが最適です。

まとめ

CSSをHTMLに適用する方法には、内部CSS、外部CSS、インラインCSSの3つがあります。

それぞれの方法には、特性や適した用途があり、状況に応じて適切に使い分けることが重要です。

  1. 内部CSS
    HTMLファイル内の<style>タグを使用する方法。小規模なページ素早くスタイルを適用したい場合に適していますが、再利用性が低いという欠点があります。
  2. 外部CSS
    別のCSSファイルをHTMLにリンクする方法。複数のページに適用できるため、メンテナンスが容易一貫性のあるデザインを実現できます。ただし外部ファイルの読み込みによるページ表示速度の影響に注意が必要です。
  3. インラインCSS
    HTMLタグに直接スタイルを指定する方法。特定の要素に迅速にスタイルを適用できる一方で、保守性が低く、コードが煩雑になるデメリットがあります。

最適なCSSの活用を目指して

プロジェクトの規模や管理のしやすさを考慮しながら、最も適した方法を選択することで、効率的なスタイル管理が可能になります。

基本的には外部CSSを中心にしつつ、必要に応じて内部CSSやインラインCSSを活用するのが理想的です。

練習問題2-2:CSS適用の優先順位を理解しよう

VSCで「Lesson2-2.html」と「lesson2-2.css」のふたつのファイルを作って保存してください。

そのファイルにコードを書き、ブラウザに以下のように表示させましょう。

初めてのWebサイトを作ろう2-2

このサイトの Lesson1-1(HTML学習の入り口)Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson2-1のまとめノートを作ろう

VSCを使ってlesson2フォルダの中に「MyWebsite2-2.html」というファイルを作り、下記のHTMLコードをコピーして貼り付けて下さい。

まとめノート(Lesson2-2/HTMLコード)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-2</title>
    <link rel="stylesheet" href="style/color.css">
</head>
<body>
    <header>
        <h1>Lesson2-2: CSSを読み込む3つの方法</h1>
        <nav>
            <ul>
                <li>Lesson2-1:<a href="MyWebsite2-1.html">文字に色を付けよう</a></li>
                <li>Lesson2-3:<a href="MyWebSite2-3.html">テキストスタイルを変更しよう</a> </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>1. 内部CSS</h2>
            <p>HTMLの&lt;head&gt;タグ内に&lt;style&gt;タグを記述。</p>
            <code>&lt;style&gt; セレクター { プロパティ: 値; } &lt;/style&gt;</code>
            <p>例: <code>&lt;style&gt; h1 { color: blue; font-size: 20px; } &lt;/style&gt;</code></p>
        </section>
        <section>
            <h2>2. 外部CSS</h2>
            <p>別ファイルにスタイルを記述し、&lt;link&gt;タグで読み込む。</p>
            <code>&lt;link rel="stylesheet" href="style.css"&gt;</code>
            <p>例: <code>h1 { color: green; text-align: center; }</code></p>
        </section>
        <section>
            <h2>3. インラインCSS</h2>
            <p>HTML要素のstyle属性に直接記述。</p>
            <code>&lt;h1 style="color: red;"&gt;見出し&lt;/h1&gt;</code>
        </section>
        <section>
            <h2>4. CSS適用の優先順位(カスケードルール)</h2>
            <ul>
                <li>1. インラインCSS(最優先)</li>
                <li>2. 内部CSS(&lt;style&gt;タグ)</li>
                <li>3. 外部CSS(.cssファイル)</li>
            </ul>
        </section>
    </main>
    <aside>
        <p><a href="../MyWebsite.html">ページトップへ戻る</a></p>
    </aside>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite2-2.htmlに張り付けてください。

続いてLesson2フォルダの中にあるstyleフォルダの中に「color.css」というファイルを作り、以下のカラーを任意に指定してコードを書きましょう。

・ヘッダー、ボデー、メインタグ内、フッター、コードの背景色
・h1、h2、段落、フッターの段落、ナビゲーションリンクの文字色

ご自身で考えて書くことを推奨しますが、模範解答も用意しましたので必要な方は以下のコードを活用して下さい。

模範解答(CSSコード)
@charset "utf-8";
    header{
        background-color: #1565C0
    }
    header h1{
        color: #FFFFFF;
    }
    body{
        background-color: #E3F2FD;
    }
    main{
        background-color: #FFFFFF;
    }
    h2{
        color: #0D47A1;
    }
    p{
        color: #212121;
    }
    code {
        background-color: #BBDEFB;
        color: #212121;
    }
    footer{
        background-color: #64B5F6;
    }
    footer p{
        color: #0D47A1;
    }
    nav li{
        color: #ADD8E6;
    }
    nav a{
        color:#ADD8E6;
    }

このコードをコピーしてcolor.cssに張り付けてください。

まとめ

お疲れさまでした!

今回の学習を通して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る