CSSとは？HTMLとの違いと基本の書き方・セレクタ・優先順位を初心者向けに解説

2025.07.14

CSSとは？HTMLとの違いと基本の書き方・セレクタ・優先順位を初心者向けに解説

Webページの文字の色や大きさ、余白、レイアウトなど、見た目を決めているのがCSSです。HTMLと並んで、Web制作で最初に覚える言語の1つです。

この記事では、CSSとは何か、HTMLとの違いから、実際にCSSを書いて表示を変えるまでの手順、基本の書き方とルール、セレクタの種類、思いどおりに効かない原因になりやすい「優先順位」のしくみまでを、初心者向けに解説します。

CSSとは

CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、Webページの見た目（スタイル）を指定するための言語です。「スタイルシート」と呼ばれることもあります。

HTMLとCSSの役割の違い

Webページは、HTMLとCSSの組み合わせでできています。HTMLが「何が書かれているか（文書の構造）」を、CSSが「どう見せるか（見た目）」を受け持ちます。

HTMLCSS
役割文書の構造と意味を決める見た目を決める
指定する内容の例ここは見出し、ここは段落、ここはリンク見出しを青く大きく、段落の行間を広く
ファイルの拡張子.html.css

見た目をCSSに分けておくと、CSSファイルを1つ書き換えるだけで、サイト全体のデザインをまとめて変えられます。HTMLの側は、内容と構造に集中して書けます。

CSSでできること

  • 文字の色、大きさ、太さ、フォントを変える
  • 背景に色や画像を付ける、枠線や角丸、影を付ける
  • 余白を調整し、要素を横に並べたり中央に寄せたりする
  • スマートフォンとパソコンで、レイアウトを切り替える
  • マウスを重ねたときの変化や、アニメーションを付ける

はじめてのCSS：表示を変えてみる

実際にCSSを書いて、ブラウザで表示が変わるところを確かめてみましょう。パソコンに同じフォルダを作り、次の2つのファイルを保存します。メモ帳などのテキストエディタで作れます（文字コードはUTF-8で保存してください）。

1. index.html

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのCSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>はじめてのCSS</h1>
  <p class="lead">CSSで見た目を変えています。</p>
</body>
</html>

2. style.css

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

.lead {
  padding: 12px;
  background-color: #f3f4f5;
}

index.html をブラウザで開くと、見出しが青く大きくなり、段落に灰色の背景が付きます。HTMLの <link> の行で、style.css を読み込んでいるためです。style.css の色や数字を書き換えて保存し、ブラウザを再読み込みすると、表示が変わることも確かめてみてください。

CSSの基本の書き方とルール

CSSは、「どの要素に（セレクタ）」「何を（プロパティ）」「どうするか（値）」の組み合わせで書きます。

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

