01 / WEBSITE BASICS
この講座で、何をできるようにするか。
相対パス・代替テキスト・リンク先を理解し、素材と移動先が正しく伝わるページを作る。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- 画像のsrcとパスを説明し、画像参照の記録を作る。
- altの目的を説明し、画像と代替説明の表を作る。
- 大きさと表示を説明し、画像サイズの確認表を作る。
- ページ内・相対・外部リンクを説明し、ナビゲーションを作る。
- リンクの文言と操作を説明し、分かりやすいリンク一覧を作る。
- 素材の利用条件と検証を説明し、素材台帳とリンク確認票を作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
画像のsrcとパス
詳しく見る
学習テーマ 1
imgのsrcで画像ファイルを指定します。大文字・小文字、拡張子、フォルダーの位置が合わないと、PCでは見えても公開先で失敗する場合があります。
assets/cafe.svgを表示し、わざとファイル名を変えた失敗と元に戻した表示を比較する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
altの目的
詳しく見る
学習テーマ 2
画像を使えない状況でも必要な情報が伝わるよう、意味に合う代替テキストを付けます。純粋な装飾なら空のaltを選ぶ等、画像の目的で考えます。ファイル名をそのまま読み上げる説明で十分とは限りません。
カフェのイメージとメニュー写真の目的を分け、必要なaltを自分の言葉で書く。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
大きさと表示
詳しく見る
学習テーマ 3
画像は元の寸法と表示サイズを分け、幅と高さの比を保ちます。max-widthとheight:auto等で狭い画面へ合わせます。大きな写真は必要な解像度と容量を考えます。
同梱画像のwidthとheightを読み、表示幅を変えて歪まないか確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
ページ内・相対・外部リンク
詳しく見る
学習テーマ 4
hrefは移動先です。#menuはページ内のid、別HTMLはファイルへの相対パス、httpsから始まるものは外部URL等として考えます。targetの動作も利用者へ不意な変化を起こさないようにします。
メニューとアクセスへのページ内リンクを作り、idを変える前後で動作を確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
リンクの文言と操作
詳しく見る
学習テーマ 5
「こちら」だけでなく、何へ移動するかが分かる文言にします。リンクと実行ボタンは役割が違い、クリックする見た目だけで作りません。キーボードで移動でき、フォーカスの位置が分かるかを確認します。
メニューを見る、営業時間を確認する等の文言を付け、TabとEnterで移動する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
素材の利用条件と検証
詳しく見る
学習テーマ 6
公開する画像・文章の利用条件、必要な表示、個人情報の写り込み等を確認します。自分で作った学習用の素材か、利用を許されたものを使い、出典と条件を記録します。
同梱の独自SVGと自分で作った文章だけでページを完成し、リンクと画像を全て確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：画像・リンクを配置するを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「画像・リンクを配置する」を学びます。最初の場面は「imgのsrcで画像ファイルを指定します。」。何を確かめ、どう対応するかを順に見ていきましょう。
imgのsrcで画像ファイルを指定します。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. 画像のsrcとパス
アオイ：imgのsrcで画像ファイルを指定します。
学習ポイント：画像参照の記録
2. altの目的
ミナト：画像を使えない状況でも必要な情報が伝わるよう、意味に合う代替テキストを付けます。
学習ポイント：画像と代替説明の表
3. 大きさと表示
アオイ：画像は元の寸法と表示サイズを分け、幅と高さの比を保ちます。
学習ポイント：画像サイズの確認表
4. ページ内・相対・外部リンク
ミナト：hrefは移動先です。
学習ポイント：ナビゲーション
5. リンクの文言と操作
アオイ：「こちら」だけでなく、何へ移動するかが分かる文言にします。
学習ポイント：分かりやすいリンク一覧
6. 素材の利用条件と検証
ミナト：公開する画像・文章の利用条件、必要な表示、個人情報の写り込み等を確認します。
学習ポイント：素材台帳とリンク確認票
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
assets/cafe.svgを表示し、わざとファイル名を変えた失敗と元に戻した表示を比較する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
同梱画像のwidthとheightを読み、表示幅を変えて歪まないか確認する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
同梱の独自SVGと自分で作った文章だけでページを完成し、リンクと画像を全て確認する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
相対パス・代替テキスト・リンク先を理解し、素材と移動先が正しく伝わるページを作る。
- 画像参照の記録
- 画像と代替説明の表
- 画像サイズの確認表
- ナビゲーション
- 分かりやすいリンク一覧
- 素材台帳とリンク確認票
08 / WEBSITE BASICS