いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】CSSの基本の書き方を学ぼう

Webページの見た目を整えるCSSの基本的な書き方を解説する記事です。HTML要素のデザインを指定する「セレクタ・プロパティ・値」という構文の基礎から、HTMLへCSSを適用する3つの方法、クラスとIDの使い分けといった必須ルールまで、初心者向けにわかりやすく紹介します。

作成日: 更新日:

CSSとは？

CSSは「Cascading Style Sheets（カスケーディングスタイルシート）」の略で、Webページの見た目やデザインを定義するための言語です。

  • 「カスケーディング」とは、複数のスタイル設定が、優先順位に従って適用されることを意味します。
  • 「スタイルシート」とは、Webページの見た目に関する設定（色、レイアウトなど）を記述したルールの集まりのことです。

CSSを使うことで、具体的に以下のような設定が可能です。

  • 文字の色やサイズを変更
  • 背景色を設定
  • 要素の余白や配置を調整

CSSは、HTMLによって作られたWebページの構造（骨組み）に対して、デザイン（装飾）を適用する役割を持ちます。 HTMLで構造を定義し、CSSで見た目を整え、さらにJavaScriptで動きを加えることで、見やすく機能的なWebページが作られます。

CSSを適用させる方法

CSSをHTMLファイルに適用させる方法は、主に3種類あります。それぞれの方法には異なる特徴があり、状況に応じて使い分けることが重要です。

  • インラインCSS（HTML内）
  • 内部CSS（<style>タグ内）
  • 外部CSS（.cssファイル + <link>タグ）

それぞれの特徴や使い分けについて、詳しく解説していきます。

① インラインCSS（HTML内）

HTMLタグにstyle属性を追加し、その中に直接CSSのコードを書き込む方法です。この方法は、Webページの中の特定の一部分だけデザインを変更したい場合や、他のCSS設定を一時的に上書きしたいといった限定的な状況で使われます。

1<p style="color: red;">赤い文字です</p>
  • メリット：
    • タグごとに細かくデザインを指定できる 特定のHTMLタグ一つひとつに対して、個別にスタイルを設定できます。
    • 他のCSSより優先順位が高い（重要） インラインCSSで指定したスタイルは、他の方法で書かれたどのスタイルよりも優先的に適用されます。これは非常に重要なルールです。
  • デメリット：
    • すべての要素に1つずつ指定する必要があり、作業効率が悪い 同じデザインを複数の場所に適用したい場合でも、すべてのHTMLタグにstyle属性を一つひとつ書いていく必要があり、手間がかかります。
    • メンテナンスが困難（スタイルの一括管理ができない） サイトのデザインを後から変更する際、すべてのstyle属性を探して修正しなければならず、管理が非常に大変になります。

② 内部CSS（<style>タグ内）

HTMLファイルの<head>タグの中に<style>タグを設置し、その中にCSSのコードをまとめて記述する方法です。Webページが1ページだけで構成されている場合や、手軽にCSSを試したい場合などに便利です。

1<head>
2  <style>
3    p { color: blue; }
4  </style>
5</head>
  • メリット：
    • 同じHTMLファイル内でスタイルをまとめて記述できる HTMLとCSSが同じファイル内にあるため、そのページにどのようなスタイルが適用されているかが一目でわかります。
    • 外部ファイルを用意しなくても良い HTMLファイルとは別に、CSSファイル（.css）を新しく作成する必要がないため、手軽に始められます。
  • デメリット：
    • HTMLとCSSが混在するため、コードが長くなりがち 1つのファイルにHTMLの構造とCSSの装飾が両方書かれているため、ページの規模が大きくなるとファイルが長くなり、見通しが悪くなることがあります。
    • 複数のHTMLファイルに同じスタイルを適用できない この方法で書かれたCSSは、そのHTMLファイル内でしか有効になりません。そのため、他のページにも同じデザインを適用したい場合は、それぞれのファイルに同じCSSをコピーする必要があり非効率です。

③ 外部CSS（.cssファイル + <link>タグ）

HTMLファイルとは別に、CSSのコードだけを記述した専用のファイル（例: style.css）を用意し、HTMLの<head>タグ内で<link>タグを使ってそのファイルを読み込む方法です。ほとんどのWebサイト制作の現場では、この方法が標準的に採用されています。

