HTMLは作れてブラウザで表示できたけど、見た目はそのままの文字だけ。
「色を変えるには何を作るのか」
「作ったCSSをどうやってHTMLに反映させるのか」
最初はここが分かりにくいです。
ここでは CSSファイルを作って、HTMLにつなげて、トップページのような見た目に変えるところまで をやります。
1. CSSファイルを作る
HTMLと同じフォルダに style.css を作ります。
index.html
style.css
拡張子が .css になっているかだけ確認します。
メモ帳で保存すると style.css.txt になることがあります。
ファイル名が style.css になっているか確認します。
2. HTMLにCSSを読み込ませる
index.html の <head> に1行追加します。
<link rel="stylesheet" href="style.css">
これで style.css が読み込まれます。
3. HTMLを書く（トップページの形）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのCSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<p class="label">My First Website</p>
<h1>はじめてのトップページ</h1>
<p class="lead">
HTMLにCSSをつなげると、文字だけのページから見た目のあるページに変わります。
</p>
<a class="button" href="#">CSSで見た目を変える</a>
</header>
<main class="content">
<section class="card">
<h2>HTML</h2>
<p>ページの文章や見出しを作ります。</p>
</section>
<section class="card">
<h2>CSS</h2>
<p>色、余白、配置、ボタンの見た目を変えます。</p>
</section>
<section class="card">
<h2>JavaScript</h2>
<p>クリックした時の動きなどを追加します。</p>
</section>
</main>
</body>
</html>
4. CSSを書く（見た目を作る）
body {
margin: 0;
background: #f1f5f9;
color: #1e293b;
font-family: sans-serif;
}
.hero {
padding: 80px 24px;
background: linear-gradient(135deg, #2563eb, #38bdf8);
color: white;
text-align: center;
}
.label {
margin: 0 0 12px;
font-weight: bold;
letter-spacing: 0.08em;
}
h1 {
margin: 0;
font-size: 40px;
}
.lead {
max-width: 560px;
margin: 20px auto 0;
line-height: 1.8;
}
.button {
display: inline-block;
margin-top: 28px;
padding: 12px 24px;
background: white;
color: #2563eb;
text-decoration: none;
border-radius: 999px;
font-weight: bold;
}
.button:hover {
background: #dbeafe;
}
.content {
display: flex;
gap: 20px;
max-width: 900px;
margin: 40px auto;
padding: 0 24px;
}
.card {
flex: 1;
padding: 24px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.card h2 {
margin-top: 0;
}
5. ブラウザで確認する
index.html を開いて、以下が変わっていればOKです。
- 上に大きな青いエリアがある
- ボタンが表示される
- 下にカードが3つ並ぶ
- マウスをボタンに乗せると色が変わる
ここまでできれば、もう「文字だけのページ」ではありません。
どこがどう変わっているか
| 書いたもの | 変わる場所 |
|---|---|
body |
ページ全体の背景と文字 |
.hero |
上の見出しエリア |
.label |
小さなラベル |
h1 |
一番大きな見出し |
.lead |
説明文 |
.button |
ボタン |
.button:hover |
ボタンにマウスを乗せた時 |
.content |
下のカードの並び |
.card |
白いカード |
うまく表示されないとき
見た目が変わらない
-
style.cssとindex.htmlが同じフォルダにある -
<link rel="stylesheet" href="style.css">がある - ファイル名が
style.css.txtになっていない
横並びにならない
-
.content { display: flex; }が書かれているか確認
更新しても反映されない
- ブラウザを再読み込みする（Ctrl + F5）
まとめ
- CSSは別ファイルで作る
- HTMLから読み込む
- 色・余白・配置を変えられる
- ページ全体の見た目を作れる
同じページをBootstrapで作る
今回はCSSを自分で書いて、トップページのような見た目にしました。
次は、今回のページをBootstrapで作り直して、CSSを自分で書く場合との違いを見ます。