【HTML＋CSS初心者講座02】CSSの基礎を0から学ぼう

この記事はHTML入門の続きです。CSSを理解するにはHTMLの基礎知識が必要になります。まだHTMLを学んでいない方は、先に「HTML入門：書き方の基本とタグの使い方」をご覧ください。

1. CSSとは？

CSS（シーエスエス）とは、ウェブページのデザインやレイアウトなどの見栄えを変えるためのコンピュータ言語です。「スタイルシート」とも呼ばれます。

1-1. CSSを使わないと…

CSSを使わずHTMLだけでウェブページを作ると、文字と画像が上から下に並ぶだけの単調なページになります。HTMLはあくまで土台を作るものであり、デザインはCSSの仕事です。

状態	見た目
HTML のみ	文字と画像が縦に並ぶだけの白黒の単調なページ
HTML + CSS	色・レイアウト・装飾が整った見栄えの良いページ

1-2. CSSでできること

CSSを使うと、HTMLで作った土台に対してさまざまなデザインを加えることができます。

HTMLコード

<p>これは例文です。</p>

CSSなし（デフォルト）

これは例文です。

CSSコード

p {
  color: orange;
  font-size: 20px;
}

CSS適用後

これは例文です。

このようにCSSで色や文字サイズなど、様々なデザイン指定ができます。

2. CSSはどこに書くの？

CSSを書く場所は、大きく3つのパターンがあります。

方法	書く場所	特徴
① styleタグ	HTMLファイルの `<head>` 内	手軽。1ファイルで完結する
② 外部CSSファイル	別の `.css` ファイル	複数ページに一括適用できる。本番推奨
③ インラインCSS	タグの `style` 属性	1要素だけ変えたいときに使う

💡 WordPressではテーマの「追加CSS」や外部CSSファイルを使う方法が一般的です。

2-1. styleタグを使ってCSSを書いてみよう（練習）

まずは最もわかりやすい「styleタグ」の方法で練習しましょう。

1

テキストエディタを開く

VSCode や Sublime Text などのテキストエディタを起動します。

HTMLファイルを作る

以下のサンプルコードをコピーして貼り付けましょう。

HTMLコード（練習用）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS練習</title>
</head>
<body>
  <div id="headline">
    <h1>CSS入門</h1>
    <p>これは段落です。</p>
  </div>
  <div class="main">
    <h2>これは見出しです。</h2>
    <p>これは<span class="light">例</span>です。</p>
    <p><a href="https://example.com/">ホームへ</a> 戻ります。</p>
  </div>
</body>
</html>

3

ファイルを .html で保存してブラウザにドラッグ

この時点ではCSSなしの状態でページが表示されます。

保存 Windows：Ctrl + S
保存 Mac：⌘ + S
4
<head> 内に <style> タグを追加する

</head> の直前に <style></style> と書き、その中にCSSを書いていきます。
styleタグを追加した例
```
<head>
  <meta charset="UTF-8">
  <title>CSS練習</title>
  <style>
    body {
      color: gray;
    }
  </style>
</head>
```
5

上書き保存してブラウザを再読み込み

テキスト全体の文字色がグレーになれば成功です！

再読み込み Windows：F5
再読み込み Mac：⌘ + R

✅ これで「HTMLファイルの中にCSSを書く」方法が使えるようになりました！

3. CSSの書き方の基本

3-1. CSSの基本文法

CSSの書き方は以下の形に決まっています。

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

どこの

何を・どのように

用語	役割	例
セレクタ	デザインを変える対象（どこの）	`p` / `.class名` / `#id名`
プロパティ	何を変えるか	`color` / `font-size` / `background`
値	どのように変えるか	`red` / `20px` / `#FFC778`

3-2. 書き方のルール

基本の書き方

p {
  color: gray;
}

プロパティと値は :（コロン） でつなぐ
プロパティ+値のセットの末尾には ;（セミコロン） を書く
複数のプロパティはセミコロンで区切って続けて書ける

複数プロパティの例

p {
  color: orange;
  font-size: 20px;
  text-align: center;
}

