- 投稿日：2026/02/15
- 更新日：2026/02/21
【プログラミング入門 第3回】CSSで見た目を整えよう
今回のゴール
CSSを使って、前回作ったHTMLページの見た目を自分好みに変えられるようになること。 背景色や文字色を変えたり、文字を中央に寄せたりと、「デザインの第一歩」を踏み出しましょう。
はじめに ― 見た目を変える力を手に入れよう
前回の第2回では、HTMLを使って「見出し」「段落」
などの要素を画面に表示するところまで進みましたね。
ただ、こう思いませんでしたか？
「なんだか見た目が地味だな……」
白い背景に黒い文字。味気ないですよね。でも安心してください。今回学ぶ CSS（シーエスエス） を使えば、あのシンプルなページが一気に「自分だけのページ」に変わります。
色を変え、余白を調整し、文字を中央に揃える。たったこれだけで、ページの印象はガラリと変わります。
CSSとは何か？ ― 「構造」と「見た目」の役割分担
まず、CSSが何者なのかを整理しておきましょう。
前回学んだHTMLは、ページの 「構造（中身）」 を作るための言語でした。「ここが見出し」「ここが段落」「ここがリスト」……という骨組みを決める役割ですね。
一方、今回学ぶCSSは 「見た目（デザイン）」 を担当する言語です。正式名称は Cascading Style Sheets（カスケーディング・スタイル・シート） といいます。長いので、CSSとだけ覚えておけば大丈夫です。
この2つの役割分担をイメージで表すと、こんな感じです。
家を建てるとき、まず柱や壁の配置（＝HTML）を決めてから、壁紙の色や家具のレイアウト（＝CSS）を選びますよね。Webページもまったく同じ考え方です。
💡 Tips 「HTML＝構造、CSS＝見た目、JavaScript＝動き」という3つの役割分担は、実際の開発現場でもそのまま使われている考え方です。現場ではHTMLを書く人、CSSでデザインを整える人、JavaScriptで機能を作る人……と分担することもあるくらい、この3つは明確に分かれています。今ここで「構造と見た目は別物なんだ」と感覚をつかんでおくと、この先ずっと役に立ちますよ。
CSSを書く場所 ― <style> タグを使おう
CSSを書く方法はいくつかありますが、このシリーズでは一番シンプルな方法を使います。HTMLファイルの <head> の中に <style> タグ を書いて、その中にCSSを記述する方法です。
前回作った index.html を開いてください。まだ手元にない方は、以下のコードをまるごとコピーして index.html として保存すればOKです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのWebページ</title> </head> <body> <h1>はじめてのWebページ</h1> <p>HTMLを使って、自分の手でページを作ることができました！</p> <h2>好きなものリスト</h2> <ul> <li>コーヒー</li> <li>読書</li> <li>散歩</li> </ul> </body> </html>
これが前回までの状態ですね。ここにCSSを追加していきます。
<head> タグの中、<title> の下に <style> タグを追加しましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのWebページ</title> <style> /* ここにCSSを書いていきます */ </style> </head> <body> <h1>はじめてのWebページ</h1> <p>HTMLを使って、自分の手でページを作ることができました！</p> <h2>好きなものリスト</h2> <ul> <li>コーヒー</li> <li>読書</li> <li>散歩</li> </ul> </body> </html>
<style> と </style> の間が、CSSを書くスペースです。/* ここにCSSを書いていきます */ はコメント（メモ書き）なので、ブラウザには表示されません。HTMLのコメント <!-- --> と書き方が違いますが、「メモを残せる」という役割は同じです。
CSSの書き方 ― 基本のルール
CSSの書き方は、とてもシンプルなルールに従っています。
セレクタ { プロパティ: 値; }
いきなりカタカナが3つ出てきましたが、大丈夫です。一つずつ説明しますね。
・セレクタ …… 「どの要素の見た目を変えるか」を指定する部分。
HTMLのタグ名をそのまま書きます（例：h1、p、body）
・プロパティ …… 「何を変えるか」を指定する部分
（例：文字の色、背景色、文字サイズ）
・値 …… 「どう変えるか」を指定する部分（例：赤、20pxなど）
たとえば「h1の文字色を青にしたい」なら、こう書きます。
h1 { color: blue; }
color が「文字の色を変える」というプロパティで、blue が「青にする」という値です。最後のセミコロン ; を忘れずにつけてくださいね。これは「この指定はここで終わりです」という区切りの記号です。
さっそくやってみよう ― 背景色と文字色を変える
それでは、実際にCSSを書いてページの見た目を変えていきましょう。
ステップ1：ページ全体の背景色を変える
まず、ページ全体の背景色を変えてみます。<style> タグの中に、以下のCSSを書いてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのWebページ</title> <style> body { background-color: #f0f0f0; } </style> </head> <body> <h1>はじめてのWebページ</h1> <p>HTMLを使って、自分の手でページを作ることができました！</p> <h2>好きなものリスト</h2> <ul> <li>コーヒー</li> <li>読書</li> <li>散歩</li> </ul> </body> </html>
ファイルを保存して、ブラウザで開いてみてください（すでに開いている場合はページを再読み込みしましょう）。
背景が真っ白から うすいグレー に変わりましたか？ 変わっていれば成功です！（↓↓こんな感じです！！）
ここでのポイントを整理します。
body がセレクタです。<body> タグ＝ページ全体を指しているので、ページ全体の背景色が変わりますbackground-color は「背景色を変える」プロパティです#f0f0f0 は色を表すコードです。# に続けて6桁の英数字で色を指定する方法で、カラーコード と呼ばれます
「#f0f0f0 って何？」と思いますよね。カラーコードはWebで色を指定するときの定番の書き方です。覚える必要はありません。使いたい色のコードを調べてコピペすればOKです。
よく使う色の例をいくつか載せておきますね。
カラーコード 色
#ffffff 白
#000000 黒
#f0f0f0 うすいグレー
#ffebee うすいピンク
#e3f2fd うすいブルー
#e8f5e9 うすいグリーン
#fff8e1 うすいイエロー
好きな色を探したいときは、ブラウザで 「カラーコード 一覧」 と検索すると、便利なカラーピッカー（色選びツール）がたくさん見つかりますよ。
ステップ2：見出しの文字色を変える
次に、<h1> の文字色を変えてみましょう。<style> タグの中に、CSSを追加します。
<style> body { background-color: #f0f0f0; } h1 { color: #2196f3; } </style>
color プロパティで文字の色を指定しています。#2196f3 は鮮やかな青色です。保存してブラウザを再読み込みすると、見出しの文字が青色になっているはずです。
body のCSSの下に h1 のCSSを続けて書いていますね。こんなふうに、CSSは セレクタごとにブロックを並べて書いていく のが基本です。
みなさんのブラウザでも上記のようにh1の色が変わりましたでしょうか？
ステップ3：段落の文字サイズを変える
続いて、段落（<p> タグ）の文字サイズを少し大きくしてみましょう。
<style> body { background-color: #f0f0f0; } h1 { color: #2196f3; } p { font-size: 18px; } </style>
font-size は文字サイズを変えるプロパティです。18px の px（ピクセル）は画面上のサイズの単位で、数字が大きいほど文字も大きくなります。ブラウザの標準的な文字サイズが16pxなので、18pxにすると少しだけ大きくなります。
<p>タグの文字がすこーしだけ大きくなりました！！
文字を中央に揃えよう ― text-align
ここまでで、色とサイズを変える方法がわかりましたね。次は 文字の配置 を変えてみましょう。
見出しを画面の中央に表示したいとき、text-align というプロパティを使います。
<style> body { background-color: #f0f0f0; } h1 { color: #2196f3; text-align: center; } p { font-size: 18px; } </style>
h1 のブロックの中に text-align: center; を追加しました。こうすると、<h1> の文字が 画面の中央 に表示されます。（↓こんな感じです！！）
一つのセレクタに対して、プロパティは何個でも書けます。改行して並べていけばOKです。
ここで一つ大事なことをお伝えします。CSSは「あとから自由に足していける」 ということです。最初から完璧なデザインを書く必要はありません。一つ書いて確認、もう一つ書いて確認……と少しずつ積み重ねていくのが、CSSとうまく付き合うコツです。
余白を整えよう ― margin と padding
色や配置が変わると、もう一つ気になってくるのが 余白 です。文字がページの端にぴったりくっついていると、ちょっと窮屈に見えますよね。
CSSで余白をコントロールするプロパティは2つあります。
margin（マージン） …… 要素の 外側 の余白。要素と要素のあいだのスペースですpadding（パディング） …… 要素の 内側 の余白。要素の枠と中身のあいだのスペースです
言葉だとイメージしにくいので、「額縁に入った絵」で考えてみてください。
margin は、額縁と壁のあいだの空間（額縁の外側のスペース）padding は、額縁のフチと絵のあいだの空間（額縁の内側の余白）
では、実際に余白を追加してみましょう。
<style> body { background-color: #f0f0f0; margin: 0; padding: 40px; } h1 { color: #2196f3; text-align: center; } p { font-size: 18px; } </style>
body に2つのプロパティを追加しました。
・margin: 0; …… ブラウザがデフォルトで付けている外側の余白をリセット（ゼロに）しています
・padding: 40px; …… ページの内側に40pxの余白を追加しています
保存して確認すると、文字がページの端から少し離れて、ゆとりのあるレイアウトになっているはずです。（↓こんな感じです！！）
💡 Tips margin: 0; のように、ブラウザのデフォルトスタイルをリセットする書き方は、実際の現場でもプロジェクトの最初にほぼ必ず行います。ブラウザごとにデフォルトの余白が微妙に違うため、最初にリセットしてから自分でデザインを組み立てていくのが定番のやり方です。今のうちにこの感覚を知っておくと、後々「なるほど！」と思える場面がきっとありますよ。
ここまでの全体コード
一つずつ追加してきたので、いったん全体をまとめます。以下が現時点での完成コードです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのWebページ</title> <style> body { background-color: #f0f0f0; margin: 0; padding: 40px; } h1 { color: #2196f3; text-align: center; } p { font-size: 18px; } </style> </head> <body> <h1>はじめてのWebページ</h1> <p>HTMLを使って、自分の手でページを作ることができました！</p> <h2>好きなものリスト</h2> <ul> <li>コーヒー</li> <li>読書</li> <li>散歩</li> </ul> </body> </html>
ブラウザで開くと、次のような見た目になっているはずです。
・背景がうすいグレー
・見出し（h1）が青色で中央揃え
・段落の文字が少し大きめ
・ページの周囲にゆとりのある余白
第2回のときの真っ白なページと比べると、かなり印象が変わったのではないでしょうか。ここまでできれば、CSSの基本はしっかり押さえられています。
🎯 ミニチャレンジ①：好きな色に変えて「自分だけのページ」にしよう
ここからは、手を動かす時間です。
今書いたCSSの値を 自由に変えて、自分だけのオリジナルページを作ってみましょう。正解はありません。「自分が好きだな」と思える見た目になれば、それが正解です。
試してみてほしいこと：
background-color の値を別の色に変えてみる（例：#fff8e1 で暖かいイエロー）h1 の color を別の色にしてみる（例：#e91e63 でピンク）font-size の数値を変えてみる（例：24px にすると、かなり大きくなります）padding の数値を変えてみる（例：80px にするとたっぷりの余白、10px にするとキュッと詰まった印象）
変える → 保存する → ブラウザで再読み込み
このサイクルを何度でも繰り返してみてください。「この色いいな」「余白はこれくらいかな」と試行錯誤する過程こそが、CSSを身につける一番の近道です。
もう少し手を加えてみよう
チャレンジを楽しんでいただけましたか？ ここからは、もう少しだけCSSを追加して、ページの完成度を上げてみましょう。
h2 と リストにもスタイルをつける
今のままだと、<h2> と <ul> にはまだCSSが当たっていません。こちらにもスタイルを追加してみます。
<style> body { background-color: #f0f0f0; margin: 0; padding: 40px; } h1 { color: #2196f3; text-align: center; } h2 { color: #333333; } p { font-size: 18px; } ul { font-size: 18px; } li { margin-bottom: 8px; } </style>
追加した部分を説明しますね。
・h2 の color: #333333; …… 小見出しの色を濃いグレーにしています。真っ黒（#000000）よりも少し柔らかい印象になります
・ul の font-size: 18px; …… リスト全体の文字サイズを段落と揃えています
・li の margin-bottom: 8px; …… リストの各項目の下に8pxの余白を入れています。margin-bottom は「下方向だけに余白を入れる」という指定です
margin には方向を指定するバリエーションがあります。
プロパティ 余白の方向
margin 上下左右すべて
margin-top 上だけ
margin-bottom 下だけ
margin-left 左だけ
margin-right 右だけ
padding にも同じように padding-top や padding-left などがあります。今は「方向ごとに指定できるんだな」と知っておくだけで十分です。
🎯 ミニチャレンジ②：h2 を中央揃えにしてみよう
先ほど h1 を中央揃えにしたやり方を思い出してください。同じ方法で <h2> の文字も中央揃えにしてみましょう。
ヒント：h1 に書いた「あのプロパティ」を、h2 のブロックにも追加するだけです。
うまくできましたか？ 答えはこちらです。
cssh2 { color: #333333; text-align: center;}
text-align: center; を追加するだけですね。「h1 でやったことを、h2 にも応用できた」——これは小さなことに見えて、とても大事なステップです。CSSは、同じパターンの繰り返しでどんどんページを整えていけるんです。
最終的な全体コード
今回の内容をすべて反映した、最終的なコードがこちらです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのWebページ</title> <style> body { background-color: #f0f0f0; margin: 0; padding: 40px; } h1 { color: #2196f3; text-align: center; } h2 { color: #333333; text-align: center; } p { font-size: 18px; } ul { font-size: 18px; } li { margin-bottom: 8px; } </style> </head> <body> <h1>はじめてのWebページ</h1> <p>HTMLを使って、自分の手でページを作ることができました！</p> <h2>好きなものリスト</h2> <ul> <li>コーヒー</li> <li>読書</li> <li>散歩</li> </ul> </body> </html>
このコードをまるごとコピーして index.html に貼り付け、ブラウザで開けばそのまま動きます。
今回のまとめ
今回は、CSSの基本を学んでページの見た目を変えるところまで進めました。ここで扱った内容を振り返っておきましょう。
・CSSの役割 …… HTMLが「構造」、CSSが「見た目」を担当する。この2つを分けて考えるのがWeb制作の基本
・CSSの書き方 …… セレクタ { プロパティ: 値; } のパターンで書く
・<style> タグ …… HTMLファイル内の <head> の中に書いて、CSSを記述する場所をつくる
・今回使ったプロパティ
・background-color …… 背景色
・color …… 文字色
・font-size …… 文字サイズ
・text-align …… 文字の配置（中央揃えなど）
・margin …… 外側の余白
・padding …… 内側の余白
プロパティの名前を全部暗記する必要はありません。「こういうことができるんだな」という感覚があれば、あとは必要なときに調べればOKです。プロの開発者も、CSSのプロパティはよく調べながら書いています。
第2回で「構造」を作り、第3回で「見た目」を整えられるようになりました。Webページを自分の手で作るための土台が、着実にできてきていますね。
次回の予告
次回の第4回では、いよいよ JavaScript（ジャバスクリプト） に入ります。
JavaScriptは、ページに 「動き」 を加えるための言語です。ボタンをクリックしたらメッセージが表示される——そんな仕組みを、次回は自分の手で作っていきますよ。
HTML（構造）、CSS（見た目）、そしてJavaScript（動き）。3つ目のピースがそろえば、Webページでできることの幅が一気に広がります。お楽しみに！
