01 / WEBSITE BASICS
この講座で、何をできるようにするか。
HTML・CSS・画像を再現できる一式にし、変更管理と公開範囲を確認して次のクラウド公開へ進む。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- 最終ファイルをまとめるを説明し、公開用ファイル一覧を作る。
- Gitの差分とコミットを説明し、変更履歴を作る。
- GitHubのリポジトリを説明し、保存・公開範囲の確認票を作る。
- 公開前の確認と承認を説明し、公開前レビュー票を作る。
- 次のクラウド公開への引継ぎを説明し、クラウドへ渡す一式を作る。
- 更新・戻し方・片付けを説明し、最終成果物と引継ぎメモを作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
最終ファイルをまとめる
詳しく見る
学習テーマ 1
公開する静的ファイルと、メモ・不要な生成物を分けます。index.htmlから参照するCSSと画像が相対パスで届き、フォルダーをコピーしても表示されるかを確認します。
完成サンプルの配置と自分のフォルダーを比べ、必要ファイルの一覧を作る。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
Gitの差分とコミット
詳しく見る
学習テーマ 2
変更前後を確認して、関連する編集を小さく記録します。履歴の説明へ変更の目的と確認結果を書きます。GitとGitHubを区別し、外へ送るファイルに秘密や不要な個人情報がないかを確かめます。
git status、git diffで対象を読み、ページ作成のコミットを作る。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
GitHubのリポジトリ
詳しく見る
学習テーマ 3
リポジトリの公開・非公開と、ホスティングするページの公開範囲は別の設定や条件が関わります。GitHub FreeのPages等を使う場合、対象リポジトリや機能の条件を公式資料で確認します。
利用が許可されたアカウントで保存する場合、リポジトリ名と公開範囲、含むファイルを事前に確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
公開前の確認と承認
詳しく見る
学習テーマ 4
ローカルで完成したことと公開が承認されたことは別です。文章、素材、リンク、架空情報の表示、公開する相手、更新と片付けの担当をそろえます。
公開レビュー用のチェック表を作り、確認済みと未確認を分ける。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
次のクラウド公開への引継ぎ
詳しく見る
学習テーマ 5
AWS、Azure、Google Cloudの講座では、この静的ファイル一式を使って公開・更新・終了を体験します。静的ページへ秘密のAPIキーを置いたり、フォームだけで予約の保存が完成したと説明したりしません。
index.html、styles.css、assetsを引き渡すZIPへまとめ、展開後の表示を再確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
更新・戻し方・片付け
詳しく見る
学習テーマ 6
修正した履歴と公開した版を対応させ、戻したい場合にどの版へ戻すかを説明できるようにします。公開URL、管理場所、利用条件、停止や削除の手順も次の学習で確認します。
最終版のデモを行い、変更方法と一つ前の内容へ戻す案を説明する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：GitHubに保存して公開準備を考える。
新人・アオイさんと先輩・ミナトさんの会話で、「GitHubに保存して公開準備」を学びます。最初の場面は「公開する静的ファイルと、メモ・不要な生成物を分けます。」。何を確かめ、どう対応するかを順に見ていきましょう。
公開する静的ファイルと、メモ・不要な生成物を分けます。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. 最終ファイルをまとめる
アオイ：公開する静的ファイルと、メモ・不要な生成物を分けます。
学習ポイント：公開用ファイル一覧
2. Gitの差分とコミット
ミナト：変更前後を確認して、関連する編集を小さく記録します。
学習ポイント：変更履歴
3. GitHubのリポジトリ
アオイ：リポジトリの公開・非公開と、ホスティングするページの公開範囲は別の設定や条件が関わります。
学習ポイント：保存・公開範囲の確認票
4. 公開前の確認と承認
ミナト：ローカルで完成したことと公開が承認されたことは別です。
学習ポイント：公開前レビュー票
5. 次のクラウド公開への引継ぎ
アオイ：AWS、Azure、Google Cloudの講座では、この静的ファイル一式を使って公開・更新・終了を体験します。
学習ポイント：クラウドへ渡す一式
6. 更新・戻し方・片付け
ミナト：修正した履歴と公開した版を対応させ、戻したい場合にどの版へ戻すかを説明できるようにします。
学習ポイント：最終成果物と引継ぎメモ
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
完成サンプルの配置と自分のフォルダーを比べ、必要ファイルの一覧を作る。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
利用が許可されたアカウントで保存する場合、リポジトリ名と公開範囲、含むファイルを事前に確認する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
最終版のデモを行い、変更方法と一つ前の内容へ戻す案を説明する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
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