WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

CSSの基本ルール｜書き方・優先順位・反映されない原因を初心者向けに解説

CSSのセレクター、波括弧、宣言、セミコロンからWebページが完成する流れ

CSSを書き始めたとき、「コロンとセミコロンはどこに書く？」「同じ場所へ別の色を書いたら、どちらが反映される？」と迷いますよね。

CSSには、文法上のルールと、複数の指定が重なったときに適用結果を決めるルールがあります。この2つを理解すると、スタイルが反映されない原因を見つけやすくなります。

この記事では、セレクター・波括弧・プロパティ・値の基本構文から、カスケード、詳細度、継承、よくある記述ミスまで初心者向けに解説します。コピーして試せるコードを使い、変更前から結果まで順番に確認しましょう。

CSSの基本ルールは「対象」と「変更内容」を書くこと

CSSの基本単位は「ルールセット」です。どのHTML要素を変えるかをセレクターで選び、波括弧の中へプロパティと値の組を記述します。

.message {
  color: #1d4ed8;
  font-size: 1.125rem;
}
  • .message：対象を選ぶセレクター
  • { }：宣言をまとめる宣言ブロック
  • color：変更する項目を示すプロパティ
  • #1d4ed8：具体的な設定を示す値
  • :：プロパティと値を区切るコロン
  • ;：宣言の終わりを示すセミコロン

color: #1d4ed8;のようなプロパティと値の組を「宣言」と呼びます。最後の宣言ではセミコロンを省略できる場合もありますが、後から行を追加しやすくするため毎回書く習慣を付けましょう。

CSSの書き方を実例で練習｜外部ファイルの作成・パス・反映確認まで解説

CSSを書く場所は外部ファイルが基本

CSSはHTMLへ直接書くこともできますが、学習やWeb制作ではstyle.cssのような外部ファイルへ分ける方法が基本です。複数ページで再利用でき、HTMLの構造とデザインを別々に管理できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>CSSの練習</title>
</head>
<body>
  <p class="message">CSSを練習中です</p>
</body>
</html>

<link>要素は<head>内に置きます。HTMLとCSSが同じフォルダにある例なので、href="style.css"と指定しました。

CSSの記号と改行のルール

コロンとセミコロンを使い分ける

次のCSSは、コロンを書く場所にセミコロンを書いているため無効です。

/* 間違い */
.message {
  color; #1d4ed8;
}

プロパティと値の間をコロンへ直すと、文字色が反映されます。

/* 正しい書き方 */
.message {
  color: #1d4ed8;
}

ブラウザは無効な宣言を見つけると、その宣言を無視して残りのCSSの解析を続けます。画面全体が壊れない代わりに、入力ミスに気付きにくいことがあるので注意してください。

波括弧を必ず閉じる

閉じる波括弧}が抜けると、その後のルールまで正しく読み取れないことがあります。開いた波括弧と閉じた波括弧を対応させましょう。

改行と空白は読みやすさのために使う

多くの空白や改行はブラウザの解析結果に影響しません。ただし、一行に詰め込まず、セレクターの後で波括弧を開き、宣言を一行ずつ書くとミスを見つけやすくなります。

コメントはスラッシュとアスタリスクで囲む

CSSのコメントは/*から*/までです。HTMLの<!-- -->やJavaScriptの//とは書き方が異なります。

/* カード全体の余白と枠線 */
.card {
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
}

コメントには「青にする」のようにコードを読めば分かる内容ではなく、「ブランドカラーを使う」「タップ領域を確保する」など理由を書くと役立ちます。

セレクターを正しく指定するルール

HTMLタグ名を直接指定する要素型セレクター、ピリオドで始めるクラスセレクター、シャープで始めるIDセレクターでは記号が異なります。

<main id="main">
  <h1 class="page-title">CSSの基本</h1>
  <p>セレクターを練習します。</p>
</main>
p {
  line-height: 1.8;
}

.page-title {
  color: #0f172a;
}

#main {
  max-width: 72rem;
  margin-inline: auto;
}

同じデザインを再利用する部品にはクラスを使うと管理しやすくなります。IDは同じページ内で一意にし、CSSの装飾では詳細度が高くなる点にも注意してください。

複数のセレクターへ同じ宣言を適用する場合は、カンマで区切ります。

h1,
h2,
h3 {
  line-height: 1.4;
}

セレクターリストのどれか一つが無効だと、ルール全体が使われない場合があります。カンマ区切りの各セレクターが正しいか確認しましょう。

CSSタグ一覧｜HTMLタグ・セレクター・プロパティの違いを初心者向けに解説

同じ要素に複数のCSSが当たるときの優先ルール

