この記事にはプロモーションが含まれています。

【Web制作シリーズ】CSSでWebページを美しく！色・フォント・レイアウトの基本

2025-08-042025-08-10

ケケンタ

HTMLだけだと味気ない…

そう感じていませんか？

この記事は、Web制作学習シリーズの第2回目です！前回作成したWebページに、CSSで魔法をかけましょう！

色を変え、フォントを調整し、レイアウトを整えることで、あなたのページが一気にプロフェッショナルな見た目に変わります。

デザインの力で、あなたのWebページを魅力的に！ このシリーズを通して、最終的には完全なポートフォリオサイトが完成します。

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

色とフォントでページを美しく
背景色と余白で読みやすさを向上
中央揃えとボーダーでデザイン性を向上
CSSの基本を体験的に理解

この記事で完成するもの

プロフェッショナルな見た目の自己紹介ページ（カラフルで読みやすいデザイン）

シリーズの進行:
第1回で作成したHTMLページに、今回はCSSでスタイリングを追加。次回はナビゲーションメニューを追加して、さらに本格的なWebサイトに進化させます！

シリーズ目次

前回の記事

【Web制作シリーズ】HTMLで最初のWebページを作ろう！初めてのページが30分で完成！

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/12 08:44:59時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

学習目標

この記事で身につくスキル

CSSファイルの作成方法
基本的なCSSプロパティの使い方
色やフォントの変更
背景色や余白の調整

準備：前回のファイルを確認

前回作成したindex.htmlファイルがあることを確認してください。

もしない場合は、以下の内容で作成してください

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

体験1：CSSファイルを作成しよう

ステップ1：CSSファイルを作成

STEP

VS Codeで「styles.css」というファイルを作成

画面左側にあるメニューの上部の「ファイルアイコン」をクリックすると新規ファイルを作成できます。
（「MY-PORTFOLIO」の右側にあるアイコン群）

STEP

以下の内容を入力してください

body {
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

h2 {
    color: #666;
}

p {
    color: #444;
}

ステップ2：HTMLファイルにCSSをリンク

index.htmlファイルの<head>部分を以下のように変更してください。

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

ステップ3：ブラウザで確認

ファイルを保存して、ブラウザを更新してください。

変化を確認

背景色が薄いグレーに変わった
見出しの色が異なるグレーに変わった
段落の文字色が調整された

体験2：色を変えてみよう

カラフルな配色に変更してみよう

styles.cssファイルを以下のように変更してください。

body {
    background-color: #e8f4f8;
}

h1 {
    color: #2c5aa0;
}

h2 {
    color: #4a90e2;
}

h3 {
    color: #7bb3e6;
}

p {
    color: #2c3e50;
}

ブラウザで確認

保存してブラウザを更新してください。

色の変化

背景が青みがかった色に
見出しが青系のグラデーションに
段落が濃いグレーに

色の指定方法（３パターン）

カラーコード: #2c5aa0（16進数）
色名: red, blue, greenなど
RGB: rgb(44, 90, 160)

世の中には、それぞれの色表現を簡単に変換してくれるWebサービスがたくさんあります。
実際にWebサイトを作成していく中で「このカラーコードのRGB表記が知りたい！」といったときは、そうしさサービスを存分に活用しましょう！

参考：カラーコード変換ツール｜TECH-UNLIMiTED

体験3：フォントサイズを調整しよう

文字サイズを変更してみよう

styles.cssファイルに以下の内容を追加してください。

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
}

ブラウザで確認

保存してブラウザを更新してください。

サイズの変化

h1が大きく、h2、h3と段階的に小さく
段落の行間が読みやすく調整
フォントがArialに統一

フォントサイズの単位（よく使う３種類）

px: ピクセル（固定サイズ）
em: 親要素に対する相対サイズ
rem: ルート要素に対する相対サイズ

体験4：背景色と余白を設定しよう

レイアウトを改善してみよう

styles.cssファイルを以下のように変更してください。

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

ブラウザで確認

保存してブラウザを更新してください。

レイアウトの改善

ページ全体に余白が追加
見出しと段落の間に適切な間隔
読みやすさが向上

余白の設定（今回使用したもの）

margin: 要素の外側の余白
padding: 要素の内側の余白
margin-bottom: 下側の外余白

体験5：中央揃えとボーダーを追加しよう

さらに見た目を改善してみよう

styles.cssファイルを以下のように変更してください。

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #2c5aa0;
    padding-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #7bb3e6;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

ブラウザで確認

保存してブラウザを更新してください。

デザインの改善

ページが中央に配置
h1に下線が追加
h3に左側のボーダーが追加
全体的にバランスの良いレイアウト

新しく使ったプロパティ

text-align: center: 文字を中央揃え
border-bottom: 下側のボーダー
border-left: 左側のボーダー
max-width: 最大幅の設定
margin: 0 auto: 左右中央揃え

実践課題

課題1：自分の好きな色でカスタマイズしよう

背景色を自分の好きな色に変更
見出しの色を統一感のある配色に
フォントサイズを調整
余白を調整して読みやすくする

課題2：テーマカラーを決めてデザインしよう

メインカラーを決める（例：緑系、紫系）
その色を基調とした配色を作成
ボーダーやアクセントカラーを追加
全体的な統一感を出す

課題の解答例

/* 緑系のテーマカラー */
body {
    background-color: #f0f8f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2d5016;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #4a7c59;
    padding-bottom: 10px;
}

h2 {
    color: #4a7c59;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #6b8e23;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #6b8e23;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}