1<!-- index.html -->
2<head>
3  <link rel="stylesheet" href="style.css">
4</head>
1/* style.css */
2p { color: green; }
  • メリット：
    • CSSを別ファイルで一括管理でき、メンテナンスがしやすい HTML（構造）とCSS（見た目）の役割をファイル単位で明確に分離できます。これにより、後からデザインを修正したり追加したりするのが非常に簡単になります。
    • 複数のHTMLファイルで同じスタイルを共有できる 1つのCSSファイルを、複数のHTMLファイルから読み込んで使用できます。サイト全体で統一感のあるデザインを効率的に適用できるため、大規模なWebサイトの構築に適しています。
  • デメリット：
    • CSSファイルの読み込みが必要になる ブラウザはHTMLファイルを読み込んだ後、<link>タグに書かれたCSSファイルを追加で読み込む必要があります。しかし、これはWebサイト表示において一般的な動作であり、通常は大きな問題にはなりません。

CSSの基本構文

CSSは、Webページの見た目を整えるための言語です。その記述は、「どの部分を、どう変えるか」という一つのルールの組み合わせで構成されます。このルールを記述するために、「セレクタ」「プロパティ」「値」という3つの要素を使います。

1セレクタ {
2  プロパティ: 値;
3}
  • セレクタ：どのHTML要素にデザインを適用するかを指定する部分です。
    • 例：pと書けば段落、.boxと書けばboxというクラス名がついた要素が対象になります。
  • プロパティ：セレクタで指定した要素に対して、何を変えたいかを指定します。
    • 例：文字の色を変えたい場合はcolor、背景色ならbackground-colorを使います。
  • 値：プロパティに対して、どのような設定を適用するかを具体的に指定します。
    • 例：色であればredや#ff0000、サイズであれば20pxのように記述します。

セレクタの基本

CSSでスタイルを適用するには、まず「どのHTML要素に対してスタイルを当てるか」を指定する必要があります。この役割を担うのがセレクタです。ここでは、基本となる3種類のセレクタを解説します。

セレクタの種類指定の仕方書き方対象
タグセレクタ要素名で指定p<p> などのタグ全体
クラスセレクタclass 属性で指定.menuclass="menu" の要素
IDセレクタid 属性で指定#headerid="header" の要素

セレクタの使用例

1<!-- index.html -->
2<p>こんにちは</p>
3<div class="menu">メニュー</div>
4<header id="header">ヘッダー</header>
1/* style.css */
2/* タグセレクタ：pタグすべてに適用 */
3p {
4  color: blue;
5}
6
7/* クラスセレクタ：.menuクラスの要素に適用 */
8.menu {
9  font-size: 18px;
10}
11
12/* IDセレクタ：#headerの要素に適用 */
13#header {
14  background-color: lightgray;
15}

プロパティの基本

セレクタでスタイルを適用するHTML要素を選んだら、次に「どの部分を装飾するか」をプロパティで指定します。文字の色、大きさ、背景色など、見た目に関する様々な項目を指定できます。ここでは、代表的なプロパティをいくつか紹介します。

プロパティ名内容値の例
color文字の色red, #333, rgb(0,0,0)
font-size文字の大きさ16px, 1.2em
background-color背景色blue, #f0f0f0
width / height要素の幅・高さ300px, 50%
margin / padding外側/内側の余白20px, 1em, auto

プロパティの使用例

1<!-- index.html -->
2<p>こんにちは</p>
3<div class="menu">メニュー</div>
4<header id="header">ヘッダー</header>
1/* style.css */
2p {
3  color: white;                /* 文字色を白に */
4  background-color: black;     /* 背景を黒に */
5}
6
7.menu {
8  font-size: 18px;             /* フォントサイズを18pxに */
9  padding: 20px;               /* 内側に20pxの余白 */
10}
11
12#header {
13  width: 300px;                /* 幅を300pxに */
14}

値の基本

プロパティで変更したい項目を決めたら、最後に「具体的にどのような内容を適用するか」を**値（value）**で指定します。値の書き方には、キーワードや数値、色の指定など、プロパティの種類によって様々な形式があります。

