CSS入門｜基本構文・セレクタ・HTMLへの適用方法

はじめに

CSSを初めて学ぶ人に向けて、CSSの役割、基本的な書き方、セレクタやプロパティの使い方、HTMLにCSSを適用する方法を解説します。

CSSは、Webページの文字色や背景色、文字の大きさ、余白などを変更できる言語です。

HTMLだけでもWebページを表示できますが、CSSを組み合わせることで、内容を読みやすくしたり、デザインを整えたりできます。

この記事では、基礎知識を確認したあと、実際にHTMLファイルとCSSファイルを作成し、ブラウザで表示を確認するところまで進めます。

この記事で学べること

CSSとHTML、JavaScriptの役割の違い
CSSの基本構文
セレクタ・プロパティ・値の使い方
classとidを使ったスタイルの指定
CSSのコメントの書き方
CSSを記述する3つの方法
HTMLとCSSを組み合わせたWebページの作成
CSSが反映されないときの確認方法

事前にHTMLの基本構造を理解しておくと、よりスムーズに進められます。

HTMLの基本については、HTML入門｜初心者向けに基本構造・書き方・タグを実例で解説も参考にしてください。

CSSとは

CSSは「Cascading Style Sheets」の略称で、HTMLなどで記述した文書の見た目を指定するためのスタイルシート言語です。

たとえば、HTMLで次のように見出しを記述したとします。

<h1>CSSの学習を始めよう</h1>

HTMLだけでも見出しとして表示されますが、文字色や文字サイズを指定したい場合はCSSを使います。

h1 {
  color: blue;
  font-size: 30px;
}

このCSSをHTMLに適用すると、見出しの文字色が青くなり、文字サイズが30pxになります。

このように、HTMLで文章の構造を作り、CSSでその見た目を整えるのが基本的な使い方です。

HTML・CSS・JavaScriptの違い

Webページを作成する際には、HTML・CSS・JavaScriptがよく使われます。

それぞれの主な役割は次のとおりです。

技術	主な役割	具体例
HTML	ページの構造や意味を定義する	見出し、段落、画像、リンク
CSS	ページの見た目を指定する	文字色、背景色、文字サイズ、余白
JavaScript	ページの動作を制御する	ボタン操作、表示内容の変更

たとえば、記事の見出しを表示する場合、HTMLで見出しを作り、CSSで色や大きさを指定します。

さらに、ボタンを押したときに文章を変更するような動作を加える場合は、JavaScriptを使用できます。

この記事では、HTMLで作成した要素にCSSを適用する方法を中心に学習します。

CSSを書くための開発環境

CSSの学習には、特別なサーバーや複雑な環境構築は必要ありません。

基本的には、次の2つがあれば始められます。

テキストエディタ
Webブラウザ

テキストエディタを用意する

テキストエディタは、HTMLやCSSなどのコードを作成・編集するためのソフトウェアです。

Windowsのメモ帳などでもCSSを記述できますが、今回はVisual Studio Code（VS Code）を使用します。

VS Codeでは、コードの色分けや入力補完などの機能を利用できます。

Visual Studio Code公式サイトから、自分のOSに対応するデスクトップ版をインストールしてください。

すでにVS Codeや別のテキストエディタを使用している場合は、そのまま利用できます。

Webブラウザを用意する

作成したHTMLとCSSを確認するために、Webブラウザを使用します。

代表的なブラウザには、Google Chrome、Microsoft Edge、Safari、Firefoxなどがあります。

今回はGoogle ChromeまたはMicrosoft Edgeを例にしますが、基本的なHTMLとCSSの表示は、ほかの主要なブラウザでも確認できます。

ブラウザには開発者ツールが用意されており、HTMLの構造や適用されているCSSを調べることもできます。

開発者ツールについては、後ほど実際に使いながら確認します。

CSSの基本構文

CSSは、主に「セレクタ」「プロパティ」「値」の3つを組み合わせて記述します。

基本的な構文は次のとおりです。

セレクタ {
  プロパティ: 値;
}

