Menu
Coddy logo textTech
学習を始める
flag Ja icon日本語down icon
html iconHTML ジャーニーの一部人気ジャーニー

CSSを学ぶ

無料のインタラクティブなCSSコースです。すべてのレッスンで、実際のHTMLにスタイルを適用します - セレクタ、ボックスモデル、色、フォント、flexbox、grid、レスポンシブデザイン - 入力しながらライブプレビューで確認でき、修了時には無料の修了証がもらえます。より広範なHTMLジャーニーの一部なので、CSSに必要なマークアップの文脈もすぐそばにあります。

学習を始める(無料)
シラバスを見るStyling with CSSプレイグラウンド

281,604+ 人のcoddersが登録中

119 レッスン104 チャレンジ583 クイズの問題

  • 初心者向け
  • sparkles iconAIによるコーディングサポート
  • hint icon実践的なインタラクティブレッスン
  • volume On icon全レッスンに音声ナレーション付き
  • quiz icon知識を確かめるクイズ
  • certificate icon無料の修了証明書

シラバス

2 セクション3 プロジェクト119 レッスン104 チャレンジ583 クイズの問題

このセクションは HTML ジャーニーの一部です。シラバス全体にはさらに多くのセクションがあります - 下のプレビューをクリックして、ジャーニーページで確認してください。

  1. セクション 1Fundamentals60 レッスン
  2. セクション 2

    Styling with CSS

    セクションを始める開始開く閉じる    Bring your web pages to life with colors, layouts, and styles76 レッスン100 チャレンジ419 問題3 プロジェクト

    イントロダクション

    5 レッスン540

    CSSの追加

    4 レッスン725

    基本セレクター

    7 レッスン1247

    テキストの基本

    8 レッスン1450

    色と背景

    5 レッスン834

    カフェメニュー

    プロジェクト3 レッスン1

    ボックスモデル パート1

    6 レッスン943

    ボックスモデル パート2

    5 レッスン834

    Flexbox

    6 レッスン943

    ログインフォーム

    プロジェクト4 レッスン1

    レイアウト手法

    7 レッスン1151

    レスポンシブデザインの基礎

    6 レッスン1052

    トンガのウェブページ

    プロジェクト6 レッスン1

    最終チャレンジ

    4 レッスン4
  3. セクション 3

    CSS Mastery

    セクションを始める開始開く閉じる    Take you css skills to the next level!43 レッスン40 チャレンジ164 問題

    セレクターを極める：結合

    6 レッスン539

    インタラクティブな疑似クラス

    5 レッスン431

    構造擬似クラス

    5 レッスン432

    ドロップダウンメニューのプロジェクト

    4 レッスン4

    ビジュアルエフェクト

    5 レッスン536

    ランディングページ

    5 レッスン5

    CSS Gridで構築する

    4 レッスン426

    Flavor Fiesta ウェブサイト

    4 レッスン4

    最終チャレンジ

    5 レッスン5
  4. セクション 4Practical Frontend35 レッスン
  5. セクション 5JavaScript in Action27 レッスン
HTML ジャーニーのシラバス全体を見る
使える機能
コーディングを学ぶために使うすべて

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

CoddyでCSSを学ぶ理由

  • CSSをブラウザで記述し、ページがライブでスタイルを変える様子を見られます。ビルドステップも、エディタのセットアップも不要です。セレクタやプロパティへの変更がすべて即座に反映されるので、それぞれのルールが実際に何をするのかがわかります。
  • CSSの中核: セレクタと詳細度、ボックスモデル、ポジショニング、flexbox、CSS grid、トランジション、メディアクエリ、そしてレスポンシブデザイン。これらは、すべてのフロントエンド開発者が日々必要とするCSSです。
  • AIヒントは、誰もが必ずつまずくところ - 詳細度の意外な挙動、レイアウトのはみ出し、flexboxの不可解な動き - のデバッグを、答えをばらすことなく助けてくれるので、CSSが魔法ではなく直感的に感じられるようになります。
  • セクションを修了すると無料のCSS修了証がもらえます。HTMLやJavaScriptのコースと自然に組み合わさり、フロントエンドの土台を一通り築けます。

CSSの学習に関するよくある質問

CSSとは何ですか?

CSS(Cascading Style Sheets)は、HTMLページの見た目を制御する言語です - 色、フォント、余白、レイアウト、アニメーション、画面サイズに応じたレスポンシブな挙動などです。HTMLがページに何があるかを定義するのに対し、CSSはそれがどう見えるかを定義します。

CSSは学ぶのが難しいですか?

基本的なCSS - セレクタ、色、フォント、ボックスモデル - は数時間で習得できます。難しい部分は後から出てきます: 詳細度のルール、flexboxやgridのレイアウト、そしてあらゆる画面サイズで正しく見えるようにすることです。このコースでは、それらをライブプレビュー付きの小さなステップで紹介するので、それぞれのルールが何をするのかを正確に確認できます。

CSSの前にHTMLを学ぶべきですか?

はい。HTMLはページの構造を定義し、CSSはそれにスタイルを適用します。HTMLがなければ、スタイルを適用する対象がありません。このCSSセクションがHTMLジャーニーの一部になっているのはそのためです - 先にHTMLの基礎セクションがあり、その後ジャーニーの大部分をそれにスタイルを適用することに費やします。

CSS、Flexbox、Gridの違いは何ですか?

FlexboxとGridはCSS内のレイアウトモジュールです - 別個の技術ではなく、CSSの機能です。Flexboxは一次元のレイアウト(カードの並び、ナビゲーションバー)に最適です。Gridは二次元のレイアウト(ページ全体、複雑なカードレイアウト)に最適です。実際のサイトのほとんどは両方を使っており、このコースではそれぞれをいつ使うべきかを扱います。

CSSをオンラインで無料で学べますか?

はい。インタラクティブなCSSセクションは無料です - 充実したレッスン、コーディング演習、ライブプレビュー、そして修了証が含まれます。すべてがブラウザで動作するので、始めるのにエディタやツールをインストールする必要はありません。

CSSコースの後に修了証はもらえますか?

はい。CSSセクションを修了すると、無料の修了証がもらえます。履歴書に記載したり、HTMLやJavaScriptの修了証と並べてLinkedInで共有したりして、フロントエンドのポートフォリオの一部にできる、検証可能な証明になります。
Coddy programming languages illustration

Learn Styling with CSS with Coddy

始める