HTML・CSS
ここでは Web ページの土台となる HTML と CSS をハンズオン形式で学びます。
大学祭のサイトや管理画面を作るとき，まずはページの構造と見た目を設計できることが重要です。
この章のゴール
- HTML の基本構造を理解し，自分でページを組み立てられる。
- CSS を使ってタイポグラフィや色，余白を整えられる。
- Flexbox やレスポンシブ設計で，さまざまな画面サイズに対応できる。
- フォームなどの基本的な UI コンポーネントを実装できる。
- 簡単なランディングページをゼロから完成させる。
学習の流れ
- Chapter 1: HTML の基本
ページの骨組みを作り，タグの役割を理解します。 - Chapter 2: CSS で見た目を整える
テキストや色，余白をコントロールし，デザインの基礎を身につけます。 - Chapter 3: レイアウトとレスポンシブ対応
Flexbox とメディアクエリで，スマホ〜PC に対応したレイアウトを構築します。 - Chapter 4: コンポーネントとフォーム
ナビゲーションやフォームを実装し，アクセシビリティの基本も押さえます。 - Chapter 5: ミニプロジェクトを仕上げる
祭のイベント紹介ページを題材に，これまでの学びを統合します。
各チャプターは短い解説と実践課題で構成されています。1 章ごとに手を動かしながら進めてください。
事前準備
- VSCode などのテキストエディタ
- 任意のブラウザ（Chrome / Edge / Safari など）
fes-trainingフォルダ内にhtml-cssという作業用フォルダを作っておくと整理しやすいです。
準備が整ったら Chapter 1 へどうぞ！