それぞれの役割は次のとおりです。

項目	役割
セレクタ	どのHTML要素に適用するかを指定する
プロパティ	何を変更するかを指定する
値	どのように変更するかを指定する

たとえば、すべてのh1要素を青色にするCSSは次のように記述します。

h1 {
  color: blue;
}

このコードでは、次のように指定しています。

h1：見出しを対象とするセレクタ
color：文字色を変更するプロパティ
blue：青色を表す値

color: blue;のように、プロパティと値を組み合わせた指定を「宣言」と呼びます。

複数のプロパティを指定する

CSSでは、1つのセレクタに複数のプロパティを指定できます。

h1 {
  color: blue;
  font-size: 30px;
  background-color: lightgray;
}

この例では、次の3つを指定しています。

文字色を青色にする
文字サイズを30pxにする
背景色を薄い灰色にする

プロパティと値はコロン（:）で区切り、宣言同士はセミコロン（;）で区切ります。ブロック内の最後の宣言ではセミコロンを省略できますが、後から宣言を追加しやすいよう、この実習では毎回付けます。

複数の宣言を記述するときは、1行ずつ分けると読みやすくなります。

また、波括弧{}の中は半角スペース2つなどで字下げすると、コードの構造が分かりやすくなります。

なお、字下げに使うスペースの数は、CSSの動作を決める必須の文法ではありません。プロジェクト内で書き方を統一することが大切です。

CSSのセレクタとは

セレクタは、CSSを適用するHTML要素を指定するためのものです。

今回は、初心者が最初に覚えたい3種類を紹介します。

要素セレクタ
クラスセレクタ
IDセレクタ

要素セレクタ

要素セレクタは、HTMLの要素名を指定する方法です。

たとえば、次のHTMLがあるとします。

<h1>CSS入門</h1>
<p>1つ目の段落です。</p>
<p>2つ目の段落です。</p>

次のCSSを適用します。

p {
  color: blue;
}

この場合、ページ内のp要素が対象となるため、2つの段落の文字色がどちらも青色になります。

特定の種類の要素に、共通のスタイルを適用したい場合に使用できます。

クラスセレクタ

クラスセレクタは、HTMLのclass属性に指定された値を使って、対象となる要素を選択します。

次のHTMLを用意します。

<p>通常の文章です。</p>
<p class="highlight">重要な文章です。</p>
<p class="highlight">こちらも重要な文章です。</p>

highlightというクラスが指定された要素にCSSを適用します。

.highlight {
  color: red;
  font-size: 20px;
}

クラスセレクタは、クラス名の前にドット（.）を付けて記述します。

この場合、highlightクラスが付いた2つの段落だけが赤色になり、文字サイズも20pxになります。

クラスは複数のHTML要素で再利用できるため、同じ見た目を繰り返し使いたい場合に便利です。

IDセレクタ

IDセレクタは、HTMLのid属性を使って特定の要素を指定する方法です。

次のHTMLを用意します。

<p>通常の文章です。</p>
<p id="notice">重要なお知らせです。</p>

このうち、noticeというIDが指定された要素にCSSを適用します。

#notice {
  color: red;
  font-size: 20px;
}

IDセレクタは、ID名の前にシャープ（#）を付けます。

この場合、id="notice"が指定された段落にスタイルが適用されます。

id属性は、同じHTML文書内で同じ値を重複させないようにします。異なるID名であれば、1つの文書内で複数使用できます。

要素・class・idの違い

セレクタ	CSSの書き方	対象
要素セレクタ	`p`	すべてのp要素
クラスセレクタ	`.highlight`	highlightクラスを持つ要素
IDセレクタ	`#notice`	noticeというIDを持つ要素

同じスタイルを複数の要素に適用したい場合は、クラスセレクタを利用すると管理しやすくなります。

よく使うCSSプロパティ

CSSには多くのプロパティがありますが、最初からすべてを覚える必要はありません。

ここでは、基本的な4つのプロパティを紹介します。

colorで文字色を変更する

