COURSE 01
サイトの目的と構成を決める
誰に何を伝え、どんな行動へつなげるページかを決め、制作前の設計メモを作る。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →WEBSITE BASICS
ホームページ制作初級者
架空のお店のページを、目的と構成からHTML・CSS、スマートフォン対応、公開準備まで全8レッスンで作ります。
アニメと具体例手順付き演習成果物とレビュー解説付き確認問題
まずは、図でつかもう
1 / 4
矢印を追い、各ポイントを押して確認しましょう。
全8講座
共通課題：ひだまりカフェ
完成サンプルを見る →無料のテキストエディタとブラウザーで、HTML・CSS・同梱の画像を使います。完成サンプルと編集用のコード練習を用意しました。公開はここでは行わず、最後に次のクラウド講座へ渡すファイルを用意します。
仕組みを理解し、成果物で説明できるように。
読む→アニメで場面を追う→演習する→結果を比較する→成果物を残す→レビューする、の順で進めます。学習時間は演習や調査を含む目安です。
COURSE 02
エディタと制作環境を準備する
フォルダー・HTML・CSS・画像を整理し、保存とブラウザー更新の関係を理解する。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →
COURSE 03
HTMLでページの骨組みを作る
意味のあるHTMLで見出し・本文・リスト・構造を作り、見た目だけの区切りと区別する。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →
COURSE 04
CSSで色・文字・余白を整える
セレクターとプロパティ、ボックスモデルを理解し、読みやすい一貫した見た目へ整える。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →
COURSE 05
画像・リンクを配置する
相対パス・代替テキスト・リンク先を理解し、素材と移動先が正しく伝わるページを作る。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →
COURSE 06
スマートフォン表示に対応する
狭い幅でも順序と読みやすさを保ち、横へのはみ出しや操作しにくさを修正する。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →
COURSE 07
見やすさ・リンク切れを確認する
内容・操作・表示・参照ファイルを点検し、再現できる修正記録を残す。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →
COURSE 08
GitHubに保存して公開準備
HTML・CSS・画像を再現できる一式にし、変更管理と公開範囲を確認して次のクラウド公開へ進む。
6テーマ／アニメ／手順付き演習／成果物テンプレート／確認問題5問
教材を開く →