CSSの基本的な書き方とは？セレクタ・プロパティ・値を初心者向けに解説

CSSを書こうとして、「セレクタ・プロパティ・値の違いが分からない」「波括弧やコロンをどこへ置くのか迷う」と感じていませんか。

CSSの基本は、セレクターで対象を選び、波括弧の中へ「プロパティ: 値;」を書くことです。一つのルールを「どこの・何を・どのように変える」と読めるようになると、コードの意味を追いやすくなります。

この記事では、CSSの最小構文から、HTMLへの適用方法、最初のルールを反映する手順、反映されないときの確認順までを初心者向けに解説します。HTMLとCSSの役割そのものを先に整理したい方は、HTMLとCSSの役割の違いも参考にしてください。

CSSの基本構文｜セレクター・プロパティ・値で書く

CSSは、次の形を一つのルールとして書きます。

「セレクタ」と「セレクター」は表記が異なるだけで、同じ意味です。本記事では、本文中の表記を「セレクター」に統一します。

.notice {
  color: #536048;
  font-size: 24px;
}

このコードは、「noticeというクラスが付いた要素の、文字色を#536048にし、文字サイズを24pxにする」という意味です。24pxは変化を確かめるための練習用の値で、どの文章にも同じサイズを勧めるものではありません。

CSSでは、プロパティと値の組を「宣言」と呼びます。セレクターと、波括弧で囲まれた宣言の集まりを組み合わせると、一つのルールになります。詳しい用語と構造は、MDNのCSS構文入門でも確認できます。

セレクターは「どこに」適用するか

セレクターは、スタイルを適用するHTML要素を選ぶ部分です。先ほどの例では、波括弧の前にある.noticeがセレクターです。

先頭のピリオドは、HTMLのclass属性を使って選ぶことを表します。HTMLにclass="notice"が付いた要素が、.noticeの対象です。

プロパティは「何を」変えるか

プロパティは、変更したい見た目の種類を表します。colorは文字色、font-sizeは文字サイズを指定するプロパティです。

プロパティは波括弧の中に書き、直後へコロンを置きます。プロパティ名だけでは、どの色・大きさにするかが決まらないため、値と組み合わせて使います。

値は「どのように」変えるか

値は、プロパティをどの状態にするかを表します。color: #536048;では#536048、font-size: 24px;では24pxが値です。

使用できる値はプロパティごとに異なります。たとえばcolorには色、font-sizeには長さやキーワードなど、そのプロパティが受け付ける形式の値を指定します。使えない値を書いた宣言はブラウザーに無視されるため、プロパティ名と値はセットで確認します。

波括弧・コロン・セミコロンの役割

CSSの記号には、それぞれ役割があります。

• { }：セレクターに適用する宣言をまとめる
• :：プロパティと値を区切る
• ;：一つの宣言の終わりを示す

最後の宣言に付けるセミコロンは省略できますが、初心者のうちは毎行付けるのがおすすめです。あとから宣言を追加しても、区切りの付け忘れを防ぎやすくなります。

宣言の前のインデントや宣言同士の改行、コロンの前後の半角スペースは、読みやすくするために調整できます。ただし、どこへでも空白を入れてよいわけではありません。

たとえば24pxは数字と単位を続けて書きます。24 pxでは無効です。また、セレクター同士の間に空白を入れると、選ぶ対象が変わることがあります。まずは例の.noticeを一つのまとまりとして入力し、宣言ごとに改行しましょう。

最初に覚えるセレクターは要素とクラスの2種類

セレクターには多くの種類がありますが、最初は要素セレクターとクラスセレクターの2つから始めれば十分です。その他のセレクターや、複数のCSSがあるときの優先順位は、基本構文を使えるようになってから学べば大丈夫です。

要素セレクターは同じ要素をまとめて選ぶ

要素セレクターは、HTMLの要素名をそのまま書きます。次のCSSは、ページ内にあるすべてのp要素の文字色を変更します。

p {
  color: #536048;
}

同じ種類の要素をまとめて同じ見た目にしたいときに分かりやすい方法です。一方で、一部のp要素だけを変えたい場合には向きません。

クラスセレクターは必要な部分だけを選ぶ

一部の要素だけを選ぶときは、HTMLへclass属性を付け、CSSではクラス名の前にピリオドを書きます。

<p class="notice">CSSの練習を始めます。</p>

.notice {
  color: #536048;
}

HTML側はclass="notice"、CSS側は.noticeです。HTMLのclass属性値にはピリオドを書かず、CSSのセレクター側だけに付ける点を区別してください。

より多くの種類を調べるときは、MDNの基本的なCSSセレクターを参照できます。本記事では、最初の一つのルールを書くために必要な2種類へ絞ります。

CSSをHTMLに適用する3つの方法

CSSをHTMLへ適用する方法は、主に外部スタイルシート、内部スタイルシート、インラインスタイルの3つです。

外部スタイルシートはCSSを別ファイルに書く

外部スタイルシートでは、style.cssなどの独立したファイルへCSSを書き、HTMLのhead要素から読み込みます。

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

HTMLの内容とCSSの見た目を分けて管理でき、同じCSSファイルを複数のページから読み込めます。基本を練習するときは、まずこの方法を選ぶとファイルの役割が分かりやすくなります。

内部スタイルシートはhead内に書く

内部スタイルシートでは、HTMLのhead要素内にstyle要素を置き、その中へCSSを書きます。