colorは、文字色を変更するプロパティです。

p {
  color: red;
}

この例では、段落の文字色を赤色に変更します。

色はredやblueなどの名前で指定するほか、次のように16進数のカラーコードでも指定できます。

p {
  color: #ff0000;
}

#ff0000は赤色を表します。

font-sizeで文字サイズを変更する

font-sizeは、文字の大きさを指定するプロパティです。

h1 {
  font-size: 30px;
}

この例では、見出しの文字サイズを30pxにします。

pxはCSSで使用できる長さの単位の1つです。

たとえば、次のように変更すると文字サイズが変わります。

h1 {
  font-size: 40px;
}

文字サイズを変更すると、見出しや文章の強調具合を調整できます。

ただし、見出しの意味や階層はHTMLで適切に指定し、その見た目をCSSで整えるようにしましょう。

background-colorで背景色を変更する

background-colorは、要素の背景色を変更するプロパティです。

p {
  background-color: lightgray;
}

この例では、段落の背景色を薄い灰色にします。

次のようにカラーコードでも指定できます。

p {
  background-color: #d3d3d3;
}

背景色は、重要なお知らせや文章の区別を分かりやすくする場合などに利用できます。

marginで外側の余白を変更する

marginは、要素の外側に設ける余白を指定するプロパティです。

h1 {
  margin: 20px;
}

この例では、見出しの上下左右に20pxの外側余白を指定します。

余白を調整することで、要素同士が近づきすぎないようにできます。

marginは要素の外側の余白を指定するものであり、背景色が付く領域の内側に余白を作るものではありません。

まずは、これらの基本的なプロパティを使って、文字色・文字サイズ・背景色・余白を変更できるようになりましょう。

CSSのコメントの書き方

CSSには、コードの説明やメモを残すためのコメントを記述できます。

コメントは、/*と*/で囲みます。

/* 見出しの文字色を設定 */
h1 {
  color: blue;
  font-size: 30px;
}

コメント部分はCSSのスタイル指定として処理されないため、デザインには影響しません。

プロパティの横に記述することもできます。

h1 {
  color: blue; /* 文字色 */
  font-size: 30px; /* 文字サイズ */
}

複数行でコメントを書くこともできます。

/*
  見出しに適用するスタイル
  文字色と文字サイズを設定する
*/
h1 {
  color: blue;
  font-size: 30px;
}

CSSでは、HTMLのとはコメントの書き方が異なります。

また、JavaScriptなどで使われる//は、通常のCSSのコメント構文ではありません。

CSSを記述する3つの方法

CSSをHTMLに適用する方法には、主に次の3種類があります。

外部スタイルシート
内部スタイルシート
インラインスタイル

それぞれの特徴を確認しましょう。

1. 外部スタイルシート

外部スタイルシートは、CSSをHTMLとは別のファイルに記述する方法です。

たとえば、次の2つのファイルを用意します。

sample/
├── index.html
└── style.css

index.htmlのhead要素内に、次のコードを記述します。

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

rel="stylesheet"は、読み込むファイルがスタイルシートであることを示します。

href="style.css"は、CSSファイルの場所を指定します。

今回はHTMLとCSSを同じフォルダに保存しているため、ファイル名だけで参照できます。

style.cssには、次のCSSを記述します。

h1 {
  color: blue;
  font-size: 30px;
}

HTML側に記述したlink要素によってCSSファイルが読み込まれ、見出しにスタイルが適用されます。

外部スタイルシートには、次のようなメリットがあります。

HTMLとCSSを分けて管理できる
同じCSSファイルを複数のHTMLページで使用できる
デザインを変更するときに修正箇所をまとめやすい

複数のページを持つWebサイトでは、基本的に外部スタイルシートを利用すると管理しやすくなります。

2. 内部スタイルシート

内部スタイルシートは、HTMLファイル内にCSSを記述する方法です。

HTMLのhead要素内にstyle要素を記述します。

