01 / WEBSITE BASICS
この講座で、何をできるようにするか。
フォルダー・HTML・CSS・画像を整理し、保存とブラウザー更新の関係を理解する。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- ブラウザーとエディタを説明し、制作環境メモを作る。
- ファイル構成を説明し、フォルダー配置図を作る。
- 文字コードと拡張子を説明し、保存条件のチェック表を作る。
- 保存と再読み込みを説明し、編集と表示の比較記録を作る。
- 開発者ツールの入口を説明し、ツールでの観察メモを作る。
- 持ち運べる状態を説明し、制作フォルダー一式を作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
ブラウザーとエディタ
詳しく見る
学習テーマ 1
エディタでファイルの内容を編集し、ブラウザーで表示を確認します。画面が更新されないときは、保存先、拡張子、開いているファイル、再読み込みを区別します。
同梱サンプルを展開し、index.htmlをブラウザーとエディタでそれぞれ開く。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
ファイル構成
詳しく見る
学習テーマ 2
index.html、styles.css、assets/cafe.svgを同じプロジェクト内へ置きます。HTMLの相対パスはそのファイルの場所を基準に解決されるため、他のフォルダーへ動かした影響を考えます。
3つのファイルを配置図へ描き、HTMLからCSSと画像へのパスを記す。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
文字コードと拡張子
詳しく見る
学習テーマ 3
プレーンテキスト、UTF-8、.htmlや.cssの拡張子を確認します。index.html.txtになっていたり、リッチテキストで保存していたりすると期待する表示になりません。
ファイルの実際の拡張子を確認し、日本語をUTF-8で保存して再表示する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
保存と再読み込み
詳しく見る
学習テーマ 4
入力した変更は保存するまでブラウザーの表示へ反映しない場合があります。保存したファイルと開いたファイルが同じかを確認してから更新します。
ページの店名を変え、保存前と保存後に再読み込みして違いを記録する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
開発者ツールの入口
詳しく見る
学習テーマ 5
要素、Console、Network等はそれぞれ確認する情報が違います。初めはエラーの有無とCSS・画像が取得できているかを見ます。ツール内で見た目を変えても、元のファイルへ保存されたとは限りません。
ブラウザーの要素の色を一時変更し、再読み込みで戻ることとファイル編集の違いを確かめる。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
持ち運べる状態
詳しく見る
学習テーマ 6
PC内の絶対パスや外部への依存を不用意に使わず、プロジェクトをひとまとめにします。別の場所へコピーしても必要な素材がそろっているかを確認します。
プロジェクトを別の演習フォルダーへコピーし、HTML、CSS、画像が表示されるか確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：エディタと制作環境を準備するを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「エディタと制作環境を準備する」を学びます。最初の場面は「エディタでファイルの内容を編集し、ブラウザーで表示を確認します。」。何を確かめ、どう対応するかを順に見ていきましょう。
エディタでファイルの内容を編集し、ブラウザーで表示を確認します。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. ブラウザーとエディタ
アオイ：エディタでファイルの内容を編集し、ブラウザーで表示を確認します。
学習ポイント：制作環境メモ
2. ファイル構成
ミナト：index.html、styles.css、assets/cafe.svgを同じプロジェクト内へ置きます。
学習ポイント：フォルダー配置図
3. 文字コードと拡張子
アオイ：プレーンテキスト、UTF-8、.htmlや.cssの拡張子を確認します。
学習ポイント：保存条件のチェック表
4. 保存と再読み込み
ミナト：入力した変更は保存するまでブラウザーの表示へ反映しない場合があります。
学習ポイント：編集と表示の比較記録
5. 開発者ツールの入口
アオイ：要素、Console、Network等はそれぞれ確認する情報が違います。
学習ポイント：ツールでの観察メモ
6. 持ち運べる状態
ミナト：PC内の絶対パスや外部への依存を不用意に使わず、プロジェクトをひとまとめにします。
学習ポイント：制作フォルダー一式
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
同梱サンプルを展開し、index.htmlをブラウザーとエディタでそれぞれ開く。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
ファイルの実際の拡張子を確認し、日本語をUTF-8で保存して再表示する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
プロジェクトを別の演習フォルダーへコピーし、HTML、CSS、画像が表示されるか確認する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
フォルダー・HTML・CSS・画像を整理し、保存とブラウザー更新の関係を理解する。
- 制作環境メモ
- フォルダー配置図
- 保存条件のチェック表
- 編集と表示の比較記録
- ツールでの観察メモ
- 制作フォルダー一式
08 / WEBSITE BASICS