<style>
  p {
    color: #536048;
  }
</style>

一つのHTMLファイルだけで試せるため、短い動作確認には便利です。ただし、ページが増えると同じCSSを各HTMLへ書くことになり、修正箇所も増えます。

インラインスタイルは要素へ直接書く

インラインスタイルでは、HTML要素のstyle属性へ宣言を書きます。

<p style="color: #536048;">文字色を変更します。</p>

この書き方ではセレクターと波括弧を使いません。対象はstyle属性を書いた要素だけです。HTMLと見た目の指定が混ざり、同じ変更を繰り返しにくいため、通常の学習では外部スタイルシートから始めましょう。

3つの方法の詳しい例は、MDNのCSSを始めるでも確認できます。

CSSを書いて反映を確認する手順

ここでは、index.htmlとstyle.cssを同じフォルダーへ置き、クラスセレクターで文字色と文字サイズを変更します。HTML文書の全体構造に不安がある場合は、HTMLの基本構造を先に確認してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>CSSの練習</h1>
  <p class="notice">文字色と大きさを変更します。</p>
</body>
</html>

.notice {
  color: #536048;
  font-size: 24px;
}

変更が見えないときは、コードを増やす前に、次の順番で原因を一つずつ切り分けます。

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

CSSが反映されないときは、次の順番で確認すると原因を絞りやすくなります。

1. 保存・拡張子：style.cssを保存したか、拡張子が.cssになっているか
2. 再読み込み：ブラウザーを再読み込みして最新ファイルを表示しているか
3. CSSの読み込み先：link要素のhrefが実際のファイル名・場所と一致しているか
4. クラス名：HTMLのclass="notice"とCSSの.noticeのつづりが一致しているか
5. 記号：波括弧・コロン・セミコロンが半角で正しい位置にあるか
6. プロパティと値：プロパティ名と値が、その組み合わせで使用できるか

上から一つずつ確認し、直したら保存と再読み込みを行います。複数箇所を一度に変更しないことが、原因を見失わないコツです。

たとえばHTMLがclass="notice"なのにCSSが.notice-textなら、セレクターが一致しないためルールは適用されません。また、color #536048;のようにコロンがない宣言も無効です。

複数のCSSが同じ要素を指定している場合は、どのルールが優先されるかも影響します。これは基本構文の次に学ぶ内容です。最初の練習では、保存、再読み込み、ファイルの接続、セレクターの一致、記号、プロパティと値の順に確認すれば、多くの入力ミスを切り分けられます。

CSSの基本的な書き方についてよくある質問

最後の宣言にもセミコロンは必要ですか？

最後の宣言のセミコロンは省略できますが、毎回付けるのがおすすめです。あとから宣言を追加したときの区切り忘れを防ぎ、すべての行を同じ形で読めます。

CSSのプロパティと値は暗記する必要がありますか？

すべてを暗記する必要はありません。まずはcolor、font-size、background-color、margin、paddingなど、使う頻度の高いものをコードで試し、必要になったときに公式リファレンスで確認しましょう。

セレクターとクラスは同じものですか？

同じではありません。セレクターはCSSの適用対象を選ぶ仕組み全体の名前で、クラスセレクターはその一種類です。.noticeのように、クラス名の前へピリオドを付けて書きます。

style.cssにも<style>タグを書きますか？

外部のstyle.cssには書きません。CSSルールだけを保存し、HTML側のlink要素から読み込みます。<style>タグは、HTML内に内部スタイルシートを書くときに使います。

まとめ｜CSSは「どこ・何・どのように」で読む

CSSの基本構文は「セレクター { プロパティ: 値; }」です。セレクターで対象を選び、プロパティで変更する種類を決め、値で具体的な状態を指定します。

• 同じ要素をまとめて選ぶなら要素セレクター
• 必要な部分だけを選ぶならクラスセレクター
• 最初の練習ではHTMLとCSSを別ファイルにする
• 反映されないときは保存、再読み込み、接続、セレクター、記号、値の順に確認する

まずはindex.htmlとstyle.cssを同じフォルダーへ作り、この記事の.noticeルールをそのまま試してみてください。文字色が変わる一つの成功が、次のプロパティやセレクターを学ぶ土台になります。

目的別に次の記事を選ぶ

どの要素を選ぶかを練習したい方は、要素・class・idの違いを確認しましょう。

あわせて読みたい

CSSセレクタとは？要素・class・idの違いと書き方を初心者向けに解説 CSSセレクタの役割と、要素・class・idの違い・書き方・使い分けを初心者向けに解説。複数指定と反映されないときの確認順もコード例で学べます。

文字の見た目をさらに調整したい方は、色・大きさ・太さの指定へ進んでください。

あわせて読みたい

CSSで文字の色・大きさ・太さを変える方法｜color・font-size・font-weightを初心者向けに解説 CSSで文字の色・大きさ・太さを変える3プロパティを初心者向けに解説。pxとrem、400と700、組み合わせ方、反映されないときの確認順まで学べます。

CSSの読み込み先で迷う方は、ファイルの場所と相対パスの読み方を確認しましょう。

あわせて読みたい

HTMLの相対パスと絶対パスの違いとは？画像・リンクの指定方法を初心者向けに解説 HTMLの相対パス・絶対パス・ルート相対パスの違いと、画像・リンクでの指定方法を初心者向けに解説。表示されないときの確認順も紹介します。