値の種類例説明
キーワードauto, none, center意味を持つ単語で指定する
数値0, 1, 100単位を持たない数字（line-heightなど）
単位つき数値16px, 2em, 50%長さ・大きさなどを指定する
色red, #ff0000, rgb(0, 0, 0)色を指定する
複数の値10px 20pxmarginなどで複数指定できる

値の使用例

1<!-- index.html -->
2<div class="container">
3  <p>こんにちは</p>
4  <div class="menu">メニュー</div>
5  <header id="header">ヘッダー</header>
6</div>
1/* style.css */
2.container {
3  width: 80%;               /* パーセンテージ指定 */
4  margin: 0 auto;           /* 上下は0、左右は中央寄せ */
5  background-color: #f8f8f8;/* 背景色 */
6  color: #333;              /* 文字色 */
7  font-size: 1.2em;         /* フォントの大きさ */
8}

CSSを書くときの基本ルール

CSSを書くときに 最低限知っておくべき基本ルール をまとめました。 これからWebサイトのデザインを学ぶ上で、とても重要な基礎となりますので、一つずつ確実に理解していきましょう。

半角英数字で書く

CSSのコードは、すべて半角の英数字と記号で記述するのが鉄則です。 プログラミング言語は基本的に英語圏で開発されているため、日本語の全角文字は認識できません。

もし誤って全角のスペースや記号（｛｝：；など）を入力してしまうと、コンピュータがコードを正しく解釈できず、スタイルが全く反映されない原因になります。見た目が似ている記号も多いため、入力の際は特に注意しましょう。

1/* OK（正しい書き方） */
2h1 {
3  color: blue;
4}
5
6/* NG（全角文字が混じっている） */
7ｈ１｛
8  ｃｏｌｏｒ：ｂｌｕｅ；
9｝

大文字と小文字は区別される

CSSは、大文字と小文字を区別して認識します。 例えば、colorとColorは別のものとして扱われます。

ルールとして、プロパティ名（font-sizeなど）や値に使われる単位（pxなど）は、すべて小文字で書くのが一般的です。大文字で書いても動作するブラウザもありますが、予期せぬエラーを防ぎ、誰が見ても分かりやすいコードにするために、小文字で統一する習慣をつけましょう。

1/* OK（すべて小文字） */
2p {
3  font-size: 16px;
4}
5
6/* NG（大文字が含まれている） */
7p {
8  Font-Size: 16PX;
9}

複数のセレクタをまとめて指定できる

Webサイト制作では、「見出し1と見出し2と見出し3は、すべて同じ文字色にしたい」といった場面がよくあります。 その際、**カンマ（,）**でセレクタを区切ることで、複数の要素に同じスタイルを一度に適用できます。

これにより、同じコードを何度も書く手間が省け、コードがスッキリして管理しやすくなります。 ただし、カンマを忘れて半角スペースで区切ってしまうと、「要素の中の要素」を指定するという全く別の意味になってしまうため、注意が必要です。

1/* OK：h1, h2, h3 に同じ色を指定 */
2h1, h2, h3 {
3  color: navy;
4}
5
6/* NG：h1の中のh2の中のh3のみ対象になる */
7h1 h2 h3 {
8  color: navy;
9}

複数の装飾を同時に指定できる

1つの要素に対して、文字色だけでなく、文字の大きさや行の高さなど、複数のスタイル（プロパティ）を同時に指定することができます。

各スタイルの設定は、必ず「;（セミコロン）」で区切ります。このセミコロンが「この設定はここまで」という区切りの役割を果たします。セミコロンを忘れると、それ以降のスタイルが正しく適用されない原因になるため、書き終えたら必ず確認しましょう。

1/* OK：p要素に3つのスタイルを設定 */
2p {
3  color: gray;
4  font-size: 18px;
5  line-height: 1.6;
6}
7
8/* NG：セミコロンが抜けている */
9p {
10  color: gray
11  font-size: 18px
12  line-height: 1.6
13}

要素の中の要素を指定できる

「Webページ上にある全ての p タグではなく、article タグの中にある p タグだけスタイルを変えたい」というように、特定の範囲に含まれる要素だけを狙ってスタイルを適用したい場合があります。

その場合は、セレクタを半角スペースで区切って記述します。例えば article p と書くと、「article 要素の中にある p 要素」という意味になります。これを「子孫セレクタ」と呼び、より細かくデザインを調整するために使われます。

