HTML ジャーニーの一部人気ジャーニーCSSを学ぶ
無料のインタラクティブなCSSコースです。すべてのレッスンで、実際のHTMLにスタイルを適用します - セレクタ、ボックスモデル、色、フォント、flexbox、grid、レスポンシブデザイン - 入力しながらライブプレビューで確認でき、修了時には無料の修了証がもらえます。より広範なHTMLジャーニーの一部なので、CSSに必要なマークアップの文脈もすぐそばにあります。
269,396+ 人のcoddersが登録中
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
無料の修了証明書
シラバス
このセクションは HTML ジャーニーの一部です。シラバス全体にはさらに多くのセクションがあります - 下のプレビューをクリックして、ジャーニーページで確認してください。
- セクション 1Fundamentals60 レッスン
セクション 2
Styling with CSS
セクションを始める開始開く閉じるBring your web pages to life with colors, layouts, and stylesイントロダクション
5 レッスン540- 01CSSとは？チャレンジクイズ
- 02CSSの構文チャレンジクイズ
- 03CSSのコメントクイズ
- 04headタグチャレンジクイズ
- 05titleタグチャレンジマスタリークイズ
CSSの追加
4 レッスン725- 01インラインCSSチャレンジマスタリークイズ
- 02内部CSSチャレンジマスタリークイズ
- 03外部CSSチャレンジマスタリークイズ
- 04基本のスタイリングチャレンジチャレンジ
基本セレクター
7 レッスン1247- 01セレクター入門チャレンジクイズ
- 02タイプセレクターチャレンジマスタリークイズ
- 03クラスセレクターチャレンジマスタリークイズ
- 04IDセレクターチャレンジマスタリークイズ
- 05グループセレクターチャレンジマスタリークイズ
- 06ユニバーサルセレクターチャレンジマスタリークイズ
- 07セレクションチャレンジチャレンジ
テキストの基本
8 レッスン1450- 01テキストの色チャレンジマスタリークイズ
- 02フォントファミリーチャレンジマスタリークイズ
- 03フォントサイズチャレンジマスタリークイズ
- 04フォントの太さチャレンジマスタリークイズ
- 05テキストの配置チャレンジマスタリークイズ
- 06テキストの装飾チャレンジマスタリークイズ
- 07復習チャレンジ #1チャレンジ
- 08復習チャレンジ #2チャレンジ
色と背景
5 レッスン834- 01背景色チャレンジマスタリークイズ
- 02HEXカラーチャレンジマスタリークイズ
- 03RGBカラーチャレンジマスタリークイズ
- 04RGBAによる透明度チャレンジクイズ
- 05復習チャレンジ #1チャレンジ
カフェメニュー
プロジェクト3 レッスン1- 01タイポグラフィの基本チャレンジ
- 02テキストのスタイリングプロジェクト
- 03カラーと背景プロジェクト
ボックスモデル パート1
6 レッスン943- 01ボックスモデルとは？クイズ
- 02パディングチャレンジマスタリークイズ
- 03マージンチャレンジマスタリークイズ
- 04ボーダーチャレンジマスタリークイズ
- 05幅と高さチャレンジマスタリークイズ
- 06復習チャレンジチャレンジ
ボックスモデル パート2
5 レッスン834- 01Box Sizingチャレンジクイズ
- 02Border Radiusチャレンジマスタリークイズ
- 03Overflowチャレンジマスタリークイズ
- 04Box Shadowチャレンジマスタリークイズ
- 05復習チャレンジチャレンジ
Flexbox
6 レッスン943- 01Flexboxとは？チャレンジクイズ
- 02Flex Directionチャレンジマスタリークイズ
- 03Justify Contentチャレンジマスタリークイズ
- 04Align Itemsチャレンジマスタリークイズ
- 05完璧な中央揃えチャレンジクイズ
- 06Flexbox チャレンジチャレンジ
ログインフォーム
プロジェクト4 レッスン1- 01ボディチャレンジ
- 02フォームコンテナプロジェクト
- 03インプットプロジェクト
- 04ボタンプロジェクト
レイアウト手法
7 レッスン1152- 01ブロック要素とインライン要素チャレンジクイズ
- 02配置の基本チャレンジマスタリークイズ
- 03相対配置チャレンジマスタリークイズ
- 04絶対配置チャレンジマスタリークイズ
- 05固定配置チャレンジマスタリークイズ
- 06Z-Index の基本チャレンジクイズ
- 07復習チャレンジチャレンジ
レスポンシブデザインの基礎
6 レッスン1052- 01レスポンシブデザインとは？チャレンジクイズ
- 02Viewport メタタグチャレンジクイズ
- 03フルイドレイアウトチャレンジマスタリークイズ
- 04Viewport 単位チャレンジマスタリークイズ
- 05メディアクエリの基礎チャレンジマスタリークイズ
- 06フレキシブルイメージチャレンジマスタリークイズ
トンガのウェブページ
プロジェクト6 レッスン1- 01ナビゲーションメニューチャレンジ
- 02ウェルカムヘッダープロジェクト
- 03Aboutセクションプロジェクト
- 04お問い合わせセクションプロジェクト
- 05Viewportタグプロジェクト
- 06メディアクエリプロジェクト
最終チャレンジ
4 レッスン4- 01アイテムの配置チャレンジ
- 02映画リストチャレンジ
- 03結婚式の招待状チャレンジ
- 04フローティング通知チャレンジ
セクション 3
CSS Mastery
セクションを始める開始開く閉じるTake you css skills to the next level!セレクターを極める：結合
6 レッスン539- 01はじめにクイズ
- 02子孫セレクターチャレンジクイズ
- 03子セレクターチャレンジクイズ
- 04隣接兄弟セレクターチャレンジクイズ
- 05一般兄弟セレクターチャレンジクイズ
- 06復習チャレンジチャレンジ
インタラクティブな疑似クラス
5 レッスン431- 01疑似クラスクイズ
- 02ホバーエフェクトチャレンジクイズ
- 03フォーカスエフェクトチャレンジクイズ
- 04アクティブスタイルチャレンジクイズ
- 05復習チャレンジチャレンジ
構造擬似クラス
5 レッスン432- 01構造擬似クラスクイズ
- 02最初の要素を選択するチャレンジクイズ
- 03最後の要素を選択するチャレンジクイズ
- 04パターンの活用：nth-child を使うチャレンジクイズ
- 05復習チャレンジチャレンジ
ドロップダウンメニューのプロジェクト
4 レッスン4- 01サブメニューの追加チャレンジ
- 02サブメニューの表示チャレンジ
- 03さらなるスタイリングチャレンジ
- 04Inputとボタンチャレンジ
ビジュアルエフェクト
5 レッスン536- 01グラデーションチャレンジクイズ
- 02CSS フィルターチャレンジクイズ
- 03Transformチャレンジクイズ
- 04トランジションとホバーエフェクトチャレンジクイズ
- 05復習チャレンジチャレンジ
ランディングページ
5 レッスン5- 01ヘッダーセクションのスタイル設定チャレンジ
- 02ボタンのスタイル設定チャレンジ
- 03セクションのレイアウトチャレンジ
- 04カードのレイアウトチャレンジ
- 05仕上げの調整チャレンジ
CSS Gridで構築する
4 レッスン426- 01Gridの基本チャレンジクイズ
- 02Grid-row アイテムの配置チャレンジクイズ
- 03名前付きエリアチャレンジクイズ
- 04復習チャレンジチャレンジ
Flavor Fiesta ウェブサイト
4 レッスン4- 01グリッドの設定チャレンジ
- 02ヘッダーチャレンジ
- 03メイン部分チャレンジ
- 04フッターチャレンジ
最終チャレンジ
5 レッスン5- 01アクティブメニューのハイライトチャレンジ
- 02テーブルのゼブラストライプチャレンジ
- 03ボタンのホバーエフェクトチャレンジ
- 04Gridカードレイアウトチャレンジ
- 05ぼかしを入れたHero Imageチャレンジ
- セクション 4Practical Frontend35 レッスン
- セクション 5JavaScript in Action27 レッスン
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で共有したりして、フロントエンドのポートフォリオの一部にできる、検証可能な証明になります。
