実践:HTMLにスタイルを適用する
第9回 • 40枚
ナレーション
第09回 スライド1: 実践:HTMLにスタイルを適用する
前回の復習
- 開発者ツール(DevTools)の基本操作
- Elements/Inspectorパネルの使い方
- スタイルの確認と編集、ボックスモデルの確認
今回のテーマ
「学んだ知識を活かして実際のHTMLにスタイルを適用」
これまでの学習
- CSS基礎
- レイアウト手法
- CSS変数
- 開発者ツール
今回の目標
前回作成したHTMLに包括的なスタイルを適用
flowchart TD
A[これまでの学習] --> B[CSS基礎]
A --> C[レイアウト手法]
A --> D[CSS変数]
A --> E[開発者ツール]
B --> F[今回の実践]
C --> F
D --> F
E --> F
F --> G[CSSファイル作成]
F --> H[リセット・ベーススタイル]
F --> I[ヘッダースタイリング]
F --> J[メインコンテンツレイアウト]
F --> K[フッターデザイン]
G --> L[実践的スキル習得]
H --> L
I --> L
J --> L
K --> L
作業内容
- CSSファイルの作成と読み込み
- リセットとベーススタイル
- ヘッダーのスタイリング
- メインコンテンツのレイアウト
- フッターのデザイン
実践的なスキル習得
理論から実践へ
1/40