完成見本と学習の全体像
完成形から、制作・公開・更新・終了までの道筋を説明できる。
目安45分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →GOOGLE CLOUD BASICS
作る。公開する。更新し、片付ける。
基本はFirebase Hosting Spark。全13章の制作・公開・運用に、Cloud Runの発展課題1章を加えた全14章です。
アニメと具体例手順付き演習成果物とレビュー進捗保存・完了チェック
まずは、図でつかもう
1 / 4
矢印を追い、各ポイントを押して確認しましょう。
全14章 / 演習込み目安 1110分
まず完成見本から、1つの基本ルートで進みます。
手元のHTML・CSS → 専用Sparkプロジェクト → Firebase Hosting → 標準HTTPS URL
このサイトは教材です。契約・課金設定・サービス連携・クラウド作成を実行しません。外部操作は受講者本人が行います。
| 比較する項目 | Firebase Hosting Spark：基本 | Cloud Run：発展 |
|---|---|---|
| 支払い・契約 | 課金アカウント不要。Sparkを確認 | 有効なCloud Billingアカウントが必要 |
| 無料条件 | 保存10GB、転送10GB/月。プロジェクト単位 | リクエスト課金の実行無料量。ビルド・保存・通信は別条件 |
| 上限後 | 保存上限で新規公開不可／転送上限で猶予後停止 | 従量課金の超過・対象外分は課金 |
| 操作 | CLIで静的ファイルを公開 | IAM・API・コンテナ・ビルド・保存の管理 |
| 選定理由 | HTML/CSS初心者が静的サイトの公開に集中できる | Google Cloud基盤と実行環境を学ぶ人向け。第14章 |
学習の目次と進捗
チェックとメモを同じブラウザーに保存。秘密情報は入力せず、記録は各章から書き出せます。
ホームページ、Firebase、Google Cloudの基本
URLを開いて画面が表示される流れとHTTPSの役割を説明できる。
目安45分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
制作環境の準備
WindowsまたはmacOSに、編集と確認のための作業場所を用意できる。
目安60分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
HTMLで文章・画像・リンクを配置する
意味のある見出しと文章、代替テキスト付き画像、ページ内リンクを作れる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
CSSで色・余白・レイアウトを整える
セレクターとボックスモデルを使い、読みやすい見た目を作れる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
スマートフォンに対応する
狭い画面でも横にはみ出さず、文字・画像・リンクを使えるようにする。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
見本を自分のオリジナルページに変更する
読む人と目的に合わせ、見本から独自の静的サイトを完成させる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
アカウントとプロジェクトの準備、無料条件とセキュリティの確認
Spark・Blaze・無料トライアルの違いを理解し、教材専用の対象を識別できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
ローカル環境で動作を確認する
publicフォルダーと設定ファイルを区別し、公開前にlocalhostで動作確認できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
ホームページをHTTPS公開する
対象プロジェクトを確認してHostingだけを公開し、標準URLで確認できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
内容の更新と、公開に失敗した場合の対処
小さく更新し、ログ・対象・ファイル・キャッシュの順に原因を切り分ける。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
利用状況・料金の確認と、不要な公開環境の削除
Sparkの使用量を点検し、Hosting停止とプロジェクト削除の範囲を区別できる。
目安75分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
最終課題と完成チェック
制作・公開・更新・確認・削除を、自分の記録で説明できる。
目安90分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →
発展課題：Cloud Runによる公開
課金・IAM・ビルド・コンテナ・通信を含め、静的配信との違いを説明できる。
目安150分 · 説明／手順／演習／完了チェック
0 / 3項目 完了
この章を開く →公式情報と参考教材
公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。
- Firebase：料金プランとCloudプロジェクトの関係 ↗
- Firebase Hosting：容量・転送量・上限時の扱い ↗
- Firebase CLI：OS別導入・認証・コマンド ↗
- Firebase Hosting：初期化と公開 ↗
- Firebase：ローカル確認と公開前テスト ↗
- Firebase：リリースとバージョン管理 ↗
- Google Cloud：無料トライアルと無料利用枠 ↗
- Cloud Run：実行・通信料金 ↗
- Cloud Build：ビルド料金 ↗
- Artifact Registry：保存・通信・スキャン料金 ↗
- Cloud Billing：予算通知 ↗
- Cloud Run：ソースからの公開・必要権限 ↗
- Google Cloud CLI：インストール ↗
- Google Cloud：プロジェクトの終了 ↗
Mana著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］』は参考書として紹介します。公式の学習教材も参考リンクから確認できます。本文・図・コードは転載せず、教材とSVG素材は独自に作成しました。