小さなページをつくる
近所のパン屋の、完全な一ページのサイトは約50行のHTMLにおさまり、その中の要素はどれもこれまでの九つの単元で学んだものです。
入力する前に計画する
HTMLを書く前に、ページが伝えるべきことを、ふつうの言葉で順番に書き出しましょう。小さなパン屋なら、店名、短いリンクのメニュー、今日焼くパン、営業時間、パンの写真、お知らせに登録する方法、住所といったところです。すると、項目ごとに要素が決まります。店名は <header> の中の <h1>、リンクは <nav> に、営業時間は表、パンの一覧は <ul>、登録はフォーム、住所は <footer> に入れます。先に内容を計画するのは、プロのチームもしていることです。HTMLはそこから決まってきます。
完成した構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corner Bakery</title>
</head>
<body>
<header>
<h1>Corner Bakery</h1>
<nav>
<ul>
<li><a href="#today">Today</a></li>
<li><a href="#hours">Hours</a></li>
<li><a href="#news">News</a></li>
</ul>
</nav>
</header>
<main>
<section id="today">
<h2>Baked today</h2>
<ul>...</ul>
</section>
<section id="hours">
<h2>Opening hours</h2>
<table>...</table>
</section>
<section id="news">
<h2>Get our news</h2>
<form>...</form>
</section>
</main>
<footer>
<p>12 Mill Street, Springfield</p>
</footer>
</body>
</html>headに新しい行が二つあります。<meta name="viewport" content="width=device-width, initial-scale=1"> は、パソコンの画面のふりをしてページを縮めるのではなく、実際の画面の幅を使うようスマートフォンに伝えます。CSSのコースのレスポンシブデザインの単元でくわしく説明します。メニューは <nav> の中のリンクのリストで、スクリーンリーダーは「ナビゲーション、リスト、3項目」と読み上げます。メニューの各リンクは節の id を指しているので、ページはスクロールする一つの文書としてはたらきます。
レビュアーのように確かめる
ページを書き終えたら、注意深いレビュアーのように見直しましょう。見出しだけを読んでみます。ページの流れがわかりますか。上からTabを押してみます。すべてのリンクと入力欄に筋の通った順でたどり着けますか。フォーカスがどこにあるか見えますか。すべての画像を見ます。代替テキストは画像がなかったら失われることを伝えていますか。それとも画像が飾りなので空になっていますか。すべてのラベルをクリックします。入力欄にフォーカスが移りますか。最後に、ページをvalidator.w3.orgのW3C Markup Validation Serviceに貼りつけましょう。閉じていない要素や重複したidのようなまちがいを一覧にしてくれます。
ページの見た目は地味です。白地に黒い文字、青いリンク、ブラウザーの標準フォントです。それでかまいませんし、むしろ役に立ちます。よいHTMLで書いたページは、それだけでどの機器でも読め、キーボードやスクリーンリーダーで使え、印刷もできます。CSSのコースは、まさにこういうページから始めて、HTMLを一行も変えずに、色、余白、レイアウトを上に加えていきます。
少しずつつくる
ページは少しずつ書き、一歩ごとに結果を見ましょう。まず骨組み、次にヘッダーとメニュー、それから節を一つずつです。何かおかしく見えても、確かめるのは新しく書いた数行だけですみます。自分のコンピューターでは、ファイルを index.html として保存し、ダブルクリックで開きます。ブラウザーはディスクから直接表示します。公開するには、同じファイルをウェブホスティングにアップロードします。すると最初の単元の始まりと同じように、そのアドレスを求めた人にサーバーがファイルを送ります。
| viewportのmetaタグ | 実際の画面の幅を使うようスマートフォンに伝える |
| バリデーター | validator.w3.org がHTMLのまちがいを一覧にする |
| フォーカス | 今キーボードの入力を受けとる要素 |
| 内容が先 | ページが伝えることを計画してから要素を選ぶ |
| シングルページのサイト | メニューのリンクが同じページの節のidを指す |
- パン屋の営業時間を入れるのは
- a table
- a nav
- an aside
- パン屋の店名はどこに入れますか？
- headerの中のh1
- footerの中のp
- 画像のalt
- メニューのリンクが #hours を指しています。ページに何がなければなりませんか？
- id="hours" の要素
- hours.html というファイル
- hours というクラス
- viewportのmetaタグは何をしますか？
- スマートフォンに実際の画面の幅を使わせる
- メニューを加える
- 言語を決める
- キーボードで操作できるか確かめるとき、くり返し押すキーはどれですか？
- Tab
- Esc
- Delete
- 重複したidのようなHTMLのまちがいを一覧にするサービスはどれですか？
- validator.w3.org
- caniuse.com
- example.com
- お知らせに登録するボックスは
- ラベルつきのメール入力欄があるフォーム
- 「メールをください」と書いた段落
- 表
- 外側から内側へ並べましょう：body、main、section、h2
- CSSがないとページは地味に見えます。それは問題ですか？
- いいえ。読めてアクセシブル。見た目はCSSが加える
- はい。HTMLがまちがっている
- はい。文字を表示するにはCSSが必要
- 内容を順番に計画し、それぞれの部分に要素を選びます。
- 骨組み、navのあるheader、sectionのあるmain、footer。
- 見出し、Tab、代替テキスト、ラベル、W3Cのバリデーターで見直します。
このコースの出典 (10)
- WHATWG, HTML Living Standard (html.spec.whatwg.org, checked 2026-10-17)
- MDN Web Docs, Learn web development: Structuring content with HTML, and the HTML element reference (developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content and developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements, checked 2026-10-17)
- MDN, HTML images (alt text guidance, checked 2026-10-17)
- W3C WAI, Images tutorial and alt decision tree (w3.org/WAI/tutorials/images/decision-tree, checked 2026-10-17)
- CERN, A short history of the Web (home.cern/science/computing/the-birth-of-the-web/short-history-web/, checked 2026-10-17)
- W3C and WHATWG memorandum of understanding, 28 May 2019 (w3.org/2019/04/WHATWG-W3C-MOU.html, checked 2026-10-17)
- W3C, Using ARIA, first rule of ARIA use (w3.org/TR/using-aria/, checked 2026-10-17)
- W3C Markup Validation Service (validator.w3.org, checked 2026-10-17)
- MDN, Viewport meta element (checked 2026-10-17)
- Every code exercise was checked with a Playwright probe against a reference solution.
確認日: 2026-10-17