実践: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

アプリを使ってみる

当研究室発の人の成長を後押しするアプリです。

アプリを見る