CSSとは｜書き方・読み込み方・セレクターの基本

この記事でわかること
• CSSが何を担当する言語かを理解し、HTMLに読み込んで見た目を変えられる
• 変えたい要素だけを狙って、スタイルを当てられる
• スタイルが効かないときに、原因を見つけて直せる

HTMLだけで作ったページは、ブラウザーが用意したシンプルな見た目のままです。CSSを覚えると、色や文字サイズ、余白を自由に変えられるようになります。この記事では、HTMLとはの続きとして、CSSの基礎の全体像を順番に解説します。

CSSの全体像

この記事は、CSSの役割から始めて、書き方、読み込み方、要素の選び方、優先順位、値の指定へと進みます。前のSTEPで覚えたことを次のSTEPで使うため、初めての人は目次の順に読んでください。

すべてをまとめたHTMLとCSSは、完成形のコードに載せています。やりたいことが決まっている場合は、次の表から解説箇所を探してください。

STEP1：CSSの役割を知る

まずは、CSSがどんな言語で、HTMLとどう分担しているのかを押さえます。役割がわかると、何をHTMLに書き、何をCSSに書くのか迷わなくなります。

CSSとは

CSSは「Cascading Style Sheets」の略で、HTML要素がブラウザーでどう見えるかを決める言語です。HTMLが中身と構造を担当し、CSSが見た目を担当します。

HTML自体には、見た目を整える役割はありません。CSSを使うと、主に次のようなことができます。

• 見出しやリンクの色・文字サイズを変える
• グリッドや段組みなどのレイアウトを作る
• アニメーションなどの動きを付ける

CSSの機能は、関連するものごとに「モジュール」という単位で分類されています。詳しい解説はMDN（CSS とは何か）で確認できます。

ブラウザーの既定スタイルを上書きする

CSSを書かなくても、見出しは大きく、リンクは青色で下線付きで表示されます。これは、ブラウザーに内蔵された「既定スタイル」が当たっているためです。

自分で書いたCSSは、この既定スタイルを上書きして見た目を変えます。つまりCSSは、ゼロから見た目を作るというより、既定の見た目を好みに変えていく道具です。

STEP2：CSSの書き方の基本を覚える

ここからは、CSSを書くときのルールを見ていきます。ルールの形、メモの残し方、空白の扱い、まとめ書きの順に解説します。

ルールの構成（セレクター・プロパティ・値）

CSSは「どの要素に」「どんな見た目を当てるか」を、ルールとして書いていく言語です。例えば、見出しを大きな赤い文字にするルールは次のように書きます。

h1 {               /* セレクター */
  color: red;      /* 宣言（プロパティ: 値;） */
  font-size: 2.5em;
}

プロパティごとに、使える値は決まっています。例えばcolorには色、font-sizeにはサイズを指定します。

使える値を調べたいときは、「mdn color」「mdn font-size」のように「mdn＋プロパティ名」で検索すると見つけやすいです。

コードにメモを残す（コメント）

CSSのコメントは、/*で始まり*/で終わります。HTMLのコメント（<!– –>）とは書き方が違うので注意しましょう。

/* ここからヘッダーのスタイル */
/* .special {
  color: red;
} */

1行目のように、コードの区切りや説明のメモとして使います。2〜4行目のようにルールごと囲むと、一時的に無効化（コメントアウト）できます。

半角スペースと改行のルール

余分な半角スペースや改行は、ブラウザーに無視されます。1行に1つの宣言を書くと読みやすく、あとから修正もしやすくなります。

ただし、必要な空白を消したり、不要な場所に空白を入れたりするとエラーになります。

margin: 0 auto;        /* 正しい */
margin: 0auto;         /* 無効：値と値の間の空白がない */
padding- left: 10px;   /* 無効：プロパティ名に空白がある */

値が複数あるときは、半角スペースで区切ります。プロパティ名は、空白を入れず1つの単語として書きましょう。

複数の値を1行でまとめて書く（一括指定）

padding・margin・border・background・fontなどは、複数の値を1行でまとめて指定できます。これを一括指定プロパティと呼びます。

padding: 10px 15px 15px 5px;  /* 上 / 右 / 下 / 左 */
padding: 10px 20px;           /* 上下 / 左右 */

値が4つのときは、上から時計回りの順に当てはまります。1行目は、padding-topなどの4行を1行にまとめたものと同じ意味です。

STEP3：HTMLにCSSを読み込む

書き方がわかったら、CSSをHTMLに適用します。書く場所は3通りありますが、基本は外部ファイルに書いて読み込む方法です。

