- 更新日: 2017年04月05日
- 公開日: 2016年09月27日
レベル別！無料でCSS が学習できるサイト9選
CSS の学習スタイルっていろいろありますが、今回はネット上で CSS を学習し、実際にコーディングできるサイトをいくつかご紹介させて頂きます。 CSS 初心者から経験者まで、参考となるように情報を集めてみました。
【初級】CSS が学べるところ
</>Markup
- エディタ画面 ○
- スペルチェック ×
- 解答閲覧 ○
- スマホ ○
とにかく指示されたとおりにコーディングして、その結果を楽しむというプロジェクトになります。
カラム・レイアウトやボックス・レイアウトなどのアウトラインから、ボタンや見出しデザインなど初心者が知っておきたいポイントが紹介されています。
Progate
- エディタ画面 ○
- スペルチェック ○
- 解答閲覧 ○
- スマホ ○
無料プランで利用できることは、CSS のヘッダー・レイアウトやサイドバー、フッター、フォントや背景など基本的な部分になります。月額プランに申し込むと、レスポンシブ・デザインなど実用的な CSS も学習することができます。
Dash（英語）
- エディタ画面 ○
- スペルチェック ○
- 解答閲覧 ×
- スマホ ×
CSS については、テキストスタイルや背景、ポジションなどを学習していきます。レスポンシブ・デザインのレッスンも盛り込まれていて、メディア・クエリを使ったパターンを学習します。
運営は、世界５カ国でキャリアアップ支援を行う General Assembly が提供しています。
【中級】CSS が学べるところ
UDACITY（英語）
- エディタ画面 △
- スペルチェック ×
- 解答閲覧 ○
- スマホ ○
HTMLとCSSの関係やCSSの機能をわかりやすく動画で説明しています。 部分的なCSSの学習ではなく、全体的な把握で学習を進め、全体レイアウトなどの基本からCSSフレームワークやBootstrapについて学習していきます。
CODEPREP
- エディタ画面 ○
- スペルチェック ○
- 解答閲覧 ×
- スマホ ○
CSS初心者から経験者まで楽しめる豊富なレッスンが用意されています。 グリッドレイアウトなどの全体レイアウトからドロップダウン・メニューなどの部分的なCSSテクニックまで、20種類以上の CSSメソッドが用意されています。 ただし、実際のレッスンではヒントはあるものの、明確な回答はないので、途中でクリアできない、先に進めない、という場面も出てくると思います。
【上級】CSS が学べるところ
Code School（英語）
- エディタ画面 ○
- スペルチェック ×
- 解答閲覧 ×
- スマホ ○
ガイドがあるものの、コーディングの完成形を知っておかないとレッスンを進めることが難しいように思います。ただし、ポイントを使えば正解も見られるので、なんとか学習を進められる設計になっています。
CSS の基本から Sass、Bootstrap、CSS アニメーションまで幅広くカバーしています。
W3Schools.com（英語）
- エディタ画面 ○
- スペルチェック ×
- 解答閲覧 ○
- スマホ ○
CSS、CSS3、Bootstrap、CSS レスポンシブ、W3css など一通りの CSS 機能が紹介されています。
CSS で何ができるか、ということを一通り学習できますので、とても参考になります。
Codecademy（英語）
- エディタ画面 ○
- スペルチェック ×
- 解答閲覧 ×
- スマホ ○
HTML & CSS コースで CSS を学習しますが、上記で紹介した Progate や CodePrep などと重複した部分もあります。また Sass や Bootstrap などの講座も用意されていますが、月額 19.99 ドル必要になってきます。
スマホ App 「Learn CSS」
CSS のことを一通り理解していないと難しいですが、対戦モードがあるなど、CSS の学習が捗るように工夫されています。
これらの他に、CodePen の開発者クリスさんのブログ 「CSS-TRICS」 や CSSDesk、CSSDesign なども最新の CSS を理解する上で役立ちます。
スマホでコーディングするなら
デフォルトのキーボード入力では < や “ など入力しにくいので、コーディング用のキーボード APP をインストールしておくと作業が激捗ります。 例えば、Hacker's Keyboard（Android） や Hacker's Keys iTunes $1.99 などがあります。
＼一流デザイナーのスキルが身に付く／
まとめ
いかがでしたでしょうか？コーディングした内容が Web に反映されると面白いですよね。
実際の開発現場では答えがなく、自分で考えてclass名をつけないといけないなど、コンポーネントのことを理解していないと作業できない、もしくはおかしなコーディングとなってしまいます。
- この記事を書いた人
- オシママサラ