次の例は、1つのHTMLファイルだけで動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>内部スタイルシートの例</title>

  <style>
    h1 {
      color: blue;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>CSSの学習</h1>
</body>
</html>

このHTMLをinternal.htmlという名前で保存してブラウザで開くと、見出しが青色で表示されます。

別のCSSファイルを作成する必要がないため、1つのHTMLファイルで簡単な表示確認を行いたい場合に便利です。

ただし、複数のHTMLページで同じデザインを使用する場合は、CSSの重複が増えて管理しにくくなることがあります。

3. インラインスタイル

インラインスタイルは、HTML要素のstyle属性に直接CSSを記述する方法です。

<p style="color: red; font-size: 20px;">赤色の文章です。</p>

この例では、段落の文字色を赤色にし、文字サイズを20pxにしています。

HTML要素に直接スタイルを指定できるため、特定の要素だけを簡単に変更したい場合に利用できます。

一方で、複数の要素に同じスタイルを設定すると、HTML内に同じコードを何度も記述することになります。

そのため、繰り返し使用するスタイルは、外部スタイルシートにまとめる方が管理しやすくなります。

3つの記述方法の比較

記述方法	CSSを書く場所	主な用途
外部スタイルシート	別のCSSファイル	複数ページでの共通管理
内部スタイルシート	HTML内のstyle要素	単一ページでの簡単な確認
インラインスタイル	HTML要素のstyle属性	個別要素への直接指定

今後、CSSを使ってWebページを作成していく場合は、まず外部スタイルシートの使い方を覚えておくと便利です。

HTMLとCSSを使ってWebページを作成する

ここからは、実際にHTMLとCSSを組み合わせたWebページを作成します。

今回の実習では、次の内容を確認します。

HTMLから外部CSSファイルを読み込む
見出しの文字色と文字サイズを変更する
クラスセレクタで複数の段落に同じスタイルを適用する
IDセレクタで特定の段落にスタイルを適用する
背景色と余白を変更する
ブラウザでCSSの反映を確認する

1. 作業用フォルダを作成する

デスクトップなど、分かりやすい場所にcss-practiceというフォルダを作成してください。

VS Codeを起動し、「ファイル」から「フォルダーを開く」を選択して、作成したフォルダを開きます。

続いて、次の2つのファイルを作成します。

css-practice/
├── index.html
└── style.css

それぞれの役割は次のとおりです。

ファイル	役割
index.html	Webページの構造や文章を記述する
style.css	Webページの見た目を指定する

今回はHTMLファイルとCSSファイルを同じフォルダ内に保存します。

2. index.htmlを作成する

index.htmlに、次のコードをすべて記述してください。

<!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="style.css">
</head>
<body>
  <h1>CSS入門の練習</h1>

  <p>HTMLとCSSを使ってWebページを作成します。</p>

  <p class="highlight">
    CSSで文字の色や大きさを変更できます。
  </p>

  <p class="highlight">
    同じクラスを複数の要素で使用できます。
  </p>

  <p id="notice">
    ここは重要なお知らせです。
  </p>
</body>
</html>

今回のHTMLで重要なのは、次の部分です。

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

この記述によって、同じフォルダにあるstyle.cssを読み込みます。

また、次の部分では、highlightというクラスを2つの段落に指定しています。

<p class="highlight">
  CSSで文字の色や大きさを変更できます。
</p>

<p class="highlight">
  同じクラスを複数の要素で使用できます。
</p>

この2つの段落には、同じCSSを適用できます。

一方、次の段落にはnoticeというIDを指定しています。

<p id="notice">
  ここは重要なお知らせです。
</p>

この段落には、IDセレクタを使って個別のスタイルを設定します。

3. style.cssを作成する

次に、style.cssに以下のコードを記述します。

/* ページ全体のスタイル */
body {
  background-color: #f3f6fb;
  margin: 40px;
}

/* 見出しのスタイル */
h1 {
  color: #1d4ed8;
  font-size: 32px;
}

/* 段落の共通スタイル */
p {
  color: #333333;
  font-size: 16px;
}

/* 強調したい文章のスタイル */
.highlight {
  color: #b45309;
  font-size: 20px;
}

/* 重要なお知らせのスタイル */
#notice {
  color: #1e40af;
  background-color: #dbeafe;
  margin: 24px 0;
}

