01 / WEBSITE BASICS
この講座で、何をできるようにするか。
意味のあるHTMLで見出し・本文・リスト・構造を作り、見た目だけの区切りと区別する。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- 文書全体の骨組みを説明し、HTMLの骨組みを作る。
- 見出しと段落を説明し、見出しと本文を作る。
- リストとまとまりを説明し、リストを含む本文を作る。
- header・nav・main・section・footerを説明し、意味のある構造を作る。
- 属性と入れ子を説明し、HTML読解と修正記録を作る。
- 骨組みの確認を説明し、骨組み完成版HTMLを作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
文書全体の骨組み
詳しく見る
学習テーマ 1
DOCTYPE、html、head、bodyの役割を分けます。headは文字コードやタイトルなどの情報、bodyは主な表示内容を置く場所です。langで文書の言語を示します。
サンプルでlang、charset、titleを見つけ、タブの表示名を変更する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
見出しと段落
詳しく見る
学習テーマ 2
h1等の見出しは文書の構造を示し、pは段落を表します。大きさの好みだけで見出しを選ばず、階層を読み取れる構成にします。改行の連打で余白を作る役割はCSSへ分けます。
店名をh1、メニューとアクセスをh2、その下の説明をpで作る。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
リストとまとまり
詳しく見る
学習テーマ 3
順序のない項目はul、順番のある手順はol等を使います。見た目の記号を手入力するのではなく構造を持たせます。意味に合う要素を使うと、表示以外の利用にもつながります。
メニュー3件をul、来店までの道順をolで記述する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
header・nav・main・section・footer
詳しく見る
学習テーマ 4
ページの案内、ナビゲーション、主な内容、まとまり、末尾の情報を意味で分けます。divだけでも表示はできる場合がありますが、意図を表す要素を選び、見出しを対応させます。
サンプルへmainとsectionを作り、各sectionに見出しとidを付ける。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
属性と入れ子
詳しく見る
学習テーマ 5
属性はid、class、href等の情報を要素へ付けます。開始と終了、引用符、入れ子をそろえ、タグを画面へ表示する場合はエスケープします。img等は終了タグを持たない要素です。
終了タグを一つ欠いた例と正常例を比べ、要素ツリーが変わる理由を記録する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
骨組みの確認
詳しく見る
学習テーマ 6
CSSがなくても読む順と意味が通るかを確かめます。見出しだけを追って内容が分かるか、主な内容が一つのmainへまとまるか、idが重複していないかを確認します。
スタイルを外した状態で構造を説明し、見出しと順序を修正する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：HTMLでページの骨組みを作るを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「HTMLでページの骨組みを作る」を学びます。最初の場面は「DOCTYPE、html、head、bodyの役割を分けます。」。何を確かめ、どう対応するかを順に見ていきましょう。
DOCTYPE、html、head、bodyの役割を分けます。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. 文書全体の骨組み
アオイ：DOCTYPE、html、head、bodyの役割を分けます。
学習ポイント：HTMLの骨組み
2. 見出しと段落
ミナト：h1等の見出しは文書の構造を示し、pは段落を表します。
学習ポイント：見出しと本文
3. リストとまとまり
アオイ：順序のない項目はul、順番のある手順はol等を使います。
学習ポイント：リストを含む本文
4. header・nav・main・section・footer
ミナト：ページの案内、ナビゲーション、主な内容、まとまり、末尾の情報を意味で分けます。
学習ポイント：意味のある構造
5. 属性と入れ子
アオイ：属性はid、class、href等の情報を要素へ付けます。
学習ポイント：HTML読解と修正記録
6. 骨組みの確認
ミナト：CSSがなくても読む順と意味が通るかを確かめます。
学習ポイント：骨組み完成版HTML
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
サンプルでlang、charset、titleを見つけ、タブの表示名を変更する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
メニュー3件をul、来店までの道順をolで記述する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
スタイルを外した状態で構造を説明し、見出しと順序を修正する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
意味のあるHTMLで見出し・本文・リスト・構造を作り、見た目だけの区切りと区別する。
- HTMLの骨組み
- 見出しと本文
- リストを含む本文
- 意味のある構造
- HTML読解と修正記録
- 骨組み完成版HTML
08 / WEBSITE BASICS