【実例付】HTMLでCSSを読み込む方法をタイプ別に紹介

※本サイトにはプロモーション・広告が含まれています。

（最終更新日：2023年6月）

✔当記事は次のような疑問を持つ方々に向けた記事です

「HTMLでCSSをどう読み込むのか？」
「HTMLでCSSを読み込む方法を具体的に知りたい」
「HTMLでCSSを読み込む具体的な例を見てみたい」

✔当記事で提供する内容

  • HTMLでCSSを読み込む基本的な方法
  • CSSの読み込み方とその応用について
  • HTMLでCSSを読み込む実際の例

この記事では、HTMLでCSSを読み込む基本的な手法から、さまざまなオプションを活用した読み込み方法まで、具体的な事例を交えて詳しく解説します。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/05/06 14:23:00時点 Amazon調べ-詳細)

CSSをHTMLに読み込む：基本的なコンセプト

こちらでは、Cascading Style Sheets（CSS）をHTMLに読み込む基本的なコンセプトについて解説します。

HTMLと組み合わせて使用することで、ウェブページを美しく、使いやすくします。

  • HTMLとは？
  • CSSとは？
  • 元となるHTMLソースコード解説

HTMLとは？

HTMLとはHyperText Markup Languageの略で、ウェブページを作るための言語です。

HTMLはウェブページの構造を作り、テキストや画像などのメディアコンテンツを配置する役割を持っています。

HTMLにはさまざまなバージョンがあり、最新のバージョンはHTML5です。

HTML5では、マルチメディアコンテンツをより良く扱うための新しい要素（例えば、<video>や<audio>など）が追加されました。

CSSとは？

CSS（Cascading Style Sheets）はウェブページのデザインやレイアウトを制御するためのスタイルシート言語です。

HTMLがウェブページの構造を定義するのに対して、CSSはその見た目と表示方法を定義します。

CSSを使用することで、ウェブページの様々なスタイル要素を制御できます。

  • テキストの色やフォント
  • レイアウトのスペーシングや配置
  • 画像のサイズや位置
  • アニメーションやトランジション

元となるHTMLソースコード解説

以下のHTMLコードは、CSSを適用する前の基本的な構造を示しています。

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to My Webpage!</h1>
  <p>This is a sample paragraph text.</p>
</body>
</html>

“My First Webpage”というタイトルのウェブページを作成しました。

h1タグでの見出しとpタグでの段落が含まれています。

このページにCSSを適用していきましょう。

CSSのHTMLへの読み込み方法：3つの基本手法

CSSをHTMLに適用する方法は3つあります。

それぞれの方法には特徴と利点があり、適切に使い分けることでウェブページの見た目とパフォーマンスを最適化できます。

  • 方法1：外部CSSファイルの読み込み
  • 方法2：styleタグを用いたCSSの組み込み
  • 方法3：インラインCSSの使用

方法1：外部CSSファイルの読み込み

外部CSSファイルの読み込みは、CSSをHTMLとは別ファイルに記述して、そのファイルをHTMLから読み込む方法です。

別ファイルで分けることで、複数のHTMLファイルから参照できます。

具体例をご覧ください。

  • HTMLとCSSコード解析
  • 外部CSS読み込みの利点

HTMLとCSSコード解析

以下にHTMLとCSSのサンプルコードを示します。

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Webpage!</h1>
  <p>This is a sample paragraph text.</p>
</body>
</html>

以下のCSSは、上記のHTMLファイル（”styles.css”という名前で保存）で使用するスタイルを定義します。

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  font-size: 20px;
}

このCSSは、背景色、h1タグの色と配置、そしてpタグのフォントサイズをそれぞれ定義しています。

外部CSS読み込みの利点

外部CSSファイルの利用には以下のような利点があります。

  • 再利用性: 同一のスタイルシートを複数のHTMLファイルで共有することが可能。
  • メンテナンス性: CSSを1つの場所で管理することで、変更や更新が容易。
  • パフォーマンス: ブラウザは外部CSSファイルを一度ダウンロードし、キャッシュすることでページの読み込み時間を短縮する。

