01 / WEBSITE BASICS
この講座で、何をできるようにするか。
狭い幅でも順序と読みやすさを保ち、横へのはみ出しや操作しにくさを修正する。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- viewportと柔軟な幅を説明し、幅ごとの確認表を作る。
- メディアクエリーを説明し、切替条件付きCSSを作る。
- GridとFlexboxの使い方を説明し、レスポンシブ配置を作る。
- 画像・長い文字・はみ出しを説明し、はみ出しの修正記録を作る。
- 操作と読みやすさを説明し、操作のチェック表を作る。
- 複数の状態で確認を説明し、スマートフォン対応版一式を作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
viewportと柔軟な幅
詳しく見る
学習テーマ 1
viewportの指定と、固定幅だけにしないレイアウトを組み合わせます。スマートフォンの見かけ上の幅とCSSの扱う幅を区別し、最初から狭い画面の読み順を考えます。
meta viewportを確認し、320px、390px、768px程度の幅で表示を比べる。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
メディアクエリー
詳しく見る
学習テーマ 2
条件に応じてCSSの規則を変えます。機種名を列挙するより、内容が読みにくくなる幅を見て切り替えを設計します。切り替わる境界の前後を両方確かめます。
メニューを狭い幅では1列、広い幅では複数列へ変え、境界の前後を記録する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
GridとFlexboxの使い方
詳しく見る
学習テーマ 3
要素数と利用できる幅を考え、minmax、折り返し等を使って配置を調整します。表示順だけを変えて文書の意味やキーボードの順序を混乱させないようにします。
カード3枚の並びを折り返し、本文の順番と操作の順番が一致するか確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
画像・長い文字・はみ出し
詳しく見る
学習テーマ 4
画像や長いURL、固定のmin-widthが横幅を広げる原因になる場合があります。必要な領域だけ横スクロールにするか、折り返すかを内容で選び、ページ全体が意図せずはみ出さないようにします。
長い文字列を一つ入れ、どの要素が広がったかを要素パネルで調べる。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
操作と読みやすさ
詳しく見る
学習テーマ 5
狭い画面ではリンクの間隔や本文の大きさ、固定ヘッダーの被りにも注意します。見えることと押しやすいことは別で、拡大した状態や縦横の切替も確かめます。
指で押す位置を想定してリンク間隔を調整し、キーボードと拡大表示も確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
複数の状態で確認
詳しく見る
学習テーマ 6
開発者ツールの表示だけに頼りきらず、可能なら実際の端末でも確認します。画面の幅、ブラウザー、状態、期待、実際を記録して再現できるようにします。
広い画面、狭い画面、拡大表示の3状態で同じ情報を探し、問題を修正する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：スマートフォン表示に対応するを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「スマートフォン表示に対応する」を学びます。最初の場面は「viewportの指定と、固定幅だけにしないレイアウトを組み合わせます。」。何を確かめ、どう対応するかを順に見ていきましょう。
viewportの指定と、固定幅だけにしないレイアウトを組み合わせます。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. viewportと柔軟な幅
アオイ：viewportの指定と、固定幅だけにしないレイアウトを組み合わせます。
学習ポイント：幅ごとの確認表
2. メディアクエリー
ミナト：条件に応じてCSSの規則を変えます。
学習ポイント：切替条件付きCSS
3. GridとFlexboxの使い方
アオイ：要素数と利用できる幅を考え、minmax、折り返し等を使って配置を調整します。
学習ポイント：レスポンシブ配置
4. 画像・長い文字・はみ出し
ミナト：画像や長いURL、固定のmin-widthが横幅を広げる原因になる場合があります。
学習ポイント：はみ出しの修正記録
5. 操作と読みやすさ
アオイ：狭い画面ではリンクの間隔や本文の大きさ、固定ヘッダーの被りにも注意します。
学習ポイント：操作のチェック表
6. 複数の状態で確認
ミナト：開発者ツールの表示だけに頼りきらず、可能なら実際の端末でも確認します。
学習ポイント：スマートフォン対応版一式
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
meta viewportを確認し、320px、390px、768px程度の幅で表示を比べる。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
カード3枚の並びを折り返し、本文の順番と操作の順番が一致するか確認する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
広い画面、狭い画面、拡大表示の3状態で同じ情報を探し、問題を修正する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
狭い幅でも順序と読みやすさを保ち、横へのはみ出しや操作しにくさを修正する。
- 幅ごとの確認表
- 切替条件付きCSS
- レスポンシブ配置
- はみ出しの修正記録
- 操作のチェック表
- スマートフォン対応版一式
08 / WEBSITE BASICS