3-3. スペースや改行はOK、全角スペースはNG

CSSではコードの間に半角スペース・Tab・改行を自由に入れても問題ありません。見やすいように整えながら書きましょう。

⚠️ 全角スペースは絶対に使わないでください。CSSが正しく動作しなくなります。

4. セレクタの基本的な書き方

セレクタで「どの部分のデザインを変えるか」を指定します。よく使う5パターンを覚えましょう。

4-1. タグ名で指定

タグ名
{ プロパティ: 値; }

タグ名をそのまま書くと、そのタグ全てにデザインが適用されます。

CSSコード

p {
  color: orange;
}

表示結果

pタグの文字がオレンジになります。

こちらのpタグも同様に変わります。

💡 リンクテキストの色を変えたい場合は a { color: orange; } のように a タグを指定します。

4-2. id名で指定

#id名
{ プロパティ: 値; }

id名の前に # をつけて指定します。

HTMLコード

<div id="headline">
  <h1>CSS入門</h1>
  <p>段落テキスト</p>
</div>

CSSコード

#headline {
  color: orange;
}

表示結果

CSS入門

段落テキスト

4-3. class名で指定

.class名
{ プロパティ: 値; }

class名の前に .（ドット） をつけて指定します。

HTMLコード

<div class="main">
  <h2>見出しです。</h2>
  <p>テキストです。</p>
</div>

CSSコード

.main {
  color: orange;
}

表示結果

見出しです。

テキストです。

4-4. 複数の適用先を指定

◯◯, ◯◯, ◯◯
{ プロパティ: 値; }

同じデザインを複数の場所に適用したいとき、セレクタを ,（カンマ） で区切って並べます。

CSSコード（h2とid=”headline”をまとめて指定）

#headline, h2 {
  color: orange;
}

表示結果

CSS入門（id=”headline”）

段落テキスト（id=”headline”内）

これは見出しです。（h2）

こちらは通常のpタグ（色は変わらない）

4-5. 子孫セレクタ（絞り込み指定）

◯◯ ◯◯
{ プロパティ: 値; }

半角スペースで区切る

「◯◯の中にある◯◯にだけ適用」という絞り込み指定です。タグ・class・id名を 半角スペース で区切って並べます。

CSSコード

/* .mainの中のpの中のspanだけ */
.main p span {
  color: orange;
}

表示結果

これは例です。（spanだけ変わる）

こちらは通常テキスト（変わらない）

📌 この5つのセレクタを使いこなせれば、ほとんどの場面に対応できます。

5. プロパティと値の基本

代表的なプロパティを実例とともに覚えましょう。

5-1. 文字の大きさ（font-size）

セレクタ
{ font-size: ◯◯px または ◯◯em; }

単位	意味	おすすめ
`px`	ピクセルで指定（絶対値）	本文：15〜18px
`em`	現在の文字サイズに対する倍率	親要素が16pxなら 1.2em = 19.2px

HTMLコード

<p>初期設定のサイズ</p>
<p class="px">20pxにした場合</p>
<p class="em">1.5emにした場合</p>

CSSコード

.px { font-size: 20px; }
.em { font-size: 1.5em; }

表示結果

初期設定のサイズ

20pxにした場合

1.5emにした場合

5-2. 文字の色（color）

セレクタ
{ color: 色名またはカラーコード; }

値の書き方	例
色名（英語）	`red` / `blue` / `green` / `black` / `gray`
カラーコード（# + 6桁）	`#FF0000`（赤）/ `#FFFFFF`（白）/ `#FFC778`

CSSコード

#ex1 { color: green;   }
#ex2 { color: #FFC778; }
#ex3 { color: #f89174; }

表示結果

greenの文字

#FFC778の文字

#f89174の文字

5-3. 文字の配置（text-align）

セレクタ
{ text-align: left / center / right; }

CSSコード

.center { text-align: center; }
.right  { text-align: right;  }

表示結果

左寄せ（デフォルト）

中央寄せ

右寄せ

💡 ページ全体を中央揃えにしたい場合は body { text-align: center; } と指定しましょう。

