ここではCSSの学習に利用できるサイトを紹介していきます。
これからデザインを学びたい人、CSSの書き方を学びたい人にはおすすめのサービスでしょう。

Progate

/uploads/picture/asset/117/php_sb_2.png

スライドと実践で学習するサービスです。
ブラウザ上のエディタでCSSのコードを入力し、その場で画面に反映させながら課題に合わせて完成させていきます。無料では基本的なWebサイトの構築を一通り学習し、有料会員(980円/月)のコースでは更に本格的なレイアウトのサイトを作るところまで学ぶことができます。

Progate

ドットインストール

/uploads/picture/asset/118/php_sb_3.png

動画で学習するサービスになります。
「ホームページを作れるようになろう」内のCSSに関する学習コースは無料で利用可能です。よく使用するプロパティなどについて丁寧に解説されており、実戦で役立つ内容になっています。

ドットインストール

MOZER

/uploads/picture/asset/119/html_s_2.png

物語に沿って目的に合わせたサイトを作成していくゲーム形式のサービスです。絵や音楽も本格的で楽しく学習できるようになっています。
ひとつひとつ解説しながらの進行なので初心者でも安心して学習することができます。

MOZER

Markup

/uploads/picture/asset/120/css_s_1.png

CSSに特化した学習サイトです。
スライドを見ながら一から順にサイトを作成していく形式になります。自分の進行度に合わせた学習が可能です。

Markup

Schoo

/uploads/picture/asset/121/html_s_6.png

動画と生放送の授業で学習するサービスになります。CSSの基礎は全て無料で視聴可能です。
他にもWebサイト作成に必要な知識を総合的に学ぶことができます。

Schoo

paiza

/uploads/picture/asset/122/js_s_4.png

IT・プログラミングに関する学習・転職サービスです。
動画を見ながら実践で勉強する形になります。有料プラン(600円~/月)ではレスポンシブやグリッドなどについても学習することができます。

paiza

Codecademy

/uploads/picture/asset/123/css_s_2.png

問題と完成図を見ながら、それに合うようにコードを入力して問題を解いていく学習サイトです。
カリキュラム内で分からないところは他のユーザーに質問することもできます。

Codecademy

cssreference.io

/uploads/picture/asset/124/css_s_3.png

CSS全般のリファレンスです。英語サイトになります。
プロパティをクリックすると解説とサンプルコードを参照することができます。解説は図解入りで見やすく、実際に画面でどのような表示になるかということが確認できます。

cssreference.io

Webデザインレシピ

/uploads/picture/asset/125/css_s_4.png

Webデザインに関する知識を総合的に学ぶことができるサイトです。
CSSに関する解説も豊富でありサンプルコードとその解説も分かりやすく、さまざまな目的に向けて参照できる内容になっています。

Webデザインレシピ

Webクリエイターズチップス

/uploads/picture/asset/126/css_s_5.png

動画・解説・サンプルコードの3つが用意されており、画像などを使用するときはそのファイルもダウンロードすることができます。
PhotoshopやIllustratorの講座もあるため、Webデザインに関する他の知識について学びたい人にもおすすめです。

Webクリエイターズチップス

以上、入門向けのCSS学習サイトを紹介しました。
CSSは、難しい知識等は必要ないかもしれませんが、覚えておくと便利なものが多くあります。
思い描いた通りのデザインを作りたい人は、ぜひ学習を進めてみてください。