HTML/CSS：HTMLとは・最初のページ
1学習の目的
- HTMLがWebページの「骨組み」であることを理解し、自分の手で1枚のページを作れるようになる。
- タグの書き方と、文書全体の決まった形（テンプレート）を覚える。ここから先のすべての章の土台になる。
2基礎解説
HTMLはWebページの骨組みを作る言語です。文字に「これは見出し」「これは段落」と意味の札を貼るのがHTMLの仕事。見た目を整えるのはCSS（HT07以降）の役割です。
| 用語 | 書き方 | 意味 |
|---|---|---|
| タグ | <p> | 要素の始まりを示す印 |
| 終了タグ | </p> | スラッシュ付きで終わりを示す |
| 要素 | <p>本文</p> | タグ＋中身のひとまとまり |
| 属性 | <html lang="ja"> | 要素に追加する情報 |
- タグは開いたら必ず閉じる。<p> で始めたら </p> で終える。閉じ忘れると表示が崩れる原因になる。
- 文書の形は決まっている。<!DOCTYPE html> → <html> → <head> と <body>。この形は毎回同じなので覚えてしまう。
- <head> は「設定」、<body> は「中身」。ページのタイトルや文字コードは head に、実際に表示される文章は body に書く。
- <meta charset="UTF-8"> を忘れると日本語が文字化けする。head の先頭に必ず書く。
- 閉じタグが不要なタグもある。<br>（改行）や <img>（画像）は中身を持たないので、単独で書く。
実行方法：テキストエディタで index.html という名前で保存し、そのファイルをブラウザで開くだけ。インストールも準備も要りません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これは段落です。</p>
<p>改行は<br>このように書きます。</p>
<!-- これはコメント。画面には表示されません -->
</body>
</html>
<!--
<title> → ブラウザのタブに出る文字
<h1> → 最も大きな見出し
<p> → 段落（paragraph）
<br> → 改行（閉じタグ不要）
-->
3基本ドリル（10問）
h1 の中身が「はじめてのページ」
<h1>文字</h1> の形で書く。開いたら閉じるのを忘れない。
<h1>はじめてのページ</h1>
h1 は最も大きな見出し。ページに1つだけ使うのが基本で、そのページが何についてのものかを示す。
A. <div> B. <p> C. <span> D. <text> 選択★☆☆無料
解答 == B
paragraph（段落）の頭文字。
B
p は paragraph の略。文章のひとまとまりを表す、最も基本的なタグ。
p が2個。1つ目が「1行目」
<p>〜</p> を2回書く。
<p>1行目</p> <p>2行目</p>
段落は自動的に上下に余白が付く。ブラウザが最初から持っているスタイルによるもので、CSSで変更できる（HT11）。
<h1>タイトル____
h1 の中身が「タイトル」
終了タグはスラッシュを付けて書く。5文字。
</h1>
終了タグは </タグ名>。スラッシュの位置を間違えないよう注意する。
A. ページが表示されない B. 日本語が文字化けすることがある C. 画像が出ない D. 何も起きない 選択★☆☆無料
解答 == B
charset は文字コードの指定。
B
文字コードの指定が無いと、ブラウザが推測して読み込む。日本語のページでは文字化けの原因になるので、必ず書く。
br が1個。p の中に改行がある
<br> は閉じタグが不要な特殊なタグ。
<p>前半<br>後半</p>
br は閉じタグを書かない。中身を持たないタグ（空要素）は、単独で使う。
<meta charset="____"> <title>ページ</title>
文字コードが UTF-8
世界中の文字を扱える標準的な文字コード。5文字。
UTF-8
UTF-8 は日本語を含む世界中の文字を扱える。現在のWebでは事実上の標準になっている。
A. <body> の中 B. <head> の中 C. <html> の外 D. どこでもよい 選択★★☆広告解放
解答 == B
表示される中身ではなく、ページの設定情報。
B
head は「設定を書く場所」。タイトル・文字コード・CSSの読み込みなど、画面には直接出ないものを書く。
h1が「商品紹介」、pが「おすすめの商品です。」
h1 と p を続けて書く。
<h1>商品紹介</h1> <p>おすすめの商品です。</p>
見出し→本文という順序が基本の構造。この組み合わせがWebページの最小単位になる。
body のテキストが「本文です。」のみ
コメントは <!-- 〜 --> で囲む。
<!-- ここから本文 --> <p>本文です。</p>
コメントは画面に表示されない。自分や他の人がコードを読むときのメモとして使う。ただしソースを見れば読めるので、秘密の情報は書かない。
4実践シナリオ（5問）
h1と段落2つが正しく表示される
h1 の後に p を2つ並べる。
<h1>山田太郎</h1> <p>Webデザイナーです。</p> <p>東京在住です。</p>
これが最小のWebページ。見出しで「誰について」を示し、段落で内容を説明する——この構造はどんなページでも変わらない。
p 内に br が1個、両方の文字が含まれる
1つの p の中に br を入れる。段落を分けるのとは意味が違う。
<p>〒100-0001<br>東京都千代田区1-1-1</p>
住所のように「意味的にひとまとまりだが改行したい」場合は br を使う。段落を分けると別の内容として扱われてしまう。
h1・h2・pがそれぞれ正しい
h1 が最上位、h2 はその下の階層。数字が大きいほど小さい見出しになる。
<h1>会社概要</h1> <h2>事業内容</h2> <p>Web制作を行っています。</p>
見出しは h1 から h6 まであり、数字で階層を表す。文書の目次のような構造を作れる（HT02で詳しく扱う）。
title・lang・charset・h1・pがすべて正しい
DOCTYPE → html(lang) → head(meta, title) → body(h1, p) の順に書く。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>私のページ</title> </head> <body> <h1>ようこそ</h1> <p>はじめまして。</p> </body> </html>
この形が全HTMLファイルの土台。ここから先の章では body の中身に集中するが、実際にファイルを作るときは必ずこの枠が必要になる。
4つの要素が正しい順序と内容で存在する
見出しと段落を交互に配置する。
<h1>ノートPC</h1> <p>高性能な軽量ノートPCです。</p> <h2>特徴</h2> <p>バッテリーが12時間もちます。</p>
見出しで区切り、段落で説明する——この繰り返しが文書の基本構造。読み手は見出しだけを追って全体を把握できる。
5仕上げ課題
head に指定するもの
・文字コード：UTF-8
・言語：日本語（lang="ja"）
・タイトル：ゼロカラカフェ
body の内容（この順序で）
① h1：ゼロカラカフェ
② 段落：静かな時間を過ごせる隠れ家カフェです。
③ h2：営業時間
④ 段落：平日 9:00〜18:00 と 土日 10:00〜20:00 を1つの段落の中で改行して表示
⑤ h2：アクセス
⑥ 段落：東京都渋谷区1-2-3
⑦ コメント：今後メニューを追加予定（画面には表示されない）
※ h1は1つだけ、h2は2つ、pは3つになります。 総合★★★広告解放
title・lang・charset・見出し・段落・改行・コメントがすべて正しい
DOCTYPE から始まる完全な形で書く。④は1つの p の中に br を入れる。コメントは body の最後に書く。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ゼロカラカフェ</title> </head> <body> <h1>ゼロカラカフェ</h1> <p>静かな時間を過ごせる隠れ家カフェです。</p> <h2>営業時間</h2> <p>平日 9:00〜18:00<br>土日 10:00〜20:00</p> <h2>アクセス</h2> <p>東京都渋谷区1-2-3</p> <!-- 今後メニューを追加予定 --> </body> </html>
これで1枚のWebページが完成した。このファイルを index.html という名前で保存してダブルクリックすれば、ブラウザで表示される——サーバーもインストールも不要だ。
注目してほしいのは④の改行の使い分けだ。営業時間は「平日」と「土日」で行を分けたいが、意味としてはひとまとまりの情報なので、段落を2つに分けるのではなく1つの段落の中で <br> を使う。一方、③の営業時間と⑤のアクセスは別の話題なので、見出しで区切っている。「どこまでが1つの意味のかたまりか」を考えてタグを選ぶのがHTMLの本質だ。
そして今の時点では、このページはほとんど装飾されていない。文字は黒、背景は白、見出しは太字で大きいだけ——これはブラウザが最初から持っているスタイルによるもので、あなたが指定したわけではない。見た目を自分で決めるのがCSSの役割で、HT07から本格的に扱う。
次章では見出しと段落をさらに詳しく学ぶ。h1からh6までの使い分けと、文章に意味を持たせるタグを扱っていく。