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

CSSを学ぶ

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

学習を始める(無料)
シラバスを見るCSSによるスタイリングプレイグラウンド

336,814+ 人のcoddersが登録中

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

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

シラバス

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

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

  1. セクション 1基礎60 レッスン
  2. セクション 2

    CSSによるスタイリング

    セクションを始める開始開く閉じる    色、レイアウト、スタイルを使ってウェブページに命を吹き込みましょう76 レッスン100 チャレンジ418 問題3 プロジェクト

    はじめに

    5 レッスン540

    CSSの追加

    4 レッスン725

    基本セレクター

    7 レッスン1247

    テキストの基礎

    8 レッスン1450

    色と背景

    5 レッスン834

    カフェメニュー

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

    ボックスモデル パート1

    6 レッスン943

    ボックスモデル パート2

    5 レッスン833

    Flex Box

    6 レッスン943

    ログインフォーム

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

    レイアウト技法

    7 レッスン1151

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

    6 レッスン1052

    トンガのWebページ

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

    最終チャレンジ

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

    CSSマスタリー

    セクションを始める開始開く閉じる    CSSスキルを次のレベルへ引き上げましょう！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. セクション 4実践的フロントエンド35 レッスン
  5. セクション 5JavaScriptの実践27 レッスン
HTML ジャーニーのシラバス全体を見る
使える機能
コーディングを学ぶために使うすべて

実践で学ぶ

実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。

playground.js
コードエディタ
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
テスト #1test Case Success icon
テスト #2test Case Success icon
テスト #3test Case Failure icon
入力
"Alex"
出力
"Hello, Coddy! Alex"

連続記録を築こう

継続して進捗を見守りましょう！毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。

12 日連続

明日も戻ってきて連続記録を維持しましょう！

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

ダブル・オア・ナッシング

7日中5日目

fire Freeze icon

連続記録フリーズ

2 left

どこでも学べる

コーディングの旅を持ち歩こう！セットアップ不要、ダウンロード不要 - 開いてすぐにコーディング開始。iOS、Android、Webで4.9星評価で利用可能。

Python
7ストリーク
250スコア
5エネルギー
変数
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
続ける
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
ジャーニー
目標
リーダーボード
プロフィール
4.9
星星星星星
評価

あなたは一人じゃない

グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい！

チャレンジャーリーグ
チャレンジャーリーグ上位7名が昇格
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 icon昇格ゾーンleaderboard Arrow Up icon

あらゆる学び方に対応

読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。

変数の入門
音声

変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。

Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。

値は後から変えられます。再代入すると、名前は新しい値を指すようになります。

1xSarah

修了証を取得

完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。

Coddy修了証明書
これは以下を証明します山田 太郎が正常に完了しました
python iconPythonの基礎
認証済み
日付2026年1月
LinkedInLinkedInに追加

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で共有したりして、フロントエンドのポートフォリオの一部にできる、検証可能な証明になります。

このコースを含む学習パス

このコースは、より長いパスの1ステップです。メンターが教える順番で並んだ複数のコースで、それぞれに無料の修了証があります。

Coddyのプログラミング言語のイラスト

CoddyでCSSによるスタイリングを学ぼう

始める