【HTML/CSS入門③】CSSで見た目を整えよう｜色・文字サイズ・余白の基本

HTML/CSS入門
女の人がこの記事のタイトルについて解説している画像
2026.04.08

はじめに

前回の記事では、HTMLの基本タグ（h1〜h6・p・a・img）を使って自己紹介ページの骨格を作りました。

「できた！」と思ったら次に気になるのが……「なんか地味だな」ということではないでしょうか（笑）。

今回はその見た目を整えるための道具、CSSに入っていきます！

この記事でできるようになること

この記事を読み終えると、CSSの基本的な書き方がわかり、文字の色・サイズ・余白を自分で変えられるようになります。

地味だったページに少しずつ色がついていく感覚、楽しいですよ！

CSSって何？「見た目」を担当する言語

HTMLがウェブページの「骨格」なら、CSSは「見た目・デザイン」を担当する言語です。

正式名称はCascading Style Sheets（カスケーディング・スタイル・シーツ）。

難しそうな名前ですが、やっていることはシンプルです。

「この文字を赤くして」「この余白を広くして」という見た目の指示書をHTMLに渡す、それがCSSです。

CSSの基本の書き方

CSSは以下の形で書きます。

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

3つの言葉の意味はこうです。

セレクタは「どこに」、プロパティは「何を」、値は「どうする」。

たとえば「h1の文字を赤くする」ならこう書きます。

h1 {
  color: red;
}

「h1（セレクタ）の、color（プロパティ）を、red（値）にする」と読めばOKです。

この3点セットを体に染み込ませることが、CSS習得の第一歩です！

CSSをHTMLにつなげる方法

CSSを書いても、HTMLと連携させないと反映されません。

一番シンプルな方法は、HTMLファイルの <head> タグの中に <style> タグを使ってCSSを直接書く方法です。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS練習</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>この文字が赤くなります！</h1>
  </body>
</html>

まずはこの形で練習して、CSSが効いているか確認しながら進めましょう。

ブラウザでファイルを開いたときにh1が赤くなっていれば成功です！

ステップ1：文字色を変える
ステップ2：背景色を変える
ステップ3：文字サイズを変える
課題
styleタグを使ってh1の文字色を赤にしてみよう！
headタグの中にstyleタグを書いて、h1の文字色をredに変えてみましょう。プレビューで文字が赤くなるのを確認してください！
💡 CSSの書き方：セレクタ（タグ名）{ プロパティ: 値; } という形で書きます。文字色はcolorプロパティです。red・blue・greenなどの英語名や #FF0000 などのカラーコードで指定できます。
見本コード（写経してみよう！わからなくなったらコピーしてOK）
<!DOCTYPE html> <html> <head> <title>CSS練習</title> <style> h1 { color: red; } </style> </head> <body> <h1>この文字が赤くなります！</h1> </body> </html>
ここに入力してみよう
プレビュー（リアルタイム）
課題
bodyの背景色を好きな色に変えてみよう！
background-colorプロパティを使ってページ全体の背景色を変えてみましょう。好きな色の英語名を入れてみてください！
💡 背景色はbackground-colorプロパティで指定します。lightyellow・lightblue・lightpink・#EEEDFE（カラーコード）など色々使えます。どんな色が使えるか試してみましょう！
見本コード（写経してみよう！わからなくなったらコピーしてOK）
<!DOCTYPE html> <html> <head> <title>CSS練習</title> <style> body { background-color: lightyellow; } h1 { color: red; } </style> </head> <body> <h1>背景色が変わりました！</h1> </body> </html>
ここに入力してみよう
プレビュー（リアルタイム）
課題
h1の文字サイズを変えてみよう！
font-sizeプロパティを使ってh1の文字サイズを変えてみましょう。px（ピクセル）という単位を使います。
💡 文字サイズはfont-sizeプロパティで指定します。単位はpx（ピクセル）が基本です。16pxが標準的な文字サイズです。数字を大きくすると文字も大きくなります！
見本コード（写経してみよう！わからなくなったらコピーしてOK）
<!DOCTYPE html> <html> <head> <title>CSS練習</title> <style> h1 { color: red; font-size: 48px; } </style> </head> <body> <h1>文字サイズが変わります！</h1> </body> </html>
ここに入力してみよう
プレビュー（リアルタイム）

