HTML と CSS を学び始めたら、むずかしい説明よりもまずは”ちょっと動かしてみる”のがいちばんの近道です。
この記事では、文字の色を変えたり、見出しをつけたり、文章を書いたり、画像を表示したりといった”小さくてシンプルなできた！”を積み重ねながら、 HTML ・ CSS に少しずつ慣れていけるように進めていきます。
どれも1〜3分でできる内容なので、「とりあえず触ってみたい！」という気持ちのままサクッと始められます。
それでは最初のミニレッスン、文字を赤にする CSS 体験からスタートしましょう！
1分でできる！文字を赤にするだけのCSS体験
「 HTML と CSS をつなぐってどういうこと？」という疑問を、たった1分でスッキリ体験できるミニレッスンです。
まずは、文章の色を赤に変えてみましょう。
これは最もシンプルで、 CSS の仕組みが一瞬で理解できる練習です。
まずは HTML に文章を書いてみよう
VS Code で index.html を開いて、次のように書いてみてください
<p>こんにちは！</p><p> は段落（文章）のためのタグ
中に書いた”こんにちは！”がブラウザに表示される
次に CSS を作って、HTML とつなげよう
同じフォルダに style.css を作ります。
その中に、次の1行を書いてください
p {
color: red;
}p （段落）タグに対して文字色（ color ）を赤（ red ）にしますよ〜という指示
最後にHTMLでCSSを読み込む
HTML と CSS をつなぐために、 index.html の <head> の中にこの1行を入れます
<link rel="stylesheet" href="style.css">このコードを書くことにより index.html が style.css の内容を読んで p タグの文字が赤に変わります。
ブラウザで確認してみよう
index.html をダブルクリックして開くと…
“こんにちは！”の文字が赤くなっているはず！
もし変わらない場合は、下のつまずきポイントをチェックしてください。
つまずきポイントQ&A
- 文字が赤くならない…？
よくある原因は次の4つです
- style.css が保存できていない
- link タグのファイル名が間違っている（ style.css → styles.css など）
- index.html と style.css が同じフォルダにない
- 全角の記号を使ってしまっている
color：red;← 全角コロンのミス
どれも初心者が 100% 通る道なので安心してください。
ここまでのまとめ
- HTML と CSS をつなぐには
<link>が必要 - CSS は”どこに・どうする”を書く言語
- p タグを赤にするだけで CSS の仕組みが理解できる
- 表示されない時は”保存・パス・全角”を疑うと解決しやすい
はじめての見出し（h1タグ）を使ってみる
Web ページには”タイトル”や”大見出し”がありますよね。
この見出しを作るために使うのが h1 〜 h6 タグです。
まずは一番よく使う h1 タグを試してみましょう。
h1タグを書いてみよう
index.html に次の1行を書いてみてください
<h1>はじめての見出しです</h1><h1>は”一番大きな見出し”のタグ- ページのタイトルや重要な見出しに使う
- ブラウザでは太く・大きく表示される
実際にブラウザで見るとこう変わる
ブラウザで index.html を開くと
太くて大きい文字で表示されるはずです。
これは、 h1 には最初から”大きな文字にする”というルールがついているからです。
見出しタグは h1〜h6 まである
次のように数字が増えると、見出しのレベルが下がります
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し1</h3>
<h4>小見出し2</h4>
<h5>小見出し3</h5>
<h6>小見出し4</h6>よく使うのはh2とh3
- h1：ページのタイトル
- h2：大きめの項目
- h3：細かい説明
まずは h2 を使って”見出しをつける感覚”をつかんでみてください。
よくある失敗ポイント
ページに h1 は基本”1つだけ”。
理由は後の章で解説しますが、”ページの一番大事な見出しがどれかわかりにくくなる”ためです。
「大きいから h1 にしよう！」となりがちですが、数字が大きくなるほど細かい見出しに使う、というルールがあります。
見出しに CSS を合わせてみよう（おまけ）
せっかくなので、 CSS で少し色を変えてみましょう
style.css に
h1 {
color: blue;
}ブラウザを更新すると、
見出しが青くなります。
ここまでのまとめ
- h1 は”一番大きな見出し”を作るタグ
- 見出しタグは h1 〜 h6 まである
- 基本 h1 は1ページに1つ
- CSS で色をつけるとさらに分かりやすい
段落（pタグ）で文章を書いてみる
Web ページの文章を書くときに、もっともよく使うタグが p タグ（段落）です。
見出し（ h1 ）が”タイトル”なら、 p タグはその下に続く文章部分を表します。
pタグを書いてみよう
index.html に次のコードを書いてください
<p>これは段落として表示される文章です。</p><p>は「段落（ paragraph ）」の略- 普通の文章を書くときに使うタグ
- ブラウザでは、読みやすいように上下に少し余白がつく
pタグは文章を書くときの基本
文章を複数書くときは、 p タグを文章ごとに分けて書きます
<p>1つ目の段落です。</p>
<p>2つ目の段落です。</p>ブラウザでは、それぞれの段落の間に自然な余白が入ります。
改行（br）との違いを理解しておこう
初心者がよく迷うポイントです。
pタグ：段落を作る（文章のまとまり）
<p>これは段落です。</p>brタグ：ただの改行（1行下に移動）
こんにちは。<br>よろしくお願いします。- 文章のまとまり → p タグ
- 改行したい → br タグ
という使い分けでOK！
CSSで見た目を少し整えてみる（おまけ）
段落にも CSS を当ててみましょう
style.css に
p {
color: #333;
line-height: 1.6;
}color: #333;→ 文字がやさしい濃いグレーにline-height: 1.6;→ 行間が広がって読みやすくなる
CSS が”文章を読みやすくする”役割を持っているのが実感できます。
よくある失敗ポイント
<p>文章です。
<p>次の段落です。</p>レイアウト崩れの原因に。
文章がブロックで分かれてしまい不自然になります。
ここまでのまとめ
- p タグは”段落”を作るためのタグ
- br との違いは”段落か、ただの改行か”
- 複数の段落は p タグを分けて書く
- CSS で色や行間を整えられる
画像を表示してみよう（imgタグ体験）
Web ページに”画像を表示する”と聞くと難しそうに感じるかもしれませんが、実は1行書くだけで表示できます。
ただし、画像が表示されないトラブルが多いので、そのポイントもあわせて丁寧に説明していきます。
まずは画像を用意しよう
事前に、作業フォルダの中にある images フォルダに画像ファイルを入れてください。
例
- my-website/
- index.html
- style.css
- images/
- cat.png
画像は JPG / PNG / GIF / SVG など何でもOKです。
私は、 ChatGPT に生成してもらった画像を使います。
imgタグを書いてみよう
index.html に次を追加してみてください
<img src="images/cat.png" alt="猫の画像"><img>は画像を表示するタグsrcは画像ファイルの場所を書くところ（ source ＝ 場所）altは画像が表示できなかった時の説明文
この1行で、ページに画像が表示されるようになります。
ブラウザで確認してみよう
index.html を開くと……
cat.png の画像が表示されるはず！
もし何も出ない場合は、次のよくあるミスをチェックしてみてください。
よくあるミスと表示されない原因
初心者がつまずきやすいポイントはほぼこれです
パス（道）が間違っている
- images / cat.png → 正解
- image / cat.png → s が抜けている
- images / cats.png → ファイル名が違う
フォルダ名が日本語
- 画像 / cat.png
- 写真 / cat.png
日本語フォルダはエラーの原因になることがあります。
拡張子の間違い
cat.jpg なのに cat.png と書く
画像を保存し忘れている
意外とよくあるポイント。
CSSで画像の大きさを調整してみる（おまけ）
画像が大きすぎる場合は、 style.css に次を追加してみてください。
img {
width: 300px;
}
画像の幅が 300px に調整されます。
alt 属性は忘れずに
alt は”もし画像が表示されなかったときの代わりの説明文”です。
たとえば……
- ネットが遅くて画像が読み込めない
- 画面読み上げソフトを使う人
などに役立ちます。
SEO 的にも大事なので、初心者でも alt は必ず書いておきましょう。
ここまでのまとめ
- 画像は
<img src="images/ファイル名">で表示できる - 画像フォルダ（ images ）に入れておくのが基本
- 表示されない原因のほとんどは”パス（場所）”の間違い
- width で画像サイズを調整できる
- alt 属性は必ず書く
小さなプロフィールページを作ってみよう
ここまでで、
- 文字を書く（ p タグ）
- 見出しを書く（ h タグ）
- 画像を表示する（ img タグ）
- CSS で色を変える
といった基本は一通り触れました。
ここからは、それらをまとめてミニプロフィールページを作ってみましょう！
たった数行で”ページっぽさ”を体験できます。
まずはHTMLを書いてみよう
index.html に、次のコードを書いてみてください
<h1>自己紹介</h1>
<img src="images/profile.png" alt="プロフィール画像">
<p>こんにちは！Web制作を勉強中です。</p>
<p>好きなものはコーヒーと猫です。</p>- h1：ページのタイトル
- img：プロフィール画像
- p：自己紹介の文章
“見出し・画像・文章”の3点セットで、一気に”ページらしさが出ます。
CSSで見た目を少し整えてみよう
style.css に次を追加します
h1 {
color: #333;
text-align: center;
}
img {
width: 150px;
border-radius: 50%;
display: block;
margin: 20px auto;
}
p {
text-align: center;
line-height: 1.6;
}- h1：中央揃えでタイトル感を出す
- img：丸く切り抜いてプロフィール写真風に
- img の margin: auto; → 画像を中央に
- p：文章を中央にして読みやすく
ブラウザで表示してみよう
index.html を開くと……
プロフィールカードのような見た目
簡単なのに”ページっぽさ”がグッと出る。
初めて触ったとは思えない仕上がりになります。
HTMLだけのやつとCSSを追加したやつの比較
左が HTML だけのやつで右が CSS を追加したやつです。
自分好みにアレンジしてみよう（自由課題）
ここからは、ぜひ自分の好みで編集してみてください
- 色を変える
- フォントサイズを変える
- 画像サイズを変える
- 文章を増やす
- 背景色をつける
ほんの少し触るだけでも、「自分のページを作ってる！」という実感が出ます。
よくあるミス
- 画像パスが間違っていて表示されない
- CSS を保存し忘れて反映されない
- border-radius が効かない（スペルミス）
- img の width を大きくしすぎる
どれも初心者が必ず通るので、落ち込まずにゆったり進めていきましょう。
ここまでのまとめ
- h1 、 img 、 p を組み合わせると一気に“ページっぽさ”が出る
- CSS で中央揃えや丸い画像が簡単に作れる
- 小さなプロフィールページでも達成感が大きい
- 自分好みにアレンジするのが上達の近道
今日できたこと＆次のステップ
ミニレッスンを進めたあなたは、実際に手を動かすことで HTML ・ CSS の「できた！」をしっかり体験できました。
ここでは、今日できるようになったことを振り返ってみましょう。
- CSS で文字色を変える体験ができた
- h1 タグで”見出し”を作れるようになった
- p タグで段落を書き分けられるようになった
- img タグで画像を表示できるようになった
- 見出し ＋ 画像 ＋ 文章を組み合わせて、ミニプロフィールページが作れた
- CSS で中央揃えや丸い画像など、ちょっとしたデザインがつけられた
“コードを書いたら見た目が変わる”という感覚がつかめていれば完璧です！
確認問題
文字を赤にするCSSとして正しいのはどれ？
p { color red }p { color: red; }p { red: color; }
答え：2.p { color: red; }
画像を表示するタグはどれ？
<pic><img><image>
答え：2.<img>
プロフィール画像を丸くしたい時に使うCSSは？
img {
border-radius: 50%;
}次は”HTMLの基本タグ”に進もう
ここまでで、 HTML ・ CSS の”基本タグ”や”書き方ルール”を実際に体験しながら理解できました。
次の章 【HTMLの基本タグ】 では、
- 見出し
- 段落
- 強調
- リンク
- 画像
- リスト
- div や span といった箱
など、ページ作りに欠かせないタグをもっとくわしく・分かりやすく解説していきます。
手を動かしながら、”使えるタグ”を増やしていきましょう！