方法2：styleタグを用いたCSSの組み込み

styleタグを用いてCSSをHTMLに直接組み込む方法について解説します。

styleタグはHTMLのhead要素内に配置され、その中にCSSスタイルが記述されます。

  • styleタグを使ったCSSの記述方法
  • styleタグ組み込みの利点

styleタグを使ったCSSの記述方法

以下にstyleタグを用いた基本的なHTMLとCSSの記述例を示します。

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: navy;
      text-align: center;
    }

    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Webpage!</h1>
  <p>This is a sample paragraph text.</p>
</body>
</html>

この例では、HTML文書内のstyleタグ内にCSSが記述されています。

styleタグ組み込みの利点

styleタグを使ってCSSをHTMLに直接組み込む利点は以下の通りです。

  • 集中管理: HTMLファイル内にCSSを統一して記述できるため、デザインの見直しや修正が容易です。
  • 外部ファイル不要: 外部CSSファイルを作成・参照する必要がないため、短いスタイルルールやテスト時に便利です。

方法3：インラインCSSの使用

ここでは、HTML要素に直接スタイルを適用するインラインCSSについて解説します。

これはHTML要素のstyle属性を使用し、その属性値にCSSを記述する形式をとります。

  • インラインCSSの記述方法
  • インラインCSSの利点

インラインCSSの記述方法

以下にインラインCSSを用いた基本的なHTMLとCSSの記述例を示します。

<!DOCTYPE html>
<html>
<body>
  <h1 style="color: navy; text-align: center;">Welcome to My Webpage!</h1>
  <p style="font-size: 20px;">This is a sample paragraph text.</p>
</body>
</html>

各HTML要素のstyle属性内に直接CSSが記述します。

ここでは、h1タグの色と配置、そしてpタグのフォントサイズをそれぞれ定義しています。

インラインCSSの利点

インラインCSSの利点は以下のとおり。

  • 即時適用: 特定のHTML要素に直接スタイルを適用するため、すぐに結果が反映されます。
  • 上書き可能: 他のスタイルルールが適用された要素に対して、特定のスタイルを強制的に適用したい場合に便利です。

インラインCSSは一部の要素に特殊なスタイルを適用する場合や、スタイルをテストする場合などに限定した使用が推奨されます。

これは、CSSのルールを分散させることで、保守性や再利用性が低下するためです。

ファイルパスの理解：相対パスの利用

こちらでは、ファイルパスの一種である相対パスについて詳しく説明します。

CSSファイルや画像ファイルなどを、HTMLファイルから参照する際によく使われるからです。

  • 相対パスとは？
  • 相対パスの使用例と解説

相対パスとは？

相対パスとは、あるファイルを起点として別のファイルの位置を示す方法です。

特に、Web開発では同じディレクトリ構造内にある複数のファイル間でリンクを作る際に便利。

以下のファイルツリーのときをケースに例をご覧いただきます。

- index.html
- styles
  - base.css

index.htmlからbase.cssを読み込む相対パスはこちらです。

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

相対パスの使用例と解説

具体的な相対パスの使用例を見てみましょう。

以下は相対パスを用いて、HTMLファイルからCSSファイルを読み込む例です。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles/base.css">
</head>
<body>
  <h1>Welcome to My Webpage!</h1>
  <p>This is a sample paragraph text.</p>
</body>
</html>

この例では、”styles/base.css”という相対パスがhref属性の値として指定されています。

この値は、HTMLファイルから見たCSSファイルの位置を示しているのです。

相対パスの指定により、HTMLは正しいCSSファイルを読み込むことができます。

CSS読み込みの優先順位

CSSの適用順序は以下のルールに従います。

  1. スタイルの重要度：!important が指定されたスタイルが最優先されます。
  2. スタイルの特異度：IDセレクタ、クラスセレクタ、タグセレクタの順に優先度が高くなります。
  3. 記述の順番：同じ特異度のスタイルがある場合、後に記述されたものが優先されます。
  4. スタイルのソース：読み込まれるスタイルのソースが異なる場合、適用順序は次のようになります。
    1. ブラウザのデフォルトスタイル
    2. 外部CSSファイルや<style>タグで指定されたスタイル
    3. style属性で指定されたスタイル（インラインスタイル）