色を変えてみよう：colorとbackground-color

色に関するプロパティは主に2つあります。

colorは文字の色、background-colorは背景の色です。

値には色の名前（英語）やカラーコードが使えます。

h1 {
  color: white;
  background-color: navy;
}

p {
  color: #333333;
  background-color: #f5f5f5;
}

#333333のような記号はカラーコード（16進数カラー）といいます。

「どんな色でも指定できる」万能な書き方です。

色を探すときは「カラーコード ピッカー」で検索すると、好きな色のコードがすぐ調べられますよ。

文字サイズを変えてみよう：font-size

文字の大きさは font-size で指定します。

単位は px（ピクセル）がわかりやすくておすすめです。

h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
}

数字が大きいほど文字が大きくなります。

ブラウザの標準的な本文サイズは16pxなので、それを基準に大きくしたり小さくしたりしてみましょう。

先ほど実際に書いてみたコードのredの部分を書き換えてみてください。

余白を整えよう：marginとpadding

CSSで一番つまずきやすいのがこの2つです。

marginは要素の「外側」の余白、paddingは要素の「内側」の余白です。

お弁当箱で例えると、paddingがお弁当箱の中の仕切り、marginがお弁当箱と他のお弁当箱の間の隙間、というイメージです。

h1 {
  margin: 20px;
  padding: 10px;
}

p {
  margin: 0 0 16px 0;
  padding: 8px 16px;
}

値を1つ書くと上下左右すべてに同じ余白がつきます。

4つ書くと「上・右・下・左」の順に個別指定できます。

最初はひとまず margin: 20px; のように全方向まとめて指定してみましょう。

全部まとめて書いてみよう

ここまで学んだことを使って、前回の自己紹介ページをおしゃれにしてみましょう！

<!DOCTYPE html>
<html>
  <head>
    <title>私の自己紹介ページ</title>
    <style>
      body {
        background-color: #f9f9f9;
        color: #333333;
        font-size: 16px;
      }

      h1 {
        color: #ffffff;
        background-color: #3a86ff;
        font-size: 32px;
        padding: 16px;
        margin: 0;
      }

      h2 {
        color: #3a86ff;
        font-size: 22px;
        margin: 32px 0 8px;
      }

      p {
        font-size: 16px;
        margin: 0 0 16px;
        padding: 0 16px;
      }
    </style>
  </head>
  <body>
    <h1>私の自己紹介ページ</h1>

    <h2>プロフィール</h2>
    <p>はじめまして！プログラミングを勉強中のSueです。</p>

    <h2>好きなこと</h2>
    <p>コーヒーを飲みながらコードを書くのが好きです。</p>

    <h2>参考にしているサイト</h2>
    <p>
      <a href="https://itskillab.com/ja/" target="_blank">Sue's Blog</a>
    </p>
  </body>
</html>

ブラウザで開いてみてください。

さっきまでシンプルだったページが、一気に「それっぽく」なったはずです！

色や数値を自分で変えて遊んでみると、CSSの感覚がどんどん身についていきますよ。

まとめ

今回はCSSの基本を学びました。

セレクタ・プロパティ・値の3点セット、色・文字サイズ・余白の指定方法——これだけでもページの見た目はぐっと変わります。

「なんとなくわかった！」という段階でOK。

あとは手を動かして試し続けるのが一番の近道です。

次回はCSSのレイアウトに入ります。

要素を横並びにしたり、中央揃えにしたり——「どこに配置するか」を操るテクニックを一緒に学んでいきましょう！

コメント

タイトルとURLをコピーしました