前の記事

前の記事
フォルダとファイルの基本
【1-5】HTML・CSSのファイルの基本を覚えよう
2025年12月6日

次の記事

次の記事
実践ミニレッスン
【1-7】HTML・CSSでできることを1分で体験！実践ミニレッスン集
2025年12月6日

HTML と CSS に少し慣れてくると、次に気になってくるのが“書き方のルール”です。

タグの開き方・閉じ方、インデント（字下げ）、コメントの書き方などは、ちょっとしたことに見えますが、これができるとコードがぐっと読みやすくなります。

逆に、ここが曖昧なままだと

「どこが間違っているのかわからない…」

「 CSS が効かない原因が見つからない…」

といった小さなつまずきが増えてしまいます。

この記事では、初心者が最初に覚えておくと安心な HTML ・ CSS の基本ルールを、ていねいにわかりやすく紹介します。

それではまず、 HTML のタグの書き方から見ていきましょう。

目次 [ open ]

タグの書き方（開始タグと終了タグ）

HTML では、文章や画像などを表示するために”タグ”と呼ばれる印（しるし）を使います。

このタグは、“開く”と”閉じる”のセットで書くのが基本ルールです。

タグは”開始タグ”と”終了タグ”のセット

HTML のタグは、次のように2つで1セットです。

<p>ここに文章が入ります。</p>
HTML
  • <p> が開始タグ（開く）
  • </p> が終了タグ（閉じる）

このように、 / （スラッシュ）がついたほうが終了タグです。

文章や画像などを囲むことで、「ここは段落ですよ」「これは見出しですよ」とブラウザに伝える役割があります。

よく使うタグの例を見てみよう

見出し（h1）

<h1>タイトルです</h1>
HTML

段落（p）

<p>この文章は段落として表示されます。</p>
HTML

太字（strong）

<strong>強調したい部分</strong>
HTML

終了タグを忘れるとどうなる？

初心者の大定番ミスです。

<p>文章です。
<p>もう一つの段落です。</p>
HTML

これだとブラウザは、「どこまでが最初の p なの？」と迷ってしまい、レイアウトが崩れる原因になります。

HTML は意外と優しいので、多少のミスでは真っ白にはなりませんが、

  • デザインが崩れる
  • CSS が当たらない
  • どこが間違いかわかりにくい

といった問題が起きます。

タグは”入れ子構造”で書くのが基本（軽く触れておく）

HTML は箱の中に箱を入れていくように書くというルールがあります。

<div>
  <p>段落です。</p>
</div>
HTML

このような構造を 入れ子（いれこ） と呼びます。

入れ子については別章で詳しく解説しますので、今は「タグは順番とセットが大事なんだな」程度で OK！

ここまでのまとめ

  • HTML のタグは”開始タグ”と”終了タグ”が基本
  • 終了タグには / がつく
  • 閉じ忘れるとレイアウト崩れの原因になる
  • タグは”箱の中に箱を入れる”ように入れ子で書く

CSSの基本形：セレクタと中かっこ { }

CSS は、 HTML で作った内容に”デザイン（見た目）”をつける仕組みです。

色を変えたり、文字の大きさを変えたりする時は、 CSS の基本形を使って書きます。

まずはその形を覚えておきましょう。

CSSの基本形はこの3つでできている

CSS は、次の3つの組み合わせで成り立っています。

セレクタ {
  プロパティ: 値;
}
CSS

それぞれの意味はこうです

  • セレクタ（ selector ）
    • どの部分にデザインをつけるか（対象）
  • プロパティ（ property ）
    • 何を変えるか（色、サイズ、余白など）
  • 値（ value ）
    • どう変えるか（赤、20px、中央など）

この3つがセットで1つのデザインルールになります。

実際の例を見てみよう（文字を赤にする）

p {
  color: red;
}
CSS
このコードでなにをしているか

p （段落）タグに対して文字色（ color ）を赤色（ red ）にしてね

という指示をブラウザに伝えています。

中かっこ { } は”ここからここまでが1セット”という印

CSS は { と } の中にデザインのルールを書きます。

p {
  color: blue;
  font-size: 20px;
}
CSS

{ のあとから } の手前までが p タグに関するルールという意味です。

プロパティと値は”:（コロン）”でつなぐ

CSS は細かい記号が多くて、最初は慣れるまでちょっと大変です。

とりあえず今はこの3つだけ覚えておけばOK

プロパティ: 値;
CSS

例

color: red;
font-size: 20px;
background-color: yellow;
など
CSS

ここでよくあるミスは

  • セミコロンの付け忘れ
  • 全角コロン（ ： ）を使ってしまう

どちらも CSS が反映されなくなる原因になります。

よく使うプロパティを軽く紹介

今から全部覚える必要はありません。

ただ、よく使うものを少し紹介しておきます

  • color（文字色）
  • background-color（背景色）
  • font-size（文字サイズ）
  • margin（外側の余白）
  • padding（内側の余白）

この辺りはすぐに使いこなせるようになります。

HTML と CSS のつながりをイメージしてみよう

HTML （中身）

