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



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

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

目次
  1. 【初級】CSS が学べるところ
  2. </>Markup
  3. Progate
  4. Dash(英語)
  5. 【中級】CSS が学べるところ
  6. UDACITY(英語)
  7. CODEPREP
  8. 【上級】CSS が学べるところ
  9. Code School(英語)
  10. [W3Schools.com(英語)](http://www.w3schools.com/css/default.asp)
  11. Codecademy(英語)
  12. スマホ App 「Learn CSS」
  13. まとめ

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

</>Markup

</>Markup

範囲を選択_093

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

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

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

Progate

Progate

範囲を選択_095

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

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

Dash(英語)

Dash

範囲を選択_094

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

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

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

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

UDACITY(英語)

UDACITY(英語)

範囲を選択_097

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

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

CODEPREP

CODEPREP

範囲を選択_096

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

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

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

Code School(英語)

Code School(英語)

範囲を選択_098

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

ガイドがあるものの、コーディングの完成形を知っておかないとレッスンを進めることが難しいように思います。ただし、ポイントを使えば正解も見られるので、なんとか学習を進められる設計になっています。

CSS の基本から Sass、Bootstrap、CSS アニメーションまで幅広くカバーしています。

W3Schools.com(英語)

範囲を選択_099

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

CSS、CSS3、Bootstrap、CSS レスポンシブ、W3css など一通りの CSS 機能が紹介されています。

CSS で何ができるか、ということを一通り学習できますので、とても参考になります。

Codecademy(英語)

Codecademy(英語)

範囲を選択_101

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

HTML & CSS コースで CSS を学習しますが、上記で紹介した Progate や CodePrep などと重複した部分もあります。また Sass や Bootstrap などの講座も用意されていますが、月額 19.99 ドル必要になってきます。

スマホ App 「Learn CSS」

Androoid/iOS

CSS のことを一通り理解していないと難しいですが、対戦モードがあるなど、CSS の学習が捗るように工夫されています。

これらの他に、CodePen の開発者クリスさんのブログ 「CSS-TRICS」 や CSSDeskCSSDesign なども最新の CSS を理解する上で役立ちます。

スマホでコーディングするなら

デフォルトのキーボード入力では < や “ など入力しにくいので、コーディング用のキーボード APP をインストールしておくと作業が激捗ります。 例えば、Hacker's Keyboard(Android) Hacker's Keys iTunes $1.99 などがあります。

まとめ

いかがでしたでしょうか?コーディングした内容が Web に反映されると面白いですよね。

実際の開発現場では答えがなく、自分で考えてclass名をつけないといけないなど、コンポーネントのことを理解していないと作業できない、もしくはおかしなコーディングとなってしまいます。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp