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