<p>こんにちは！</p>
HTML

CSS （見た目）

p {
  color: green;
}
CSS

こう書くと、

HTML の <p> に書いた文章が緑色（ green ）になって表示されるという流れです。

CSS は”どこに””どうする”を書く言語だと覚えておけばOK！

ここまでのまとめ

  • CSS は”セレクタ””プロパティ””値”の3つでできている
  • 基本形は”セレクタ { プロパティ: 値; }”
  • 中かっこ { } の中にデザインを書く
  • 記号のミス（全角やセミコロン忘れ）に注意
  • HTML の”どこに何をするか”を伝えるのが CSS

インデント（字下げ）って必要？どこで使う？

HTML ・ CSS を書いていると、スペースで少し内側にずらす”インデント（字下げ）”というものがよく出てきます。

最初は「別にズラさなくても動くのに…？」と思うかもしれませんが、実はコードを書く上でかなり大切な習慣なんです。

インデントとは”段を下げること”

インデントを軽く説明すると、階層が深くなるときに、少し右にずらす書き方のことです。

例

<body>
  <div>
    <p>文章です。</p>
  </div>
</body>
HTML

この、 <p> の前にある4つのスペースがインデント。

見た目を整えて、どこがどこの中に入っているかをわかりやすくしています。

インデントを使う理由は”読みやすくするため”

インデントの一番の目的はこれです

コードを読みやすくして、ミスに気づきやすくするため。

HTML や CSS は、動くには動くけど、終了タグを閉じ忘れたり { を閉じ忘れたりするとすぐにデザインが崩れてしまいます。

インデントがあると、どのタグがどこの中にあるかが見た目でわかるので、ミスに気づきやすくなります。

HTMLのインデントの基本

HTML は”入れ子構造（箱の中に箱）”なので階層ごとに1段ずつインデントします。

<body>
  <div>
    <p>ここは段落です。</p>
  </div>
</body>
HTML
  • <div> は <body> の中なので1段下げる
  • <p> は <div> の中なのでさらに1段下げる

というイメージです。

CSSのインデントの基本

CSS では { の中身をインデントします。

例

p {
  color: blue;
  font-size: 20px;
}
CSS

p のルールの中身を1段下げる。

どこまでが p に関するデザインなのか一目でわかる。

VS Codeが自動で整えてくれるので安心

実は VS Code には自動整形（自動インデント）の機能があります。

Windows なら Shift + Alt + F で自動でキレイに整えてくれます。

これ、初心者にめちゃくちゃ便利です！

スマホで例えると”フォルダの並びをそろえる”ようなもの

インデントは、スマホのアプリをフォルダごとに分けて見やすく並べるような感覚に近いです。

見た目が整っているだけで探しやすく・迷いにくくなるのと同じです。

ここまでのまとめ

  • インデントは”階層に合わせて右にずらす”こと
  • ミスに気づきやすくなるので超大事
  • HTML は入れ子構造に合わせて下げる
  • CSS は { } の中を下げる
  • VS Code で自動整形できるので安心

コメントアウトの書き方（メモを残す方法）

コードを書いていくと、

「ここはあとで直すメモ」

「この部分は何をしている？」

という説明を入れたい場面が必ず出てきます。

そんなときに使うのがコメントアウト（コメント）です。

コメントはブラウザには表示されないので、”自分や他の人へのメモ”として自由に書けます。

HTMLのコメントの書き方

HTML では、次のようにコメントを書きます

<!-- ここはコメントです -->
HTML
  • ブラウザには表示されない
  • コードを書く人にだけ伝わるメモ
  • タグの説明や区切りに使える

例

<!-- ここからプロフィールエリア -->
<div class="profile">
  <p>こんにちは！</p>
</div>
<!-- ここまでプロフィールエリア -->
HTML

こう書いておくと、「この div は何のため？」がすぐわかります。

CSSのコメントの書き方

CSS は HTML とはコメントの書き方が異なります

/* ここはCSSのコメントです */
CSS

例

/* 見出しデザイン */
h1 {
  color: blue;
  font-size: 28px;
}
CSS
  • /* から */ で囲んだ部分がコメントになる
  • 複数行まとめてコメントできる
  • CSS の整理にめちゃくちゃ便利

コメントは”未来の自分のため”に書くと思うと気がラクになる

コメントを書く目的は、”あとで見返したときにすぐ理解できるようにするため”です。

初心者のうちは、

  • 何のコードか忘れる
  • 何のためのクラス名だったかわからなくなる
  • CSS がどこからどこまで当たっているかわかりにくい

という状況が本当によくあります。

そこで、ちょっとしたメモを残しておくだけで、未来の自分がめちゃくちゃ助かります。

コメントアウトは消しちゃってもOK

コメントはブラウザには一切表示されないので、

  • 消しても大丈夫
  • いくら書いても問題なし
  • サイトの表示速度に影響もほぼない

なので、気軽に使っていきましょう。

ここまでのまとめ

  • コメントアウトは、コード中に書ける”メモ”
  • HTML → <!-- コメント -->
  • CSS → /* コメント */
  • あとで読み返すときの助けになる
  • いくら書いても表示されないので安心

よくあるミス（タグ閉じ忘れ・波カッコ閉じ忘れ）

HTML ・ CSS を書いていて、初心者がもっとも多く遭遇するトラブルが

  • タグの閉じ忘れ（ HTML ）
  • 中かっこ（ CSS ）の閉じ忘れ

の2つです。

これらはどちらも、画面が崩れたり CSS が反映されなくなる原因になります。

でも、原因を理解すればすぐに直せます！

HTMLの”タグ閉じ忘れ”

HTML は、開始タグと終了タグのセットで書くのが基本です。

<div>
  <p>文章です。
</div>
HTML

この場合、 </p> を閉じ忘れているため、

  • p タグの範囲がどこまでかわからない
  • レイアウトが崩れる
  • CSS も正しく当たらない

というトラブルが起きます。

<div>
  <p>文章です。</p>
</div>
HTML

閉じ忘れを防ぐコツ

  • VS Code が自動で </p> を補完してくれるのを活かす
  • インデント（字下げ）を使って見やすくする
  • タグを”箱の中に入れていく”イメージを持つ

特にインデントがあるだけで、「閉じてないのどこだっけ？」をすぐ見つけられます。

CSSの”中かっこ（ } ）閉じ忘れ”

CSS では、次のように { } で1セットのルールを書きます。

p {
  color: red;
  font-size: 20px;
}
CSS

ここでよくあるのが……

p {
  color: red;
  font-size: 20px;
CSS

最後の } を忘れてしまうパターン。

これをやると、

  • 以降のCSSがすべて認識されなくなる
  • 色が変わらない
  • レイアウトも変わらない
  • どこが悪いか見つけづらい

という「 CSS が反映されない！」現象が起きます。

;（セミコロン）の付け忘れも超あるある

これも本当によくあります。

p {
  color: red
  font-size: 20px;
}
CSS

color: red の後ろにセミコロンがないため、 CSS の解釈が崩れてしまいます。

p {
  color: red;
  font-size: 20px;
}
CSS

ミスを防ぐコツ（初心者でもできる）

VS Code の補完機能をフル活用

” { “を書いたら自動で” } “が入る拡張機能があります。

入れてみたい方は入れてみてください。

私は入れてません。

自動整形（Shift + Alt + F）

インデントがズレていたらすぐ気づけます。

小まめに保存してブラウザで確認

どこで崩れたかすぐわかるので原因特定が簡単。

これらのミスは”慣れ”で必ず減る

誰でも最初は閉じ忘れるので心配いりません。

むしろ、

  • インデント
  • コメント
  • 自動整形

を習慣にしておくと、自然とミスが起きにくくなるので成長スピードが速くなります。

ここまでのまとめ

  • HTML の閉じタグ忘れはレイアウト崩れの原因
  • CSS の } 閉じ忘れは CSS 全体が効かなくなることも
  • セミコロンの付け忘れもよくある
  • VS Code の補完・自動整形でミスを防げる
  • このあたりは慣れるほどミスしなくなる