各セレクタの役割を確認しましょう。

body

body {
  background-color: #f3f6fb;
  margin: 40px;
}

ページの背景色を薄い青みがかった色にし、body要素の外側に40pxの余白を設定します。

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

見出しの文字色を青色にし、文字サイズを32pxにします。

p {
  color: #333333;
  font-size: 16px;
}

すべての段落を対象として、文字色と文字サイズを指定します。

この実習では、同じプロパティに複数の指定が当てはまると、要素セレクタの p よりもクラスセレクタの .highlight やIDセレクタの #notice が優先されます。セレクタのこの重みを「詳細度」と呼びます。

.highlight

.highlight {
  color: #b45309;
  font-size: 20px;
}

highlightクラスを持つ2つの段落を対象に、文字色と文字サイズを変更します。

#notice

#notice {
  color: #1e40af;
  background-color: #dbeafe;
  margin: 24px 0;
}

id="notice"が指定された段落に、文字色、背景色、余白を設定します。

margin: 24px 0;は、上下に24px、左右に0の外側余白を指定する書き方です。

4. HTMLとCSSを保存する

コードを入力したら、両方のファイルを保存します。

WindowsではCtrl + S、macOSではCommand + Sで保存できます。

保存後、次の点を確認してください。

HTMLファイルの名前がindex.htmlになっている
CSSファイルの名前がstyle.cssになっている
2つのファイルが同じフォルダに保存されている
ファイルの文字コードがUTF-8になっている

特に、ファイル名がstyle.css.txtなどになっていないか確認してください。

5. ブラウザで表示を確認する

Windowsのエクスプローラー、またはmacOSのFinderでcss-practiceフォルダを開きます。

index.htmlをダブルクリックして、Google ChromeやMicrosoft Edgeなどのブラウザで開いてください。

エディタが開く場合は、右クリックからブラウザを指定します。

CSSが正しく読み込まれていれば、次のように表示されます。

ページ全体の背景が薄い青みがかった色になる
「CSS入門の練習」という見出しが青色で大きく表示される
通常の段落は濃い灰色で表示される
highlightクラスを指定した2つの段落は、茶色系の文字色で通常より大きく表示される
「ここは重要なお知らせです。」の背景が薄い青色になる

この5点が確認できれば、HTMLから外部CSSファイルを読み込み、スタイルを適用できています。

6. CSSを変更してみる

次に、CSSの値を変更し、表示が変わることを確認します。

style.cssの見出しの部分を探してください。

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

文字色をgreenに変更してみましょう。

h1 {
  color: green;
  font-size: 32px;
}

変更したらファイルを保存し、ブラウザで再読み込みします。

WindowsではCtrl + R、macOSではCommand + Rで再読み込みできます。

見出しの文字色が緑色になれば成功です。

続いて、.highlightの文字サイズを変更してみましょう。

.highlight {
  color: #b45309;
  font-size: 24px;
}

保存後にブラウザを再読み込みすると、highlightクラスを持つ2つの段落の文字サイズが24pxになります。

このように、CSSファイルを変更するだけで、HTMLの文章を変更せずに見た目を調整できます。

ブラウザの開発者ツールでCSSを確認する

CSSが正しく適用されているかを調べるには、ブラウザの開発者ツールが便利です。

ここでは、Google ChromeまたはMicrosoft Edgeを使って確認します。

1. 開発者ツールを開く

作成したindex.htmlをブラウザで開きます。

見出しの「CSS入門の練習」を右クリックし、「検証」を選択してください。

開発者ツールが表示されます。

2. HTML要素を確認する

開発者ツールの「Elements」（要素）に、HTMLの構造が表示されます。

見出しを選択すると、次のような要素を確認できます。

<h1>CSS入門の練習</h1>

3. 適用されているCSSを確認する