以上のルールに従って、最も特異度が高く、最も新しいスタイルが優先的に適用されます。

同じスタイルが複数定義されている場合には、これらのルールに基づいてスタイルが決定されるのです。

外部CSSファイルの作成と読み込み

外部CSSファイルの作成とそれをHTMLに読み込む手法について解説します。

よく使う方法なので、必ず覚えておきましょう。

  • CSSファイルの作成手順
  • link要素による外部ファイル読み込み
  • @importによる外部ファイル読み込み

CSSファイルの作成手順

CSSファイルを作成するためには、まずテキストエディタを開きます。

そこで、スタイルを定義していきます。

例えば、body要素の背景色を黒にし、全てのh1見出しを白色にするといった定義が可能です。

body {
  background-color: black;
}

h1 {
  color: white;
}

このようにして作成したCSSのコードを.css拡張子で保存します。

例えば、styles.cssという名前で保存することができます。

link要素による外部ファイル読み込み

次に、このCSSファイルをHTMLに読み込む方法について説明します。

そのためには、HTMLファイルの<head>要素内に<link>タグを追加します。

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

rel属性はリンク先のファイルがどのような目的で使われるのかを定義し、href属性はリンク先のファイルのパスを指定します。

@importによる外部ファイル読み込み

CSS内から別のCSSファイルを読み込むこともできます。

これは@importルールを使用して行います。

これは、一つのCSSファイル内で別のCSSファイルを読み込むことを可能にします。

@import url('styles2.css');

このように記述することで、styles2.cssというCSSファイルが読み込まれます。

CSSの読み込み方を比較する

ここでは、それぞれのCSS読み込み方法について総括し、どの方法が最適か、そのシチュエーションについて説明します。

また、外部CSSファイルの作成と利用、styleタグとインラインCSSの利用についても説明します。

  • 外部CSSファイルの作成と利用
  • styleタグとインラインCSSの利用

外部CSSファイルの作成と利用

外部CSSファイルは、サイト全体のスタイルを一元管理するのに最適な手法です。

すべてのスタイルが一箇所にあるため、メンテナンスが容易で、全体の一貫性も保たれるからです。

また、CSSファイルは一度読み込まれるとブラウザにキャッシュされるため、ページ間の移動時に再読み込みされることはありません。

結果として、サイトのパフォーマンスが向上します。

別ファイルの作成や編集が苦でなければ、外部CSSファイルを活用する方法がおすすめです。

styleタグとインラインCSSの利用

styleタグとインラインCSSは、特定のHTML要素やページに対して独自のスタイルを適用する場合に便利です。

スタイルを直接HTMLファイルに記述できるので、外部CSSファイルを探して編集する手間を省けるメリットがあります。

ただし以下のようなデメリットも。

  • 同じスタイルを複数の要素やページに適用する場合、それぞれに同じコードを記述
  • 各HTMLファイルにスタイルが書かれていると、更新または変更するのが難しくなる

最適な方法は、プロジェクトの要件、規模、そしてチームの好みによって異なるでしょう。

どの手法を選択するかは、あなたがどの利点を最も価値あるものと見なし、どの欠点を最も許容できるものと考えるかによります。

まとめ

CSSの読み込み方法は、Webサイトを設計する上で非常に重要なスキルです。

  • 外部CSSファイルの利用
  • HTML内部にstyleタグを使用する方法
  • インラインCSSの使用方法

外部CSSは一貫性とパフォーマンスを向上させるための最適な手法ですが、小さな変更には不向きです。

一方、styleタグとインラインCSSは特定の要素に特化したスタイルを適用するのに便利ですが、再利用性と保守性に問題があります。

重要なのは、あなたが作業している特定のプロジェクトや目標に最も適した方法を選択することです。

それは、プロジェクトの規模、要件、そしてあなた自身のスキルと好みによるでしょう。

それぞれの方法を適切に適用し、より効果的で使いやすいWebサイトを作成してください。

タイトルとURLをコピーしました