完成見本と学習の全体像
完成形から、制作・公開・更新・終了までの道筋を説明できる。
目安45分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →まずは、図でつかもう
1 / 4
矢印を追い、各ポイントを押して確認しましょう。
全13章 / 演習込み目安 975分
まず完成見本から、1つの基本ルートで進みます。
手元のHTML・CSS → GitHub → Actions → Azure Free → 標準HTTPS URL
このサイトは教材です。契約・課金設定・サービス連携・クラウド作成を実行しません。外部操作は受講者本人が行います。
学習の目次と進捗
チェックとメモを同じブラウザーに保存。秘密情報は入力せず、記録は各章から書き出せます。
ホームページとAzureの基本的な仕組み
URLを開いて画面が表示される流れとHTTPSの役割を説明できる。
目安45分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
制作環境の準備
WindowsまたはmacOSに、編集と確認のための作業場所を用意できる。
目安60分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
HTMLで文章・画像・リンクを配置する
意味のある見出しと文章、代替テキスト付き画像、ページ内リンクを作れる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
CSSで色・余白・レイアウトを整える
セレクターとボックスモデルを使い、読みやすい見た目を作れる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
スマートフォンに対応する
狭い画面でも横にはみ出さず、文字・画像・リンクを使えるようにする。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
見本を自分のオリジナルページに変更する
読む人と目的に合わせ、見本から独自の静的サイトを完成させる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
AzureとGitHubのアカウント準備、料金・セキュリティの確認
Azure契約とFreeプラン、GitHub Actionsの利用条件を別々に確認できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
GitHubで制作ファイルを管理する
ブラウザーでファイル追加とコミット、差分確認を行える。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
Azure Static Web AppsでHTTPS公開する
Freeと正しいパスを選び、Actionsの成功後に標準HTTPS URLを確認できる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
内容の更新と、公開に失敗した場合の対処
コミットから公開までを追い、失敗工程を特定できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
利用状況の確認と、不要なリソースの削除
Azureリソース、Actions、リポジトリをそれぞれ継続・停止・削除判断できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
最終課題と完成チェック
制作・公開・更新・確認・削除を、自分の記録で説明できる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →公式情報と参考教材
公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。
- Microsoft：Static Web Appsプランと用途 ↗
- Microsoft：利用上限 ↗
- Microsoft：Azureアカウントと無料クレジット ↗
- Microsoft：Static Web Appsのブラウザー公開手順 ↗
- Microsoft：Freeの帯域超過時の扱い ↗
- Microsoft：ビルドとパスの設定 ↗
- Microsoft：予算通知 ↗
- GitHub：Actions無料利用量と課金 ↗
- GitHub：ブラウザーでファイルを追加 ↗
- GitHub：ワークフローの無効化 ↗
- Microsoft：デプロイトークンの管理 ↗
Mana著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］』は参考書として紹介します。公式の学習教材も参考リンクから確認できます。本文・図・コードは転載せず、教材とSVG素材は独自に作成しました。