CSSを学ぶ - コーディング講座

CSSを最初のセレクターからレスポンシブレイアウト、アニメーション、モダンなWebデザインまで、ステップごとに学びましょう。CSSを1行入力すると、スマートフォン上でページが変化する様子を確認できます。エディターではHTMLとCSSを横並びで表示し、ライブプレビューを確認できます。

このCSSチュートリアルは初心者向けに作られており、あなたの成長に合わせて進められます。各コースは1つの実践的なテーマで構成され、各レッスンは短く、エディターにはいつでもワンタップでアクセスできます。読んだ内容をただ覚えるのではなく、すぐに練習できます。

内容

• 初心者（A1）から上級者（C1）まで、40コースと159の短いレッスン

• すぐにプレビューできるライブHTML・CSSエディター。手軽な実験や自分のページ作りに対応

• ツールバー、カードグリッド、スティッキーヘッダー、脈打つボタンなどを、1ステップずつ作る20のWebデザインプロジェクト

• 20のバグ発見ミッション：カラムより42px広いカード、スマートフォンで一度も実行されないメディアクエリ、ページの背後に固定されたモーダル

• 最終試験と修了証

• アプリは22言語に対応

初心者から上級者までの完全な学習 path

• 構文とセレクター、色、背景、タイポグラフィ

• ボックスモデル、display、配置、単位と値

• 擬似クラスと擬似要素

• Flexboxの基礎と高度なFlexbox

• Gridの基礎、グリッドエリア、高度なグリッドレイアウト

• レスポンシブデザイン、メディアクエリ、コンテナクエリ

• カスタムプロパティ（変数）、関数、詳細度、カスケード、@layer

• トランジション、変形、キーフレームアニメーション、フィルター、ブレンドモード

• ダークモードとカラースキーム、スクロールとオーバーフロー、clip-pathとシェイプ

• DevTools、BEMアーキテクチャ、Sass、PostCSS、デザイントークンを使ったデバッグ

• コンポーネントパターン、モダンなレイアウトパターン、パフォーマンス、Houdini

身につく実践

• 学んだ内容を確認できるクイズ

• プロパティ、セレクター、レイアウト構文を収録した69項目のチートシート

• フロントエンドやWeb開発者の面接前にも役立つ、明確な回答付きの面接質問50問

• 開いて編集できる短いコード例のライブラリ

• 自分のコード、メモ、お気に入りのレッスンを保存

• World Coding Challenge：1日3回の世界ラウンド。Python、JavaScriptなどの言語で解答

• 学習を続けるための連続学習記録、XP、リーダーボード、毎日のリマインダー

AIメンター

• レイアウトやプロパティで行き詰まりましたか？概念、エラー、自分のコードについてAIメンターに質問できます

• AIプレイグラウンド：ページを説明すると、HTMLとCSSが作られていく様子を確認できます

• 無料ユーザーには毎日のAI利用枠があり、Proでは無制限になります

対象ユーザー

• Web開発の第一歩を踏み出す完全な初心者

• モックアップを引き渡すのではなく、自分でページをスタイリングしたいデザイナー

• Webデザインコースと並行して追加の練習をしたい学生

• HTMLとCSSを少し知っていて、FlexboxとGridを今度こそ理解したい開発者

• フロントエンドの仕事に向けて準備するキャリアチェンジ希望者

無料版とPro

最初のコース、最初のガイド付きプロジェクト、2つのミッション、ライブエディターは、毎日のAIメンター利用枠とともに無料で利用できます。Proでは、すべてのコース、全プロジェクトとミッション、修了証試験、無制限のAIが利用でき、広告も表示されません。

今日から始め、自分のペースでCSSを学び、数分で最初のページをスタイリングしましょう。