01 / WEBSITE BASICS
この講座で、何をできるようにするか。
セレクターとプロパティ、ボックスモデルを理解し、読みやすい一貫した見た目へ整える。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- HTMLとCSSをつなぐを説明し、CSS接続の確認記録を作る。
- セレクターと宣言を説明し、共通スタイルを作る。
- 文字・行間・色を説明し、文字と色の設計表を作る。
- ボックスモデルを説明し、ボックスモデルの図を作る。
- レイアウトと幅を説明し、ページのスタイルシートを作る。
- 一貫性と確認を説明し、整えたHTMLとCSSを作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
HTMLとCSSをつなぐ
詳しく見る
学習テーマ 1
HTMLのlinkでスタイルシートを参照します。読み込めない場合は相対パス、ファイル名、保存、Network等を確認します。見た目が変わらない原因をCSSの値だけと決めつけません。
styles.cssの背景色を一箇所変更し、読み込みの有無を確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
セレクターと宣言
詳しく見る
学習テーマ 2
どの要素へ当てるかをセレクターで指定し、プロパティと値で見た目を決めます。classとidの役割、複数の規則が競合する場合の優先等を、実際の要素の表示から追います。
menu-cardというclassを複数要素へ付け、一つの規則で同じ見た目にする。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
文字・行間・色
詳しく見る
学習テーマ 3
文字サイズ、行間、文字色と背景の関係を整えます。細かく薄い文字だけを使って見た目を優先せず、読み手が読めるかを確認します。情報を色だけで区別しない表現も考えます。
本文の行間を変えて比較し、価格と説明を文字の重みや配置でも区別する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
ボックスモデル
詳しく見る
学習テーマ 4
content、padding、border、marginの役割を分けます。幅の計算とbox-sizingを理解し、余白の合計で狭い画面をはみ出さないようにします。
カードのpaddingとmarginを別々に変え、要素パネルで領域を観察する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
レイアウトと幅
詳しく見る
学習テーマ 5
通常の文書の流れ、Flexbox、Grid等を目的で使い分けます。固定幅だけに頼らず、max-width、割合、余白等を組み合わせ、本文の読み幅を保ちます。
メニューをGridで並べ、本文全体へmax-widthと中央の余白を設定する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
一貫性と確認
詳しく見る
学習テーマ 6
色や余白を繰り返し個別に決めると不揃いになります。共通のclassやCSS変数を使い、見出し・カード・リンク等で統一します。リンクのフォーカス表示を消さず操作の位置を伝えます。
同梱のCSSを読み、共通色と余白を変えて全体へ反映する。キーボードでもリンクを追う。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：CSSで色・文字・余白を整えるを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「CSSで色・文字・余白を整える」を学びます。最初の場面は「HTMLのlinkでスタイルシートを参照します。」。何を確かめ、どう対応するかを順に見ていきましょう。
HTMLのlinkでスタイルシートを参照します。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. HTMLとCSSをつなぐ
アオイ：HTMLのlinkでスタイルシートを参照します。
学習ポイント：CSS接続の確認記録
2. セレクターと宣言
ミナト：どの要素へ当てるかをセレクターで指定し、プロパティと値で見た目を決めます。
学習ポイント：共通スタイル
3. 文字・行間・色
アオイ：文字サイズ、行間、文字色と背景の関係を整えます。
学習ポイント：文字と色の設計表
4. ボックスモデル
ミナト：content、padding、border、marginの役割を分けます。
学習ポイント：ボックスモデルの図
5. レイアウトと幅
アオイ：通常の文書の流れ、Flexbox、Grid等を目的で使い分けます。
学習ポイント：ページのスタイルシート
6. 一貫性と確認
ミナト：色や余白を繰り返し個別に決めると不揃いになります。
学習ポイント：整えたHTMLとCSS
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
styles.cssの背景色を一箇所変更し、読み込みの有無を確認する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
本文の行間を変えて比較し、価格と説明を文字の重みや配置でも区別する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
同梱のCSSを読み、共通色と余白を変えて全体へ反映する。キーボードでもリンクを追う。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
セレクターとプロパティ、ボックスモデルを理解し、読みやすい一貫した見た目へ整える。
- CSS接続の確認記録
- 共通スタイル
- 文字と色の設計表
- ボックスモデルの図
- ページのスタイルシート
- 整えたHTMLとCSS
08 / WEBSITE BASICS