今日できたこと＆次のステップ

HTML ・ CSS の”書き方ルール”は、一見シンプルに見えるけれど、実はコードを書くうえでとても大切な土台です。

今日ここまで身につけた内容は、今後どんなページを作るときにも役立つ”基礎力”になります。

できるようになったこと
  • HTML の”タグは開始と終了のセット”の意味がわかった
  • タグを閉じ忘れるとレイアウトが崩れる理由を理解した
  • CSS の基本形”セレクタ { プロパティ: 値; }”を書けるようになった
  • 中かっこ { } の役割がつかめた
  • インデント（字下げ）の必要性がわかり、コードが見やすく書けるようになった
  • HTML と CSS のコメントアウトが使えるようになった
  • よくあるミス（閉じ忘れ・セミコロン忘れ）を見分けられるようになった

これらができるだけで、”どこでエラーが起きているか”が自分で気づきやすくなり、コーディングのスピードが一気に上がります。

確認問題

HTMLの終了タグとして正しいのはどれ？

  1. <p>
  2. <p/>
  3. </p>
答え

答え：3.</p>

このCSSの間違いはどこ？

p {
  color: blue
  font-size: 20px;
}
CSS
答え

答え：color: blueのあとにセミコロンがない

見出し h1 の文字を赤にするCSSを書いてください

答え

例

h1 {
  color: red;
}
CSS

次は”実践ミニレッスン”に進もう

ここまでで”コードを書くための基本ルール”が身につきました。

次の実践ミニレッスンでは、今回覚えたルールをさっそく使いながら、

  • 文字を赤にする
  • 見出しを使う
  • 画像を表示する
  • 小さなプロフィールを作る

など、手を動かして「できる！」を増やしていくパートに入ります。

前の記事

前の記事
フォルダとファイルの基本
【1-5】HTML・CSSのファイルの基本を覚えよう
2025年12月6日

次の記事

次の記事
実践ミニレッスン
【1-7】HTML・CSSでできることを1分で体験！実践ミニレッスン集
2025年12月6日