CSSをHTMLに読み込む方法・記述方法【環境構築編】

●目次

HTMLファイルにCSSを読み込むための基本的な方法と、その接続方法について解説します。

初心者の方でも簡単に理解できるよう、環境構築の手順も紹介します。

CSSをHTMLに読み込む3つの方法

CSSをHTMLに適用するには、以下の3つの方法があります。それぞれの特徴を理解し、用途に応じて使い分けましょう。

インラインCSSは、HTML要素内に直接スタイルを記述する方法です。HTMLタグの中にstyle属性を使用してスタイルを設定します。簡単にスタイルを変更できるメリットがありますが、保守性が低く、大規模なプロジェクトには向いていません。

例：

HTML

<p style="color: red;">これは赤色のテキストです。</p>

インラインCSSは、特定の1つの要素に対してスタイルを適用する場合に有効です。しかし、同じスタイルを複数の要素に適用するには非効率です。

内部スタイルシートは、HTML文書内の<head>タグの中に<style>タグを使ってCSSを記述する方法です。この方法は、1つのHTMLファイルに対してスタイルを適用する場合に有効です。中規模のプロジェクトや特定のページだけにスタイルを適用したいときに便利です。

例：

HTML

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>これは青色のテキストです。</p>
</body>

内部スタイルシートは、HTMLファイルとCSSが一体化しているため、ファイルの管理が簡単ですが、複数のページに同じスタイルを適用したい場合は、毎回同じスタイルを記述する必要があり、非効率です。

外部スタイルシートは、スタイルを別のCSSファイルに記述し、それをHTMLにリンクする方法です。この方法は最も推奨される方法で、大規模なウェブサイトや複数のページに一貫したスタイルを適用するのに最適です。

外部スタイルシートは、<link>タグを使ってHTMLの<head>セクションに接続します。

HTML

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>これは緑色のテキストです。</p>
</body>

CSS

p {
  color: green;
}

ディレクトリ構成

project-root/
│
├── index.html
├── about.html
└── css/
    └── styles.css

CSSをHTMLに接続する方法は、インライン、内部、外部の3つがあります。ウェブサイトの規模や管理のしやすさに応じて、適切な方法を選択することが重要です。特に外部スタイルシートは、効率的かつスケーラブルなサイト運営に適しているため、初心者から上級者まで幅広く利用されています。