更新日: 2017年4月5日
公開日: 2016年9月27日

レベル別！無料でCSS が学習できるサイト9選

CSS の学習スタイルっていろいろありますが、今回はネット上で CSS を学習し、実際にコーディングできるサイトをいくつかご紹介させて頂きます。 CSS 初心者から経験者まで、参考となるように情報を集めてみました。

【初級】CSS が学べるところ
</>Markup
Progate
Dash（英語）
【中級】CSS が学べるところ
UDACITY（英語）
CODEPREP
【上級】CSS が学べるところ
Code School（英語）
[W3Schools.com（英語）](http://www.w3schools.com/css/default.asp)
Codecademy（英語）
スマホ App 「Learn CSS」
まとめ

【初級】CSS が学べるところ

</>Markup

エディタ画面　○
スペルチェック　×
解答閲覧　○
スマホ　○

とにかく指示されたとおりにコーディングして、その結果を楽しむというプロジェクトになります。

カラム・レイアウトやボックス・レイアウトなどのアウトラインから、ボタンや見出しデザインなど初心者が知っておきたいポイントが紹介されています。

Progate

エディタ画面　○
スペルチェック　○
解答閲覧　○
スマホ　○

無料プランで利用できることは、CSS のヘッダー・レイアウトやサイドバー、フッター、フォントや背景など基本的な部分になります。月額プランに申し込むと、レスポンシブ・デザインなど実用的な CSS も学習することができます。

Dash（英語）

Dash

エディタ画面　○
スペルチェック　○
解答閲覧　×
スマホ　×

CSS については、テキストスタイルや背景、ポジションなどを学習していきます。レスポンシブ・デザインのレッスンも盛り込まれていて、メディア・クエリを使ったパターンを学習します。

運営は、世界５カ国でキャリアアップ支援を行う General Assembly が提供しています。

【中級】CSS が学べるところ

UDACITY（英語）

エディタ画面　△
スペルチェック　×
解答閲覧　○
スマホ　○

HTMLとCSSの関係やCSSの機能をわかりやすく動画で説明しています。部分的なCSSの学習ではなく、全体的な把握で学習を進め、全体レイアウトなどの基本からCSSフレームワークやBootstrapについて学習していきます。

CODEPREP

エディタ画面　○
スペルチェック　○
解答閲覧　×
スマホ　○

CSS初心者から経験者まで楽しめる豊富なレッスンが用意されています。グリッドレイアウトなどの全体レイアウトからドロップダウン・メニューなどの部分的なCSSテクニックまで、20種類以上の CSSメソッドが用意されています。ただし、実際のレッスンではヒントはあるものの、明確な回答はないので、途中でクリアできない、先に進めない、という場面も出てくると思います。