1/* OK：article内のp要素だけに適用される */
2article p {
3  line-height: 1.8;
4}
5
6/* 全てのp要素に適用される */
7p {
8  line-height: 1.8;
9}

単位を正しく指定する

CSSで大きさや長さなどを指定する際、数値だけを書いてもコンピュータは何の単位なのか判断できません。 そのため、24px（ピクセル）や 80%（パーセント）のように、数値の後には必ず単位を記述する必要があります。

唯一の例外として、値が 0 の場合は単位を省略できます。0px も 0% も結果は同じ 0 だからです。 それ以外の数値には、必ず適切な単位をつけましょう。

※ line-height など一部のプロパティでは単位なしの数値を指定できる場合があります。

1/* OK：単位が正しくついている */
2h1 {
3  font-size: 24px;
4  margin-top: 1em;
5  width: 80%;
6}
7
8/* NG：単位が抜けている */
9h1 {
10  font-size: 24;
11  margin-top: 1;
12  width: 80;
13}

コメントを書ける

CSSのコードが長くなると、「この部分はどのデザインのためのコードだっけ？」と後から見返したときに分かりにくくなることがあります。 そこで、コードの中に**メモ書き（コメント）**を残す機能があります。

/* と */ で囲んだ部分は、ブラウザには表示されず、スタイルの適用にも一切影響しません。 後から自分が見返したり、他の人と共同で作業したりする際に、コードの意図を伝えるために非常に役立ちます。

1/* これは見出しの色設定です */
2h1 {
3  color: navy;
4}

プロパティの上書き（優先順位）

CSSでは、1つの要素に複数のスタイルが指定された場合、どのスタイルを適用するかを決めるための優先順位のルールが存在します。

基本ルールは2つです。

  1. 下に書かれたものが優先：同じセレクタで同じプロパティが指定された場合、CSSファイルの下の方に書かれている設定が適用されます。
  2. より詳しい指定が優先：セレクタの指定がより具体的であるほど、優先度が高くなります。一般的に、#id > .class > 要素名 の順で優先されます。

この優先順位の仕組みを「詳細度」と呼びます。スタイルが思ったように適用されないときは、この優先順位が原因であることが多いため、必ず覚えておきましょう。

1p {
2  color: blue;
3}
4
5/* ↓ 下に書かれたものが優先される */
6p {
7  color: red;
8}
9
10/* 詳細度が高いほうが優先 */
11.box p {
12  color: white;
13}

クラス（.class）とID（#id）の使い分け

HTMLの特定の要素に狙いを定めてスタイルを適用するために、**クラス（class）やID（id）**という目印を使います。

  • クラス（.class）: 「グループ名」のようなもので、1ページ内で何度でも使用できます。例えば「注意文」や「ボタン」など、同じデザインを複数の箇所で使い回したい場合に便利です。CSSでは、名前の前にドット（.）を付けて指定します。

  • ID（#id）: 「個人名」のように、1ページ内で1回しか使えないユニークな名前です。Webサイトのヘッダーやフッターなど、そのページに一つしか存在しない特定の要素を指定する際に使用します。CSSでは、名前の前にシャープ（#）を付けて指定します。

この2つを適切に使い分けることが、整理された分かりやすいCSSを書くための第一歩です。

1<!-- index.html -->
2<p class="important">重要な文章</p>
3<p id="lead">リード文</p>
1/* style.css */
2/* クラスを指定（複数の要素に使える） */
3.important {
4  font-weight: bold;
5}
6
7/* IDを指定（1ページに1回だけ使う） */
8#lead {
9  font-size: 20px;
10}

おわりに

今回は、Webページの見た目を整えるCSSの基本的な書き方を解説しました。「どの要素を（セレクタ）」「何を（プロパティ）」「どう変えるか（値）」という構文が、CSSデザインの全ての土台となります。HTMLとCSSを分離して管理しやすい外部CSSの利用や、再利用できる.classとページに一つだけの#idを正しく使い分けることが、効率的なWeb制作の第一歩です。この基礎をしっかりと身につけ、さまざまなデザインの実現に挑戦してみてください。

【HTML/CSS】CSSの基本の書き方を学ぼう | いっしー@Webエンジニア