外部のCSSファイルを読み込む（基本）

拡張子が「.css」のファイルを作り、HTMLのheadの中で<link>要素を使って読み込みます。最も一般的で便利な方法です。

<link rel="stylesheet" href="style.css" />  <!-- style.cssを読み込む -->

rel属性でスタイルシートであることを、href属性でファイルの場所を伝えます。1つのCSSファイルを複数のページで読み込めば、サイト全体の見た目をまとめて管理できます。

別のフォルダーにあるCSSを読み込む

CSSファイルは、HTMLと別のフォルダーに置くこともできます。その場合は、画像を表示するときと同じようにhrefのパスを調整します。

<link rel="stylesheet" href="styles/style.css" />          <!-- stylesフォルダーの中 -->
<link rel="stylesheet" href="styles/general/style.css" />  <!-- さらに下の階層 -->
<link rel="stylesheet" href="../styles/style.css" />       <!-- 1つ上の階層に戻ってから -->

「../」は、今いるフォルダーから1つ上の階層に戻るという意味です。例えば記事ページをサブフォルダーに置き、CSSを共通のフォルダーにまとめるときに使います。

style要素とstyle属性で書く方法

外部ファイルを使わず、HTMLの中に直接CSSを書く方法もあります。1つ目は、headの中の<style>要素に書く方法です。

<style>
  p {
    color: purple;
  }
</style>

2つ目は、要素のstyle属性に書く方法です。インラインスタイルと呼ばれ、その要素1つだけに効きます。

<span style="color: purple; font-weight: bold">テキスト</span>  <!-- この要素だけに効く -->

3つの書き方の使い分け

迷ったら外部ファイルを選びましょう。制約があって使えない場合だけ、style要素→style属性の順に検討します。

CSSが反映されたか確認する

実際にCSSを読み込んで、見出しの色を変えてみましょう。手順は次のとおりです。

1. index.htmlと同じフォルダーに「style.css」を作る
2. index.htmlのheadに<link rel="stylesheet" href="style.css" />を書く
3. style.cssに次のルールを書く
4. 2つのファイルを保存し、ブラウザーを再読み込みする

h1 {
  color: red;  /* 見出しを赤くする */
}

見出しが赤くなれば成功です。変わらない場合は、ファイル名やパス、入力ミスがないか確認しましょう。

STEP4：セレクターで要素を選ぶ

CSSを読み込めたら、スタイルを当てる要素を選び分けていきます。このSTEPでは、次のHTMLを例に解説します。

<h1>これは見出しです</h1>
<p>これは段落です。<em>強調</em>と<a href="#">リンク</a>があります。</p>
<ul>
  <li>1つ目のアイテム</li>
  <li class="special">2つ目のアイテム</li>
  <li><em>3つ目</em>のアイテム</li>
</ul>

要素名で選ぶ・まとめて選ぶ

STEP3のh1のように、要素名をそのまま書くセレクターを要素セレクターと呼びます。ページ内にあるその要素すべてに、同じスタイルが当たります。

複数のセレクターをカンマで区切ると、まとめて同じスタイルを当てられます。次の例では、すべての段落とリストの項目を緑色にしています。

p,
li {
  color: green;  /* 段落とリスト項目をまとめて緑にする */
}

クラスで一部の要素だけ変える

要素セレクターでは、同じ要素すべてが同じ見た目になります。一部の要素だけを変えたいときは、HTMLにclass属性を付けて、そのクラスを選びます。

HTML

<li class="special">2つ目のアイテム</li>

CSS

.special {
  color: orange;      /* 文字をオレンジにする */
  font-weight: bold;  /* 太字にする */
}

CSSでは、ピリオドの後にクラス名を書きます。同じクラスは複数の要素に付けられるので、段落の中の<span>など、別の種類の要素にも使い回せます。

場所で要素を絞り込む

セレクターを半角スペースで区切ると、「〇〇の中にある△△」を選べます。これを子孫結合子と呼びます。次の例では、リスト項目の中にある<em>だけを紫にしています。

li em {
  color: rebeccapurple;  /* liの中のemだけを紫にする */
}

段落の中にも<em>がありますが、こちらはliの中にないため変わりません。

セレクターの間に+を入れると、「〇〇の直後にある△△」を選べます（次兄弟結合子）。見出しのすぐ後の段落だけを、少し大きくしたいときに使います。

h1 + p {
  font-size: 120%;  /* h1の直後のpだけを大きくする */
}

マウスを乗せたときの見た目を変える

