無料サンプルレッスン：
Semantic HTML
受講すると、どんな授業になるのか。1つのレッスンを、課題からレビュー、合格基準まで、丸ごと公開します。
1. このレッスンのゴール
見た目ではなく「意味」でHTMLを書けるようになること。見出し・リスト・リンク・日付を、それぞれにふさわしい要素で書き分けます。
2. 課題
パン屋さんのサイトの「お知らせ一覧」を、HTMLで書いてください。
- 見出しは「お知らせ」
- お知らせは、日付とタイトルのセット
- タイトルを押すと、詳しいページへ移動する
3. 提出例（初稿）
見た目は完成していますが、HTMLとしては、いくつか問題があります。
<div class="news"> <div class="title">お知らせ</div> <div class="item" onclick="location.href='/news/1'"> <span>2026.10.01</span> 秋のカンパーニュ、はじめました </div> </div>
4. 講師のレビュー
- 見出しは見出しの要素で「お知らせ」は、この塊の見出しです。divではなく、h2で書きましょう。見出しがあると、読み上げソフトの利用者も、見出しで移動できます。
- 移動するものは、リンクでdivにonclickでは、キーボードでは押せず、新しいタブでも開けません。ページを移動するなら、a要素を使います。
- 並んでいるものは、リストでお知らせが何件あるのかが伝わるように、ulとliで書きましょう。日付はtime要素にすると、機械にも日付だと伝わります。
5. 修正版
<section aria-labelledby="news-h"> <h2 id="news-h">お知らせ</h2> <ul> <li> <time datetime="2026-10-01">2026.10.01</time> <a href="/news/1">秋のカンパーニュ、はじめました</a> </li> </ul> </section>
6. 合格基準
- 見出しを、h1〜h6の正しい階層で書けている
- ページを移動する要素が、すべてa要素になっている
- 並んでいる情報を、リストで書けている
- 日付をtime要素で書けている
- マウスを使わず、キーボードだけで全てのリンクにたどり着ける
※実際の受講では、提出した課題に講師が一人ひとりレビューを返し、合格基準を満たすまで一緒に直していきます。ここで紹介したレビューは、サンプルです。
初稿と修正版を比べて、自分で直す。
リンクをTabキーで選び、Enterキーで記事へ移動できるか確認します。初稿と修正版は見た目が似ていても、見出し・一覧・リンクの意味が異なります。
ブラウザ内だけで動く練習です。入力した内容は保存・送信されません。編集後に「実行して確認」を押してください。
初稿から修正してみましょう。「修正版を入れる」で解答例と比較できます。
無料で読める、
15のサンプル。
実際の受講と同じように、課題 → レビュー → 修正 → 合格基準まで公開しています。
見た目ではなく「意味」でHTMLを書き、読み上げ・検索・保守に強いマークアップへ直します。
02CSSレスポンシブCSS固定幅で崩れるカードを、clamp・grid・container queryを使って小さい画面でも破綻しない設計へ直します。
03Direction / UX情報設計とワイヤーフレーム装飾を始める前に、ユーザーが知りたい順番と事業側の目的を整理してワイヤーに落とします。
04UI DesignUIデザインレビュー色や装飾より先に、優先順位・余白・タイポグラフィで読みやすい画面へ修正します。
05JavaScriptJavaScript：フォームUIクリックで動けば終わりではなく、入力状態・エラー・キーボード操作まで含めてフォームを作ります。
06Accessibilityアクセシビリティ：操作とコントラスト自動チェックだけに頼らず、キーボード・フォーカス・コントラストを実際に確認します。
07WordPress / CMSCMS：更新しやすい設計ページを作るだけでなく、運用担当者が壊さず更新できる情報構造と入力項目を設計します。
08SEOSEO：検索意図とページ設計キーワードを詰め込むのではなく、検索する人の疑問とページの役割を合わせます。
09QA / TestingQA：公開前テスト自分の端末で見えたからOKではなく、正常系・異常系・実機・速度をチェックリスト化します。
10Deploy / Operation公開・運用：リリース設計ファイルをアップして終わりではなく、公開前確認・切り戻し・監視までを一つのリリースとして設計します。
11Direction / Client Workヒアリングと要件定義「何を作りたいですか？」だけで終わらず、背景・課題・優先順位・制約を聞き、制作要件に変換します。
12HTML / AccessibilityHTML：行と列が伝わる表表の見出しを見た目だけで済ませず、caption・th・scopeで関係を示します。行の入れ替えと一セルの更新を通して、原稿との照合まで練習する無料レッスンです。
13CSS / PrintCSS：紙に残す案内の設計画面のメニューを印刷時だけ外し、集合場所や持ち物を紙へ残す無料レッスンです。初稿の適用範囲を直し、印刷プレビューと通常表示の両方で合格条件を確かめます。
14JavaScript / DOMJavaScript：一覧の絞り込みカテゴリ選択を一覧表示へつなぐ無料レッスンです。全件・一致・0件・全件への復帰を実装し、結果の重複や件数のずれを初稿から修正して確認します。
15Operation / Handover運用：更新を引き継ぐ手順書担当が替わっても更新できる手順書を作る無料レッスンです。架空の休館案内を使い、編集元・確認者・公開担当・停止条件・公開後確認を一枚へ整理します。