📢 このコースを受講するには、月額1,980円の「プレミアム会員プラン」に登録しましょう。
→ このコースを含む すべてのコースが受講できます。
👉 プレミアム会員に登録する
AIティーチャーで学ぶ CSSコース
先生は、AI。
ペースは、あなた次第。
教科書を読むだけでは、疑問はそのまま残ってしまいます。AIナビゲーター「明日架」は、あなたが書いたコードを一行ずつ読んで、丁寧に添削・解説。どんなに些細な疑問も、気兼ねなく何でも聞くことができます。「AIと学ぶHTMLコース」を修了した方はもちろん、CSSから学びたい方にもおすすめです（HTMLの基礎知識は必須です）。
今すぐ登録する
このコースで学べること
セレクタの基本
色・テキスト・フォント
ボックスモデル
Flexboxレイアウト
CSS Grid
レスポンシブデザイン
学びの流れ
テーマごとに通常レッスンで学び、セクションごとに振り返り練習で復習。要所ではミニプロジェクトで実践力をつけ、コースの最後には学んだことを総動員してプロフィールサイトを完成させる修了チャレンジに挑戦します。
↺ 何度でもくり返し受講できます
三貫地明日架
ナビゲーター
イントロダクション
Lesson 1 of 2 within section イントロダクション.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 2 within section イントロダクション.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション1：CSSってなに？
Lesson 1 of 3 within section セクション1：CSSってなに？.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 3 within section セクション1：CSSってなに？.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 3 within section セクション1：CSSってなに？.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション2：セレクタの基本
Lesson 1 of 4 within section セクション2：セレクタの基本.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 4 within section セクション2：セレクタの基本.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 4 within section セクション2：セレクタの基本.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 4 within section セクション2：セレクタの基本.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション3：色・テキスト・フォント
Lesson 1 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 5 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 6 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 7 of 7 within section セクション3：色・テキスト・フォント.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション4：ボックスモデルと装飾
Lesson 1 of 5 within section セクション4：ボックスモデルと装飾.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 5 within section セクション4：ボックスモデルと装飾.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 5 within section セクション4：ボックスモデルと装飾.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 5 within section セクション4：ボックスモデルと装飾.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 5 of 5 within section セクション4：ボックスモデルと装飾.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション5：要素の配置
Lesson 1 of 6 within section セクション5：要素の配置.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 6 within section セクション5：要素の配置.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 6 within section セクション5：要素の配置.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 6 within section セクション5：要素の配置.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 5 of 6 within section セクション5：要素の配置.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L26 🏗 ミニプロジェクト：お知らせカードを1枚作ろう
Lesson 6 of 6 within section セクション5：要素の配置.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション6：Flexboxレイアウト
Lesson 1 of 6 within section セクション6：Flexboxレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 6 within section セクション6：Flexboxレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 6 within section セクション6：Flexboxレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 6 within section セクション6：Flexboxレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 5 of 6 within section セクション6：Flexboxレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L32 🏗 ミニプロジェクト：料金プラン表を作ろう
Lesson 6 of 6 within section セクション6：Flexboxレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション7：インタラクションとアニメーション基礎
Lesson 1 of 6 within section セクション7：インタラクションとアニメーション基礎.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 6 within section セクション7：インタラクションとアニメーション基礎.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L35 transitionで滑らかに変化させよう
Lesson 3 of 6 within section セクション7：インタラクションとアニメーション基礎.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 6 within section セクション7：インタラクションとアニメーション基礎.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 5 of 6 within section セクション7：インタラクションとアニメーション基礎.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L38 🏗 ミニプロジェクト：動きのあるボタンを作ろう
Lesson 6 of 6 within section セクション7：インタラクションとアニメーション基礎.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション8：CSS Gridレイアウト
Lesson 1 of 5 within section セクション8：CSS Gridレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 5 within section セクション8：CSS Gridレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L41 grid-template-areasでページ構造を作ろう
Lesson 3 of 5 within section セクション8：CSS Gridレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 5 within section セクション8：CSS Gridレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L43 🏗 ミニプロジェクト：Gridでページレイアウトを組もう
Lesson 5 of 5 within section セクション8：CSS Gridレイアウト.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション9：レスポンシブデザイン
Lesson 1 of 4 within section セクション9：レスポンシブデザイン.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 4 within section セクション9：レスポンシブデザイン.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L46 FlexboxとGridをレスポンシブ対応させよう
Lesson 3 of 4 within section セクション9：レスポンシブデザイン.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 4 of 4 within section セクション9：レスポンシブデザイン.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション10：CSS変数と擬似要素
L48 CSS変数（カスタムプロパティ）で色とサイズを一元管理
Lesson 1 of 3 within section セクション10：CSS変数と擬似要素.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
L49 ::before・::afterで装飾要素を追加しよう
Lesson 2 of 3 within section セクション10：CSS変数と擬似要素.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 3 within section セクション10：CSS変数と擬似要素.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
セクション11：まとめと修了チャレンジ
Lesson 1 of 3 within section セクション11：まとめと修了チャレンジ.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 2 of 3 within section セクション11：まとめと修了チャレンジ.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
Lesson 3 of 3 within section セクション11：まとめと修了チャレンジ.
コースのコンテンツにアクセスするには、このコースに登録する必要があります。
