01 / AZURE BASICS
学習目標と所要時間
読む人と目的に合わせ、見本から独自の静的サイトを完成させる。
前提：前章までのファイルと学習記録を用意します。
02 / AZURE BASICS
説明：仕組みと具体例
この章の考え方
詳しく見る
オリジナル化は店名だけ変える作業ではありません。誰が、何を知り、次にどこへ進むかを決めます。自己紹介なら学んでいること・作ったもの・興味、趣味なら初心者に伝えたい楽しみ方、架空のお店なら特徴・商品・営業時間を整理します。
具体的な仕組み
詳しく見る
まず紙に見出しと情報の順番を描きます。画像がなくても意味が通る文章を書き、その後で必要な素材を選びます。実在する人の写真や連絡先、会社の資料、他サイトから拾った写真は、権利と公開の許可を確認せず使いません。同梱イラストをそのまま使っても構いません。
使うときの判断
詳しく見る
変更は文章→構成→色→余白の順に一つずつ行い、毎回保存して表示を比べます。新しい画像は配布・公開可能なものを自分で用意し、練習エリアではなく手元のassetsへ入れます。更新前のフォルダーを残すと、失敗した際に戻せます。
03 / AZURE BASICS
場面で学ぶ：見本を自分のオリジナルページに変更する
場面を順に追う解説アニメです。初期状態は停止しています。「次の場面」でゆっくり読むか、自動再生を選べます。動きを減らすOS設定では手動で進めます。
操作手順：一つずつ確かめる詳しく見る
04 / AZURE BASICS
- 「対象：初対面の同僚／目的：自分の学習内容を知ってもらう」等、目的を1行で書く。
- 主題・3つの節・ページ内リンクを紙に並べ、見本から必要な部分を選ぶ。
- HTMLの文章とリンクを変更し、画像の代替テキストも内容に合わせる。
- CSSの色と間隔を調整し、390pxと1280pxで再確認する。
- 個人情報・秘密情報・実在サービスとの誤認がないか公開前レビューする。
05 / AZURE BASICS
演習：自分で変え、結果を残す
見本から文章3か所以上、構成1か所以上、見た目2か所以上を変更する。変更の目的と、完成条件を満たした証拠を残す。
対象と目的／使用環境／変更した内容／期待した結果／実際の結果／失敗時に確かめたこと／まだ未実施のことを記録してください。スクリーンショットに認証情報や請求の個人情報を含めません。
06 / AZURE BASICS
安全なコード練習：編集して確認
HTML・CSS専用の練習です。JavaScript、外部通信、フォーム送信を実行しません。画像は同梱cafe.svgのみ表示します。変更は自動保存されません。残す場合はエディターへコピーしてください。
07 / AZURE BASICS
完了チェックと学習記録
説明できたこと、実際に確認したことだけをチェックします。学習進捗と下のメモは、このブラウザーのローカルストレージへ保存し、外部送信しません。別端末とは同期せず、サイトデータ削除・プライベートモード・保存禁止では保持できない場合があります。秘密情報は記入しないでください。
08 / AZURE BASICS
よくある失敗と対処
- リンク先のidを変えてリンクだけ古い：名称変更時は参照元も確認する。
- 秘密をHTMLコメントへ隠す：コメントも公開されるため削除する。
09 / AZURE BASICS
確認日と公式資料
公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。