たとえば h1 { color: #1e6fd9; } は、「h1要素の文字色（color）を #1e6fd9 にする」という意味です。{ } の中の「プロパティ: 値;」の1組を「宣言」と呼び、1つのセレクタにいくつでも書けます。

コメントを書く

/* と */ で囲んだ部分はコメントになり、表示には影響しません。何のための指定かをメモしておくと、後から読み返すときに役立ちます。

CSS
/* ヘッダーの背景 */
.header {
  background-color: #ffffff;
}

初心者が間違えやすいルール

  • 「;」を付け忘れない：宣言の区切りの ; を忘れると、その宣言と次の宣言の両方が効かなくなります。最後の宣言の ; は省略できますが、付けておくと後から宣言を足すときに間違えません。
  • 全角の文字を混ぜない：全角スペースや全角の「：」「；」は、CSSの記号として認識されず、その指定が無視されます。見た目では気づきにくいので注意してください。
  • 数字と単位の間にスペースを入れない：16px は正しく、16 px は無視されます。
  • クラス名の大文字・小文字は区別される：CSSに .Lead と書くと、HTMLの class="lead" には効きません。

CSSを書く3つの場所

書き方書く場所使いどころ
外部CSS別の .css ファイルに書き、HTMLから <link> で読み込む通常はこれを使う。複数のページで同じCSSを使える
内部CSSHTMLの <style> の中に書くそのページだけに使うCSS、試しに書くとき
インラインCSSHTMLのタグの style 属性に書くメールのHTMLなど、ほかの方法が使えないとき

それぞれの書き方と使い分けは「外部CSS・内部CSS・インラインCSSの違いと使い分け」で詳しく解説しています。

セレクタの基本

セレクタは、CSSを適用する要素を選ぶための書き方です。よく使うものは次のとおりです。

セレクタ書き方の例選ばれる要素
要素（タイプ）セレクタpすべての p 要素
クラスセレクタ.leadclass="lead" が付いた要素
IDセレクタ#headerid="header" が付いた要素（1ページに1つ）
複数指定h1, h2h1 と h2 の両方
子孫セレクタ.nav a.nav の中にある a 要素すべて
子セレクタ.nav > a.nav の直下にある a 要素だけ
疑似クラスa:hoverマウスを重ねている a 要素
全称セレクタ*すべての要素

次の例は、ナビゲーションの中のリンクを白くし、マウスを重ねたときに下線を付けます。

CSS
.nav a {
  color: #ffffff;
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

デザインを付けるときは、主にクラスセレクタを使います。同じクラスを複数の要素に付けられるので、使い回しがしやすいためです。

カスケードと優先順位のしくみ

CSSの名前にある「カスケード（cascade）」は、「段階的に流れ落ちる」という意味です。1つの要素に複数の指定が当てはまったとき、どれを使うかを順番に決めていくしくみを指します。「CSSが効かない」と感じる原因の多くは、このしくみにあります。

1. 後に書いたものが優先される

同じ強さのセレクタで同じプロパティを指定すると、後に書いたほうが使われます。次の例では、文字は赤になります。

CSS
.lead {
  color: blue;
}
.lead {
  color: red; /* こちらが使われる */
}

2. セレクタが強いほうが優先される（詳細度）

セレクタには強さ（詳細度）があり、強いほうが、書いた順番に関係なく優先されます。強さは「IDの数 → クラス・疑似クラスの数 → 要素の数」の順に比べます。

強さ例
強いHTMLの style 属性に直接書いた指定
↑IDセレクタ（#header）
↑クラス・疑似クラス（.lead、:hover）
弱い要素セレクタ（p、a）

次の例では、要素セレクタの p を後に書いていますが、クラスセレクタのほうが強いので、class="lead" の段落は青になります。

CSS
.lead {
  color: blue; /* こちらが使われる */
}
p {
  color: red;
}

セレクタを重ねると、その分だけ強くなります。.nav a（クラス1つ＋要素1つ）は、a（要素1つ）より強くなります。「後に書いたのに効かない」ときは、前に書いたセレクタのほうが強くないか確認してください。

3. !important は最後の手段にする

値の後に !important を付けると、セレクタの強さに関係なく、その指定が優先されます。

CSS
.lead {
  color: blue !important;
}

便利に見えますが、多用すると、後から上書きするのにさらに !important が必要になり、どの指定が効いているのか分からなくなります。まずはセレクタの強さや書く順番で解決し、プラグインのCSSを上書きするときなど、ほかに方法がない場合だけ使いましょう。

4. 親の指定が子に引き継がれる（継承）

文字の色（color）やフォント（font-size、font-family）など、文字に関するプロパティの多くは、親要素に指定すると中の子要素にも引き継がれます。一方、枠線（border）や余白（margin、padding）、背景（background）は引き継がれません。

CSS
/* body に指定すると、ページ全体の文字に引き継がれる */
body {
  color: #333333;
  font-family: sans-serif;
}

サイト全体の文字の色やフォントは、body にまとめて指定しておくのが基本です。

よく使うCSSプロパティ

最初に覚えておきたいプロパティは次のとおりです。

  • color：文字の色
  • font-size：文字の大きさ
  • background-color：背景の色
  • margin：要素の外側の余白
  • padding：要素の内側の余白
  • border：枠線
  • width / height：幅と高さ
  • display：表示のしかた（横に並べる、非表示にするなど）

用途別のプロパティの一覧と記述例は「CSSプロパティ一覧」にまとめています。

次に学ぶこと

基本の書き方が分かったら、次はレイアウトとスマートフォン対応を学ぶのがおすすめです。

まとめ

  • CSSはWebページの見た目を指定する言語で、HTMLが構造、CSSが見た目を受け持つ
  • 「セレクタ { プロパティ: 値; }」の形で書き、通常は外部のCSSファイルに書いて読み込む
  • 「;」の付け忘れや全角の文字が混ざると、指定が無視される
  • デザインには主にクラスセレクタを使う
  • 同じ強さなら後に書いたものが、強さが違えば強いセレクタが優先される。!important は最後の手段にする

CSSは、書いて表示を確かめることを繰り返すと、早く身に付きます。上の「はじめてのCSS」のファイルを書き換えながら、いろいろなプロパティを試してみてください。

関連記事

PAGE TOP