2026.03.18 2026.03.27

【CSS 1-1】CSSを書いてみる｜色・文字サイズ・背景色を変えて“見た目が変わる体験”をする（初心者向け）

toshi

記事内に商品プロモーションを含む場合があります

※この記事は CSS 1-1「CSSを書いてみる」です。
今回は、難しいレイアウトはやりません。
まずは「書いたら見た目が変わる」を体験する回です。

CSSの最初の壁は、
「何を書けばいいのか分からない」
「書いたのに何も変わらない」
この2つだと思います。

なので、今回はすごく小さく進めます。

今日はこの3つができればOKです。

文字の色を変える
文字の大きさを変える
背景色を変える

この3つだけでも、CSSの感覚はかなり掴めます。

「最初のCSSは“見てすぐ分かる変化”だけで十分です」

最初からレイアウトや細かい指定に入ると、少ししんどくなりやすいです。

なので最初は、
・color
・font-size
・background-color

この3つだけで大丈夫です。

変化が見えると、CSSはかなり楽になります。

今回のゴール
準備
HTMLにCSSを読み込ませる
HTMLとCSSのコードはこうなります
style.css に最初のCSSを書く
CSSの基本の形
少しだけ変えてみる
色コードって何？
CSSが効かないとき
今回のまとめ
今日のゴール確認
CSS 1-2へ

ここまでできればOK

今回のゴール

style.css を作れる
HTMLから CSS を読み込める
色を変えられる
文字サイズを変えられる
背景色を変えられる

【iOS版】

【Android版】

【PC版】

HTMLとCSSをつなぐ

準備

まずはファイルを2つ使います。

index.html
style.css

この2つを同じフォルダに置きます。
※別途CSSフォルダを用意する方法もあり。

ここを追加

HTMLにCSSを読み込ませる

CSSを書く前に、まずは HTML に
「このページでは style.css を使います」
と伝えます。

head の中に、下の1行を追加してください。

※同じフォルダの場合
<link rel="stylesheet" href="style.css" />

※index.htmlと同じ階層のcssフォルダに格納した場合
<link rel="stylesheet" href="./css/style.css" />

実際に書いてみる

HTMLとCSSのコードはこうなります

HTMLのコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>CSSの練習</h1>
<p>このページで、文字の色や大きさを変えてみます。</p>
</body>
</html>

分からなければ、コピペOK

style.css に最初のCSSを書く

次に、style.css に下のコードを貼って保存してください。
CSSのコード

body {
    background-color: #f7f7f7;
}

h1 {
    color: #2563eb;
    font-size: 32px;
}

p {
    color: #333333;
    font-size: 16px;
}

toshi

保存してブラウザを見ると、背景や文字が変わるはずです。
ここが最初の変化です。

まずはこれだけ

CSSの基本の形

書いているもの	意味
body	ページ全体に対する指定
h1	見出し1に対する指定
p	段落に対する指定
color	文字色
font-size	文字サイズ
background-color	背景色

CSSは、ざっくり言うとこういう形です。

「どこを」
　　↓
「どう変えるか」

この形で読めれば、最初は十分です。

練習

少しだけ変えてみる

h1 の色を別の色に変える
p の文字サイズを 16px → 18px にしてみる
body の背景色を少し変えてみる
変えたら保存してブラウザで確認する

最初は “正解の色” を探さなくて大丈夫です。
変わることを確認できれば、それで十分進んでいます。

最初は深追いしない

色コードって何？

たとえば #2563eb みたいな文字は、色を表しています。
これを「カラーコード」と思っておけばOKです。

例	だいたいの色
#000000	黒
#ffffff	白
#2563eb	青系
#333333	濃いグレー
#f7f7f7	薄いグレー

最初は「黒・白・グレー・青」くらいで十分です。
細かい色選びは、あとから慣れていけばOKです。

ここだけ確認

CSSが効かないとき

「何も変わらないとき」

まずは次を確認してください。

style.css という名前になっているか
index.html と同じ場所にあるか
head の中に link タグを書いたか
保存したか
ブラウザを更新したか

最初は、このどれかが原因なことが多いです。

「一部だけ変わらない」

たとえば h1 は変わるのに p が変わらない場合は、
HTML側にちゃんと p タグがあるかを確認します。

CSSは「書いた場所」と「HTMLのタグ」がつながって初めて効きます。

ここだけ押さえればOK

今回のまとめ

HTMLから CSS を読み込むには link タグを使う
CSSは style.css に分けて書く
color / font-size / background-color の3つで最初は十分
“どこを、どう変えるか” の形で読めればOK

ママのための1ヶ月

フリーランス向け報酬即日払いサービス

できた判定

今日のゴール確認

ここまでできたらOKです。

style.css を作れた
HTML と CSS をつなげられた
見た目が変わる体験ができた
CSSの最初の書き方が分かった

※練習少しだけ変えてみる適用前
確認用の.zipファイルを置いておきます。

CSS1-1 ダウンロード

次に読む

CSS 1-2へ

次は「余白」です。
margin と padding を使って、ページを“窮屈じゃない見た目”に整えていきます。

次へ：CSS 1-2 余白を整えるへ進む

PR：最初の1冊（必要な方だけ）

PR：HTML/CSSを進めるための参考（必要な方だけ）
最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

リンク

#CSS #style.css #webプログラミング #初心者 #見た目