5-4. 背景色（background-color）

セレクタ
{ background-color: 色名またはカラーコード; }

値の書き方は color と同じです。background-color は background と省略しても同じ動作をします。

CSSコード

/* ページ全体の背景色 */
body {
  background-color: #fffbf4;
}

/* 一部の背景色 */
.main {
  background-color: #FFC778;
}

表示結果（.mainのみ）

これは例1です。（main内）

これは例2です。（main内）

これは例3です。（main外）

5-5. 線を引く（border）

セレクタ
{ border: 種類太さ色; }

border プロパティは「線の種類・太さ・色」の3つを半角スペースで区切って指定します。書く順番は自由です。

種類	見た目
`solid`	実線
`dotted`	点線
`dashed`	破線
`double`	二重線
`none`	線なし（初期値）

CSSコード

.solid  { border: solid  2px gray; }
.dotted { border: dotted 2px gray; }
.dashed { border: dashed 2px gray; }
.double { border: double 5px gray; }
.orange { border: solid  1px orange; }

表示結果

solid 2px gray

dotted 2px gray

dashed 2px gray

double 5px gray

solid 1px orange

上下左右の一部にだけ線を引く

プロパティ名を変えることで、特定の辺だけに線を引けます。

プロパティ	効果
`border-top`	上にだけ線を引く
`border-bottom`	下にだけ線を引く
`border-left`	左にだけ線を引く
`border-right`	右にだけ線を引く

CSSコード

.rei1 {
  border-top:  solid 2px #FFA07A;
  border-left: solid 2px #FFA07A;
}
.rei2 {
  border-bottom: solid 2px #FFA07A;
  border-right:  solid 2px #FFA07A;
}

表示結果

上と左にだけ線

下と右にだけ線

5-6. CSSのコメントアウト

/*
コメントの内容
*/

CSSでは /* 〜 */ ではさんだ部分がコメントアウトになります（HTMLの  とは書き方が異なります）。

CSSコード

p {
  /* 文字色をオレンジに変える */
  color: orange;
  /* font-size: 20px; ← 一時停止中 */
}

表示結果

コメントは表示に影響しません。

💡 コメントアウトはコードのメモ書きや、一時的にプロパティを無効化したいときに便利です。

6. ここまでの復習

学んだ内容を組み合わせて、少し見栄えの良いページを作ってみましょう。

HTMLコード

<div id="headline">
  <h1>CSS入門</h1>
  <p>これは段落です。</p>
</div>
<div class="main">
  <h2>これは見出しです。</h2>
  <p>これは<span class="light">例</span>です。</p>
  <p>
    <a href="https://example.com/">ホームへ</a>
    戻ります。
  </p>
</div>

CSSコード

body {
  /* 背景色をベージュに */
  background: #fffbf4;
  /* 全文字を中央揃えに */
  text-align: center;
}
h1 {
  /* h1の文字色を変える */
  color: #f89174;
}
#headline {
  /* 下に点線を引く */
  border-bottom: dotted 2px #f89174;
}
#headline p {
  /* フォントサイズを1.2倍に */
  font-size: 1.2em;
}
h2 {
  color: orange;
}
a {
  color: gray;
}

ブラウザ表示イメージ

CSS入門

これは段落です。

これは見出しです。

これは例です。

ホームへ戻ります。

📝 まとめ

CSSはHTMLで作った土台のデザイン・レイアウトを決める言語
基本文法は セレクタ { プロパティ: 値; }
タグ指定：タグ名 { } / id指定：#id名 { } / class指定：.class名 { }
複数指定：◯◯, ◯◯ { }（カンマ区切り）
子孫セレクタ：◯◯ ◯◯ { }（半角スペース区切り）
文字サイズ：font-size（px / em）
文字色：color（色名 / カラーコード）
文字配置：text-align（left / center / right）
背景色：background-color（色名 / カラーコード）
線：border（種類太さ色）/ 個別は border-top など
CSSのコメントアウトは /* 〜 */

次のステップ

CSSの基本をマスターしたら、次は widthとheightで幅・高さを指定 する方法を学びましょう。