最近、猫田さんは自分のサイトを作り始めたようです。
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
なんかわたしのサイト、デザインがダサいのよね
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
ちょっと見せてください。 あー、たしかにダサいですね
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
……
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
ここまでHTMLとCSSの勉強は最低限のものしか、やってきませんでしたからねぇ。もう少し、深くCSSの勉強をするといいかもしれません
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
んー でもprogateもドットインストールもひととおりやったんだよなぁ
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
CSSを学べるサイトは他にもたくさんありますよ。せっかくなので今日は、もっとCSSを深く学べるサイトを紹介しましょうか
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
やったー!
というわけで、今回はprogateやドットインストールでひととおりCSSを学んだ人に向けて、もっとCSSに詳しくなれるサイトを厳選して5つ紹介します。
CSSが上達するサイト:厳選5つ
![パソコン学習](https://www.canit.jp/wp-content/uploads/2021/08/computer-768608_640.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
CSSは、WEBデザインをするために使う言語です。だから、キリがないといえばキリがないんですよ
初心者用のプログラミング学習サイトであるprogateやドットインストールでもCSSは学べます。ただ、ほんの触りの部分しか学ばないので、いざ自分でサイトを作ろうとすると困ることも多いです。
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
自分のサイトをもっとかっこよくしたいんだよね
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
猫田さんのように、ちょっと欲が出てきた人は他のサイトでもCSSを学んでみましょう。progateやドットインストールで学んでいれば基礎はできているので、そう難しくはありませんよ。というわけで、CSSをもっと深く学べるサイトを5つ紹介します
- Markup
- Flexbox Froggy
- 株式会社アーティス
- Webデザインレッスン
- Web クリエイターボックス
CSSが上達するサイト①:Markup
![マークアップ](https://www.canit.jp/wp-content/uploads/2021/08/image-1.jpeg)
最初に紹介するのは、Markupというサイトです。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
レイアウトに特化したHTMLトCSSの学習サイトです
Markupはどんなコードを追加したらサイトがどのように変化していくのか、がリアルタイムでよくわかります。CSSを中心にHTMLとCSS全体を復習できるサイトです。
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
90〜120分程度の学習で色々なことを効率良く復習できますね
CSSが上達するサイト②:Flexbox Froggy
![フレックスボックス](https://www.canit.jp/wp-content/uploads/2021/08/bbf4626d5f53fc3757f0ccb8061fb893-1024x577.jpg)
続いて紹介するのは、Flexbox Froggy。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
CSSの中の難所の1つであるフレックスボックスの学習に特化したサイトです
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
たしかにフレックスボックスは難しい印象がありましたね
Flex Foggyはパズルのような感じでフレックスボックスを何度も実践します。レベル1から始めて最後のレベル24までクリアすれば、フレックスボックスへの苦手意識はなくなっているでしょう。
CSSが上達するサイト③:CSSアニメーション:株式会社アーティス
![アーティス](https://www.canit.jp/wp-content/uploads/2021/08/e87b43a1d4d1e6f73533c8565804d62b-1024x578.jpg)
次はCSSのアニメーションを特集している株式会社アーティスです。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
フレックスボックスと同じようにアニメーションもCSSのわかりづらい箇所の1つです。株式会社アーティスのCSSアニメーションのページでは、CSSで作れるさまざまなアニメーションを見た目でわかりやすく紹介してあります
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
コードだけじゃなくて、実際にアニメーションが動いているからわかりやすいね
CSSが上達するサイト④:Webデザインレッスン
![webデザインレッスン](https://www.canit.jp/wp-content/uploads/2021/08/5de5393a9f70cd28b179985f8af64d80-1024x586.jpg)
次は、もっと色について学びたい人に向けてWebデザインレッスンを紹介します。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
サイトのデザインって、実は結構色が重要なんですよ。色を変えるだけで、ユーザーに与える印象は大きく変わります。このWebデザインレッスンは、CSSの色について深く学べるサイトです
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
色の勉強は深そうですね。カラーコーディネーターのような資格もあるくらいですから……
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
突き詰めようとしたらキリがないでしょうね。だから、ほどほどにしておかないとダメかもしれません
CSSが上達するサイト⑤:Web クリエイターボックス
![webクリエイターボックス](https://www.canit.jp/wp-content/uploads/2021/08/51d7a4030eeeea3a8ba1a00df498704c-1024x594.jpg)
最後はCSSの情報サイト、WEBクリエイターボックスを紹介します。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
こちらは、WEBデザイナーの方の個人サイトですね。CSSをはじめとするWEBデザインの情報をこまめに発信しています。ためになる情報はもちろん、WEBデザイナーがどのようなことを考えているのかがわかるので、面白いですよ
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
これ、manaさんのサイトだよね。わたし、本を買ったから知ってる!
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
おやおや、猫田さんはご存知でしたか
CSSをもっと極めたい人向けのおすすめサイト:まとめ
![女性](https://www.canit.jp/wp-content/uploads/2021/07/4932151_s.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
他にも役に立つサイトはいくらでもありますが、キリがないのでこの辺にしておきましょう
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
この5つだけでも、全部チェックしようとしたら結構な時間がかかりますからね。僕もCSSの復習のためにいくつかチェックしたいと思います
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
このサイトを全部チェックしたら、わたしのサイトもかっこよくなるのかなぁ
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
技術的に困ることはほとんどなくなると思いますよ。ただ、最終的にはセンスの部分が大きいかと……
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
むぅ……