Webページの骨組みを作る

Lesson 01 ／全4回

<HTML> Webページの骨組みを作る

タグって何？から、自分でページを書けるところまで。プログラミングがまったく初めてでも大丈夫です。

</>

WHAT IS IT?HTMLは「何が書いてあるか」を伝える言葉

私たちが見ているWebページは、じつは「これは見出し」「ここは段落」「ここは画像」といった部品の集まりでできています。その一つひとつが何なのかをコンピュータに伝えるための言葉が HTML（エイチ・ティー・エム・エル）です。

家にたとえるなら、HTMLは骨組み・間取りです。壁の色やおしゃれな装飾（＝CSS、レッスン2で学びます）は後回しで、まずは「ここに部屋がある」を決めていくイメージです。

HOW IT WORKS「タグ」でテキストを囲む、これが基本のすべて

HTMLでは、文章をタグという目印で挟みます。多くのタグは「開始タグ」と「終了タグ」のセットで、その間に中身を書きます。終了タグには /（スラッシュ）が付くのが目印です。

example.html

<p>こんにちは</p>
└─┬─┘         └──┬──┘
  開始タグ        終了タグ（/ が付く）

上の p は「paragraph（段落）」の頭文字。「ここからここまでが1つの段落ですよ」という意味になります。このタグで囲むという考え方さえつかめば、HTMLの半分は理解できたようなものです。

用語メモ：タグの名前（pやh1など）を要素名、開始タグ〜終了タグ〜中身をまとめて要素（element）と呼びます。今は「タグで囲むんだな」だけ覚えればOKです。

STRUCTUREページ全体の「型」を覚えよう

どんなHTMLページも、だいたい次の形をしています。まずはこれを丸ごと写すつもりで眺めてください。

index.html

<!DOCTYPE html>            ← HTMLで書くという宣言
<html>
  <head>                 ← ページの設定（画面には出ない）
    <title>はじめてのページ</title>
  </head>
  <body>                 ← 画面に表示される中身はここ
    <h1>ようこそ</h1>
    <p>これが最初の段落です。</p>
  </body>
</html>

ポイントは入れ子（いれこ）になっていること。htmlの中にheadとbodyがあり、その中にさらにタグが入ります。マトリョーシカのように、外側のタグの中に部品を並べていきます。実際に文章を書いていくのは、ほぼ body の中だけです。

CHEAT SHEETまず使う7つのタグ

最初はこれだけで十分です。困ったらここに戻ってきてください。

見出し。h1が一番大きく、数字が増えるほど小さくなります。

<p>

段落。ふつうの文章のかたまり。

<a>

リンク。他のページへ飛ばせます。

<img>

画像を表示。終了タグが要らない特別なタグ。

箇条書きリスト。ul の中に li（項目）を並べます。

<br>

改行。ここで1行下げたいときに。

<div>

意味のない「箱」。まとめてレイアウトするのに使います。

ATTRIBUTESタグに情報を足す「属性」

リンクや画像は、タグ名だけでは足りません。「どこへ飛ぶ？」「どの画像？」を属性で指定します。属性は開始タグの中に 名前="値" の形で書きます。

links.html

<a href="https://example.com">サイトを見る</a>

<img src="cat.jpg" alt="ねこの写真">

覚えておくと便利：href はリンク先のアドレス、src は画像の場所、alt は画像が表示できないときの説明文（読み上げにも使われます）。

やってみよう

メモ帳（Windowsの「メモ帳」やMacの「テキストエディット」）を開いて、上の「型」のコードをそのまま書き写し、ファイル名を index.html にして保存します。そのファイルをダブルクリックすると、ブラウザで開けます。h1やpの中身を自分の言葉に書き換えて、保存し直して再読み込みしてみましょう。変えた通りに表示が変わったら成功です。

このレッスンのまとめ

HTMLはページの骨組みを作る言葉。中身が「何か」を伝える。
基本はタグで囲む。終了タグには / が付く。
ページは html → head／body という入れ子の型を持つ。文章は body に書く。
リンクや画像は属性（href・srcなど）で詳しい情報を足す。

次回 Lesson 02 ／ CSS — 骨組みに色や余白をつけて「見た目」を整えます。