HTML ジャーニーの一部ジャーニーCSSを学ぶ
無料のインタラクティブなCSSコースです。すべてのレッスンで、実際のHTMLにスタイルを適用します - セレクタ、ボックスモデル、色、フォント、flexbox、grid、レスポンシブデザイン - 入力しながらライブプレビューで確認でき、修了時には無料の修了証がもらえます。より広範なHTMLジャーニーの一部なので、CSSに必要なマークアップの文脈もすぐそばにあります。
13,993+ 人のcoddersが登録中
119 レッスン114 チャレンジ582 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
知識を確かめるクイズ
無料の修了証明書
シラバス
このセクションは HTML ジャーニーの一部です。シラバス全体にはさらに多くのセクションがあります。下のプレビューをクリックして、ジャーニーページで確認してください。
- セクション 1基礎60 レッスン
セクション 2
CSSによるスタイリング
セクションを始める開始色、レイアウト、スタイルを使ってウェブページに命を吹き込みましょうCSSの追加
4 レッスン725基本セレクター
7 レッスン1247テキストの基礎
8 レッスン1450色と背景
5 レッスン834カフェメニュー
プロジェクト3 レッスン3ボックスモデル パート1
6 レッスン943ボックスモデル パート2
5 レッスン833Flex Box
6 レッスン943レイアウト技法
7 レッスン1151レスポンシブデザインの基礎
6 レッスン1052トンガのWebページ
プロジェクト6 レッスン6セクション 3
CSSマスタリー
セクションを始める開始CSSスキルを次のレベルへ引き上げましょう！セレクターを極める：結合
6 レッスン539インタラクティブな疑似クラス
5 レッスン431構造擬似クラス
5 レッスン432ドロップダウンメニューのプロジェクト
4 レッスン4ビジュアルエフェクト
5 レッスン536ランディングページ
5 レッスン5CSS Gridで構築する
4 レッスン426最終チャレンジ
5 レッスン5- セクション 4実践的フロントエンド35 レッスン
- セクション 5JavaScriptの実践27 レッスン
実践で学ぶ
実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。
連続記録を築こう
継続して進捗を見守りましょう！毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。
12 日連続
明日も戻ってきて連続記録を維持しましょう！
January 2026
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
ダブル・オア・ナッシング
7日中5日目
連続記録フリーズ
2 left
どこでも学べる
コーディングの旅を持ち歩こう！セットアップ不要、ダウンロード不要：開いてすぐにコーディング開始。iOS、Android、Webで4.9星評価で利用可能。
あなたは一人じゃない
グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい！
1
2
3
昇格ゾーンあらゆる学び方に対応
読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。
変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。
Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。
値は後から変えられます。再代入すると、名前は新しい値を指すようになります。
修了証を取得
完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。
修了証明書Pythonの基礎
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で共有したりして、フロントエンドのポートフォリオの一部にできる、検証可能な証明になります。