同じ要素の同じプロパティへ異なる値が指定されると、ブラウザはカスケードという仕組みで適用する宣言を決めます。初心者は、まず次の3点を順番に確認してください。

  1. そのセレクターが対象の要素に一致しているか
  2. どのセレクターの詳細度が高いか
  3. 詳細度が同じなら、どちらが後に書かれているか
複数のCSSルールから適用する宣言を選び子要素へ一部を継承する流れの図
同じ要素へ複数のルールが当たる場合、カスケード・詳細度・記述順などで適用結果が決まります。

上の図は、複数の候補から適用するルールが選ばれ、その結果の一部が子要素へ引き継がれる流れを表しています。

詳細度が同じなら後に書いた値が優先される

.message {
  color: #dc2626;
}

.message {
  color: #2563eb;
}

どちらも同じクラスセレクターなので、後に書いた青色が適用されます。単に「下にあるCSSが強い」のではなく、同じ条件の中で記述順が比較される点が重要です。

クラスは要素型より詳細度が高い

.message {
  color: #dc2626;
}

p {
  color: #2563eb;
}

pが後にあっても、クラスセレクター.messageの詳細度が高いため赤色が適用されます。要素型よりクラス、クラスよりIDのほうが詳細度は高くなります。

!importantを付けると通常のカスケードを上書きできますが、後から修正しにくくなります。まずはセレクターと記述順を整理し、本当に必要な場面以外では使わないようにしましょう。

親要素から子要素へ受け継がれる継承ルール

一部のプロパティは、親要素へ指定すると子孫要素にも引き継がれます。たとえばcolorやfont-familyは継承されるため、ページ全体の基本値をbodyへまとめて指定できます。

body {
  color: #334155;
  font-family: system-ui, sans-serif;
  line-height: 1.8;
}

一方、margin、padding、border、widthなどは通常継承されません。すべてのプロパティが引き継がれるわけではないため、MDNの各プロパティページで「継承」の項目を確認できます。

CSSを整理して書く実践ルール

クラス名は役割が分かる名前にする

.red-textのような現在の見た目だけを表す名前は、デザイン変更で意味がずれることがあります。.error-messageや.article-cardのように役割が分かる名前にしましょう。

基本・レイアウト・部品・調整の順にまとめる

小さなサイトなら、全体の基本スタイル、ページのレイアウト、ボタンやカードなどの部品、メディアクエリの順に並べると探しやすくなります。チームでは既存のルールへ合わせることが最優先です。

スマートフォンから確認する

幅を固定すると、狭い画面ではみ出すことがあります。width: 100%;とmax-widthを組み合わせ、画像にはmax-width: 100%;を指定すると基本的な崩れを防ぎやすくなります。

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

文字を極端に小さくしたり、リンクの下線やフォーカス枠を理由なく消したりしないことも大切です。見た目だけでなく、読みやすさと操作しやすさを一緒に確認してください。

CSSコード一覧｜初心者がよく使うプロパティを目的別にサンプル付きで解説

CSSが反映されないときの確認手順

  1. HTMLの<link>からCSSファイルを正しく読み込めているか
  2. セレクターが対象要素のタグ名・クラス名・IDと一致しているか
  3. コロン、セミコロン、波括弧の書き方に誤りがないか
  4. プロパティ名と値が正しいか
  5. 別のルールに詳細度や記述順で上書きされていないか
  6. ブラウザの開発者ツールで、無効な宣言や上書きされた宣言を確認する

一度に多くのコードを直すのではなく、最小のHTMLとCSSで一つずつ確認すると原因を絞れます。変更後はパソコンだけでなく、スマートフォン幅やキーボード操作でも表示を試しましょう。

CSSとは？知識ゼロの初心者向けに役割・書き方・始め方を解説

CSSのルールを公式情報で調べる

CSSの構文とエラー時の扱いはMDNのCSS構文入門とCSSエラー処理で確認できます。優先順位で迷ったときはカスケード・詳細度・継承の解説も役立ちます。

プロパティや値は更新・追加されるため、すべてを暗記する必要はありません。目的のプロパティを調べ、ブラウザの対応状況と正しい値を確認して使いましょう。

まとめ

CSSは、セレクターで対象を選び、波括弧の中へプロパティ: 値;の形式で宣言を書きます。コロン、セミコロン、波括弧の役割を区別することが最初のルールです。

  • CSSは外部ファイルへ分け、HTMLの<head>から読み込む
  • クラスはピリオド、IDはシャープを付けて指定する
  • 競合時はカスケード・詳細度・記述順で適用結果が決まる
  • 文字色など一部のプロパティは親から子へ継承される
  • 反映されないときは、読み込み・セレクター・構文・上書きを順番に確認する

最初は記号を一つずつ確認し、慣れてきたら優先順位と継承を意識してください。ルールを理解しておくと、CSSを増やしても落ち着いて修正できるようになります。