CSSでは、要素の「状態」ごとに見た目を変えられます。セレクターの後ろに:hoverなどを付ける書き方で、擬似クラス※1と呼びます。

a:hover {
  text-decoration: none;  /* マウスを乗せたら下線を消す */
}

リンクでよく使う状態は次の3つです。

リンクの下線を常に消すのは避けましょう。クリックできる文字だと気づきにくくなり、使いにくいページになってしまいます。

※1：擬似クラス…要素の状態（マウスが乗っている、訪問済みなど）に応じて要素を選ぶための書き方。

クラスとIDの使い分け

要素にはid属性も付けられ、CSSでは#id名で選べます。ただし、見た目を変える目的ではクラスを使うのが基本です。

IDでしか選べない場合は、p[id="header"]のように属性として指定する方法もあります。優先度が上がりすぎるのを防げます。

STEP5：スタイルの優先順位を理解する

同じ要素に、違う値のスタイルが重なることがあります。このときどちらが使われるかは、決まったルールで判断されます。「CSSを書いたのに効かない」原因の多くは、ここにあります。

後に書いたルールが優先される

CSSの「Cascading」は、スタイルが重なったときに適用するものを決める仕組みを指します。判断の基準は、弱い順に「書いた順番→セレクターの具体性（詳細度）→!important」の3つです。

セレクターの強さが同じなら、後に書いたルールが優先されます。次の例では、見出しは青になります。

h2 {
  color: red;
}
h2 {
  color: blue;  /* 後に書いたこちらが優先 */
}

具体的なセレクターが優先される（詳細度）

セレクターの強さ（詳細度）が違う場合は、書いた順番よりも詳細度が優先されます。より狭い範囲を選ぶセレクターほど、強くなります。

HTML

<h2>これは見出しです</h2>
<h2 class="main-heading">これはクラス付きの見出しです</h2>

CSS

.main-heading {
  color: red;   /* クラスの方が強いので赤になる */
}
h2 {
  color: blue;  /* 後に書いても、クラス付きの見出しには負ける */
}

上書きされるのはルール全体ではなく、重なったプロパティだけです。そのため実務では、要素セレクターで共通の見た目を決め、クラスで一部だけを変える書き方がよく使われます。

STEP4でクラスを付けたアイテムが、緑ではなくオレンジになったのも詳細度によるものです。CSSが効かないときは、より強いセレクターに上書きされていないかを確認しましょう。

!importantは最終手段にする

宣言の後ろに!importantを付けると、詳細度やstyle属性よりも優先されます。

border: none !important;  /* ほかのルールより優先される */

!importantは、本当に必要なとき以外は使わないようにしましょう。通常の優先順位が崩れるため、CSSが増えるほど原因を探すのが難しくなります。使うのは、CMSで元のCSSを編集できず、ほかに上書きする方法がない場合に限ります。

親のスタイルを引き継ぐ（継承）

親要素に設定した値の一部は、中にある子孫要素にも引き継がれます。これを継承と呼びます。

HTML

<body>
  <p>bodyの色が、中の段落にも引き継がれます。</p>
  <p>個別に指定した<span>この部分</span>だけ色が変わります。</p>
</body>

CSS

body {
  color: blue;   /* 中のすべての文字が青になる */
}
span {
  color: black;  /* 個別に指定した要素は、その値になる */
}

ただし、すべてのプロパティが継承されるわけではありません。width・margin・padding・borderなどは継承されないプロパティです。もしborderが継承されたら、中の要素すべてに枠線が付いてしまいます。

継承されるかどうかは、MDNの各プロパティのページにある「公式定義」で確認できます。

STEP6：サイズと色の指定方法を知る

最後に、値の書き方を押さえます。よく使う長さの単位と色の指定方法、そして余白の考え方の基本になる「箱」の仕組みを紹介します。

長さの単位と使い分け

長さの単位は、常に同じ大きさの「絶対単位」と、何かを基準に大きさが変わる「相対単位」に分かれます。画面表示で使う絶対単位は、ほぼpxだけです。

特に違いがわかりにくいのがemとremです。入れ子のリストで比べると、違いがはっきりします。

HTML

<ul class="ems">
  <li>1段目
    <ul>
      <li>2段目
        <ul>
          <li>3段目</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<!-- class="rems" のリストも同じ構造 -->

CSS

html {
  font-size: 16px;   /* ① */
}
.ems li {
  font-size: 1.3em;  /* ② */
}
.rems li {
  font-size: 1.3rem; /* ③ */
}

数値は引用符で囲まずに書きます。また、opacity（透明度、0〜1）のように、単位を付けない数値を使うプロパティもあります。

