初心者向け CSS は、9 つのガイド付きラボを通して HTML の見た目を整える方法を学ぶ実践的な入門コースです。外部スタイルシートの作成とリンクから始め、テキスト、色、背景、余白、サイズ、一般的なページ要素に使うセレクタとプロパティを身につけます。
各ラボでは、ブラウザプレビューで確認できる小さな見た目の変化に焦点を当てます。CSS の基礎から Flexbox、リストを使った横並びナビゲーション、読みやすい表へ進み、最後に CDN で読み込む Tailwind CSS のユーティリティクラスを体験します。
学習内容
このコースを修了すると、次のことができるようになります。
- 外部スタイルシートを作成して HTML にリンクし、要素、クラス、ID、グループ、子孫セレクタでコンテンツを指定する
- 色、ピクセル単位のサイズ、太さ、配置、行の高さ、フォントファミリーでテキストを装飾する
- 16 進数と RGB の色、背景画像、繰り返し制御、背景位置を設定する
- CSS ボックスモデルにおけるコンテンツ幅、パディング、ボーダー、マージン、
box-sizing: border-boxを理解する - 方向、分配、配置、折り返しを制御して基本的な Flexbox レイアウトを作る
- リストを横並びナビゲーションに変え、ボーダー、余白、見出し、配置で表を読みやすくする
- CDN で Tailwind CSS を読み込み、背景、テキスト、パディング、Flexbox の基本ユーティリティを組み合わせる
このコースの対象者
このコースは、CSS を初めて学ぶ方、簡単なページに見た目を加えたい HTML 学習者、スタイリングの基本を短く復習したい開発者を対象としています。
前提知識： HTML の要素と属性に関する基礎知識を推奨します。ラボには準備済みの HTML ファイルがありますが、head、body、div、リスト、表、class、ID を知っていると CSS に集中できます。
学習環境： 9 つのラボはすべて、ブラウザ上の Ubuntu 22.04 WebIDE で実行します。準備済みのプロジェクトと Web 8080 プレビューを使い、HTML と CSS を直接編集して、更新またはプレビューへの切り替えで見た目の変化を確認します。
よくある質問
受講前に HTML を知っている必要がありますか？
高度な知識は不要ですが、CSS は HTML 構造を選択して装飾するため、基礎知識が役立ちます。演習は CSS に集中し、通常はページのマークアップが用意されているため、HTML 文書の作り方を詳しく学ぶコースではありません。
完全な Web サイトやポートフォリオを作りますか？
いいえ。コースは 9 つの焦点を絞ったガイド付きラボで構成され、最終プロジェクトや独立したチャレンジはありません。準備済みのページに狙いを定めた変更を加え、個々のセレクタとプロパティの動作を観察します。
レスポンシブ Web デザインを学べますか？
入門レベルに限られます。Flexbox ラボでは柔軟なレイアウトに役立つ方向、配置、分配、折り返しを扱いますが、メディアクエリ、CSS Grid、ブレークポイント、完全なモバイルファースト設計手順は含みません。
Tailwind CSS はどの程度扱いますか？
1 つのラボで Tailwind を CDN から読み込み、背景、テキスト、パディング、Flexbox の少数のユーティリティを使います。ビルドツールによる導入、設定、レスポンシブや状態バリアント、コンポーネント設計、本番最適化は扱いません。