「Styles」（スタイル）には、選択した要素に関係するCSSが表示されます。

今回の見出しでは、次の指定を確認できます。

h1 {
  color: green;
  font-size: 32px;
}

手順6で文字色を変更していない場合は、colorの値が#1d4ed8のままになっています。

開発者ツール上でCSSの値を変更すると、ページの見た目がその場で変わることも確認できます。

ただし、開発者ツールで一時的に変更した内容は、通常、元のCSSファイルには自動で保存されません。

変更を残したい場合は、VS Codeでstyle.cssを編集して保存してください。

CSSが反映されないときの確認方法

HTMLをブラウザで開いてもCSSが反映されない場合は、以下の点を確認しましょう。

1. CSSファイルの名前が正しいか

HTML側で次のように指定している場合、

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

CSSファイルの名前はstyle.cssである必要があります。

styles.cssやstyle.css.txtなど、名前が異なっていないか確認してください。

2. ファイルの保存場所が正しいか

今回の実習では、HTMLとCSSを同じフォルダに配置します。

css-practice/
├── index.html
└── style.css

CSSファイルが別のフォルダにある場合は、hrefで指定するパスを変更する必要があります。

まずは上記と同じ構成になっているか確認してください。

3. link要素が正しく記述されているか

CSSファイルを読み込むためのlink要素が、HTMLのhead要素内に記述されているか確認してください。

<head>
  <meta charset="UTF-8">
  <title>CSS入門の練習</title>
  <link rel="stylesheet" href="style.css">
</head>

ファイル名やパスだけでなく、relやhrefの綴りも確認しましょう。

4. セレクタの書き方が正しいか

クラスセレクタにはドット（.）、IDセレクタにはシャープ（#）を付けます。

.highlight {
  color: red;
}

#notice {
  color: blue;
}

また、HTML側のclassやidの値とCSSのセレクタ名が一致しているかも確認してください。

5. CSSの記号が正しいか

次の記号が抜けていないか確認してください。

宣言を囲む波括弧{と}
プロパティと値を区切るコロン:
宣言を区切るセミコロン;

たとえば、次のように記述します。

h1 {
  color: blue;
  font-size: 30px;
}

記号の不足や綴り間違いがあると、一部のスタイルが適用されないことがあります。

6. ファイルを保存して再読み込みしたか

CSSを編集しただけでは、ブラウザに新しい内容が反映されない場合があります。

VS Codeでファイルを保存したあと、ブラウザを再読み込みしてください。

それでも変わらない場合は、編集しているファイルと、ブラウザで開いているファイルが一致しているか確認します。

開発者ツールの「Network」（ネットワーク）を開いてページを再読み込みすると、style.css の読み込み状況を確認できます。ファイルが読み込まれている場合は、「Styles」（スタイル）で打ち消し線が付いた宣言と、実際に適用されている宣言を見比べます。

まとめ

今回は、CSSの基本構文から、HTMLとCSSを組み合わせたWebページの作成までを解説しました。

重要なポイントは次のとおりです。

CSSは、Webページの見た目を指定するためのスタイルシート言語である
CSSはセレクタ・プロパティ・値を組み合わせて記述する
要素セレクタ・クラスセレクタ・IDセレクタを使って、スタイルの適用先を指定できる
color、font-size、background-color、marginなどで見た目を変更できる
CSSのコメントは/* */で記述する
CSSには外部・内部・インラインの3つの記述方法がある
複数ページで共通のスタイルを管理する場合は、外部スタイルシートが便利である
CSSを変更したら、ファイルを保存し、ブラウザで再読み込みして結果を確認する

CSSは、実際に値を変更して表示の違いを確認することで、理解しやすくなります。

最初から多くのプロパティを覚える必要はありません。

まずは今回の実習で作成したstyle.cssの文字色や文字サイズ、背景色などを変更し、どのように表示が変わるか試してみてください。

HTML入門｜初心者向けに基本構造・書き方・タグを実例で解説

CSS入門｜基本構文・セレクタ・HTMLへの適用方法を初心者向けに解説