※2：ビューポート…ブラウザーでページが表示されている領域のこと。

色の指定方法

色は、キーワード・16進数・rgb()・hsl()のいずれかで指定するのが一般的です。次の3つは、どれも同じ色を表しています。

color: #02798b;           /* 16進数 */
color: rgb(2 121 139);    /* 赤・緑・青を0〜255で指定 */
color: hsl(188 97% 28%);  /* 色相・彩度・明度で指定 */

1つのサイトの中では、指定方法を1つに統一するのがおすすめです。なお、rgb()の透明度は指定した色だけが透けますが、opacityは要素と中身すべてが透けます。

要素は「箱」として扱われる（ボックスモデル）

CSSでは、すべての要素が四角い箱として扱われます。箱は内側から、中身・内側の余白・枠線・外側の余白の4層でできています。

HTML

<div class="box">ボックスの中身</div>

CSS

.box {
  width: 200px;           /* ① */
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
  background: lightblue;
}

見出しや段落のような要素は改行され、幅や高さの指定が効きます。一方、<a>や<span>のような文中の要素は改行されず、幅・高さ・上下のマージンが効きません。

要素のサイズや余白は、ブラウザーの開発者ツールで要素を調べると確認できます。思ったとおりの大きさになっているか、迷ったときに見てみましょう。

完成形のコード：HTMLとCSSのひな形

STEP2〜STEP5の内容をまとめると、次のようになります。index.htmlとstyle.cssを同じフォルダーに保存して、ブラウザーで開いてみてください。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="style.css" />  <!-- ① -->
  </head>
  <body>
    <h1>これは見出しです</h1>
    <p>これは段落です。<em>強調</em>と<a href="#">リンク</a>があります。</p>
    <ul>
      <li>1つ目のアイテム</li>
      <li class="special">2つ目のアイテム</li>  <!-- ② -->
      <li><em>3つ目</em>のアイテム</li>
    </ul>
  </body>
</html>

style.css

/* 要素ごとのスタイル */     /* ① */
h1 {
  color: red;                /* ② */
}
p,
li {
  color: green;              /* ③ */
}

/* 一部の要素だけのスタイル */
.special {
  color: orange;             /* ④ */
  font-weight: bold;
}
li em {
  color: rebeccapurple;      /* ⑤ */
}

/* 状態ごとのスタイル */
a:hover {
  text-decoration: none;     /* ⑥ */
}

さいごに

まとめ

CSSは、HTMLの見た目を担当する言語です。まずは次の3つを押さえれば、自分のページの見た目を思いどおりに変えられます。

• CSSは外部ファイルに書き、linkで読み込む
• 変えたい要素は、要素名とクラスを組み合わせて選ぶ
• 効かないときは、書いた順番と詳細度を確認する

慣れてきたら、完成形のコードに色や単位を足しながら、見た目の変化を試してみてください。

よくある質問

「CSS3」と今のCSSは違うもの？

CSSは以前、CSS1・CSS2.1・CSS3のように版数で呼ばれていました。しかし、CSS3やCSS4という1つの仕様は存在せず、今後も作られません。

現在はすべて単に「CSS」と呼び、機能ごとのモジュールがそれぞれレベルを持っています。書き方を調べるときは、「CSS3」にこだわらず現在のCSSとして確認すれば大丈夫です。

CSSを書いたのに反映されません

次の順に確認してみてください。

• HTMLとCSSの両方を保存し、ブラウザーを再読み込みしたか（外部のCSSファイルを読み込む（基本））
• linkのhrefに書いたパスが、CSSファイルの場所と合っているか（別のフォルダーにあるCSSを読み込む）
• より強いセレクターに上書きされていないか（具体的なセレクターが優先される（詳細度））

クラスとIDはどちらを使えばいい？

見た目を変える目的なら、クラスを使います。IDは優先度が非常に高く、ほかのスタイルで上書きしにくくなるためです。

クラスとIDの違いは「クラスとIDの使い分け」で解説しています。

!importantを付ければすぐ直せるのでは？

一時的には直りますが、おすすめしません。通常の優先順位が崩れ、あとから別のスタイルを当てたいときに原因を探すのが難しくなります。

使ってよい場面は「!importantは最終手段にする」で解説しています。

emとremはどちらを使えばいい？

ページ全体の基準に揃えたいならrem、親の文字サイズに連動させたいならemを選びます。emは入れ子になると大きさが積み重なるため、意図しないサイズになりやすい点に注意しましょう。

ほかの単位との違いは「長さの単位と使い分け」で解説しています。