01 / AZURE BASICS
学習目標と所要時間
WindowsまたはmacOSに、編集と確認のための作業場所を用意できる。
前提：前章までのファイルと学習記録を用意します。
02 / AZURE BASICS
説明：仕組みと具体例
この章の考え方
詳しく見る
テキストエディターは文字でコードを編集する道具です。無料のVisual Studio Code等と、普段使う最新のブラウザーを使います。Wordなどの文書作成ソフトは、HTMLに不要な書式が入るので使いません。拡張機能や追加の有料サービスは必須ではありません。
具体的な仕組み
詳しく見る
ZIPは複数のファイルをまとめた圧縮ファイルです。WindowsはZIPを右クリックして「すべて展開」、macOSはFinderでダブルクリックして展開します。圧縮された中をそのまま編集せず、展開先で作業します。Windowsではエクスプローラーの表示設定でファイル名拡張子を表示します。macOSでもFinderの詳細設定で拡張子表示を確認します。
使うときの判断
詳しく見る
作業フォルダーの中は index.html、styles.css、assets/cafe.svg という構成です。index.htmlは入口、assetsは素材をまとめるフォルダーです。大文字・小文字、半角・全角、ハイフンを区別します。ファイルはUTF-8という日本語を扱える文字コードで保存します。
03 / AZURE BASICS
場面で学ぶ：制作環境の準備
場面を順に追う解説アニメです。初期状態は停止しています。「次の場面」でゆっくり読むか、自動再生を選べます。動きを減らすOS設定では手動で進めます。
操作手順：一つずつ確かめる詳しく見る
04 / AZURE BASICS
- エディターの公式サイトから対応OS版を入手し、起動する。会社PCはインストール規則に従う。
- 配布ZIPを展開し、cafe-siteフォルダーをエディターの「フォルダーを開く」で開く。
- index.htmlをブラウザーで開く。見本と同じ文章・色・画像があるか比べる。
- 見出しに「練習中」を加えて保存し、ブラウザーを再読み込みする。確認後に元へ戻す。
- 作業フォルダーとは別にバックアップ用コピーを作る。認証ファイルは入れない。
05 / AZURE BASICS
演習：自分で変え、結果を残す
エクスプローラーまたはFinderとエディターで同じ3ファイルの場所を示す。変更・保存・再読み込みの前後を記録する。
対象と目的／使用環境／変更した内容／期待した結果／実際の結果／失敗時に確かめたこと／まだ未実施のことを記録してください。スクリーンショットに認証情報や請求の個人情報を含めません。
07 / AZURE BASICS
完了チェックと学習記録
説明できたこと、実際に確認したことだけをチェックします。学習進捗と下のメモは、このブラウザーのローカルストレージへ保存し、外部送信しません。別端末とは同期せず、サイトデータ削除・プライベートモード・保存禁止では保持できない場合があります。秘密情報は記入しないでください。
08 / AZURE BASICS
よくある失敗と対処
- ファイルを2か所へ展開して別の方を編集：ブラウザーの場所とエディターの作業場所を照合する。
- 画像がない：assetsフォルダーを含めて展開したか確認する。
09 / AZURE BASICS
確認日と公式資料
公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。