プログラミングや動画編集の勉強ならCANIT (キャニット)

もっとCSSを極めたい人向け:おすすめ学習サイト5選

パソコン デザイナー プログラマーになる準備

最近、猫田さんは自分のサイトを作り始めたようです。

猫田さん
猫田さん

なんかわたしのサイト、デザインがダサいのよね

牛山くん
牛山くん

ちょっと見せてください。 あー、たしかにダサいですね

猫田さん
猫田さん

……

CANIT先生
CANIT先生

ここまでHTMLとCSSの勉強は最低限のものしか、やってきませんでしたからねぇ。もう少し、深くCSSの勉強をするといいかもしれません

猫田さん
猫田さん

んー でもprogateもドットインストールもひととおりやったんだよなぁ

CANIT先生
CANIT先生

CSSを学べるサイトは他にもたくさんありますよ。せっかくなので今日は、もっとCSSを深く学べるサイトを紹介しましょうか

猫田さん
猫田さん

やったー!

というわけで、今回はprogateやドットインストールでひととおりCSSを学んだ人に向けて、もっとCSSに詳しくなれるサイトを厳選して5つ紹介します。

CSSが上達するサイト:厳選5つ

パソコン学習
CANIT先生
CANIT先生

CSSは、WEBデザインをするために使う言語です。だから、キリがないといえばキリがないんですよ

初心者用のプログラミング学習サイトであるprogateドットインストールでもCSSは学べます。ただ、ほんの触りの部分しか学ばないので、いざ自分でサイトを作ろうとすると困ることも多いです。

猫田さん
猫田さん

自分のサイトをもっとかっこよくしたいんだよね

CANIT先生
CANIT先生

猫田さんのように、ちょっと欲が出てきた人は他のサイトでもCSSを学んでみましょう。progateやドットインストールで学んでいれば基礎はできているので、そう難しくはありませんよ。というわけで、CSSをもっと深く学べるサイトを5つ紹介します

  1. Markup
  2. Flexbox Froggy
  3. 株式会社アーティス
  4. Webデザインレッスン
  5. Web クリエイターボックス

CSSが上達するサイト①:Markup

マークアップ

最初に紹介するのは、Markupというサイトです。

CANIT先生
CANIT先生

レイアウトに特化したHTMLトCSSの学習サイトです

Markupはどんなコードを追加したらサイトがどのように変化していくのか、がリアルタイムでよくわかります。CSSを中心にHTMLとCSS全体を復習できるサイトです。

牛山くん
牛山くん

90〜120分程度の学習で色々なことを効率良く復習できますね

CSSが上達するサイト②:Flexbox Froggy

フレックスボックス

続いて紹介するのは、Flexbox Froggy

CANIT先生
CANIT先生

CSSの中の難所の1つであるフレックスボックスの学習に特化したサイトです

牛山くん
牛山くん

たしかにフレックスボックスは難しい印象がありましたね

Flex Foggyはパズルのような感じでフレックスボックスを何度も実践します。レベル1から始めて最後のレベル24までクリアすれば、フレックスボックスへの苦手意識はなくなっているでしょう。

CSSが上達するサイト③:CSSアニメーション:株式会社アーティス

アーティス

次はCSSのアニメーションを特集している株式会社アーティスです。

CANIT先生
CANIT先生

フレックスボックスと同じようにアニメーションもCSSのわかりづらい箇所の1つです。株式会社アーティスのCSSアニメーションのページでは、CSSで作れるさまざまなアニメーションを見た目でわかりやすく紹介してあります

猫田さん
猫田さん

コードだけじゃなくて、実際にアニメーションが動いているからわかりやすいね

CSSが上達するサイト④:Webデザインレッスン

webデザインレッスン

次は、もっと色について学びたい人に向けてWebデザインレッスンを紹介します。

CANIT先生
CANIT先生

サイトのデザインって、実は結構色が重要なんですよ。色を変えるだけで、ユーザーに与える印象は大きく変わります。このWebデザインレッスンは、CSSの色について深く学べるサイトです

牛山くん
牛山くん

色の勉強は深そうですね。カラーコーディネーターのような資格もあるくらいですから……

CANIT先生
CANIT先生

突き詰めようとしたらキリがないでしょうね。だから、ほどほどにしておかないとダメかもしれません

CSSが上達するサイト⑤:Web クリエイターボックス

webクリエイターボックス

最後はCSSの情報サイトWEBクリエイターボックスを紹介します。

CANIT先生
CANIT先生

こちらは、WEBデザイナーの方の個人サイトですね。CSSをはじめとするWEBデザインの情報をこまめに発信しています。ためになる情報はもちろん、WEBデザイナーがどのようなことを考えているのかがわかるので、面白いですよ

猫田さん
猫田さん

これ、manaさんのサイトだよね。わたし、本を買ったから知ってる!

CANIT先生
CANIT先生

おやおや、猫田さんはご存知でしたか

CSSをもっと極めたい人向けのおすすめサイト:まとめ

女性
CANIT先生
CANIT先生

他にも役に立つサイトはいくらでもありますが、キリがないのでこの辺にしておきましょう

牛山くん
牛山くん

この5つだけでも、全部チェックしようとしたら結構な時間がかかりますからね。僕もCSSの復習のためにいくつかチェックしたいと思います

猫田さん
猫田さん

このサイトを全部チェックしたら、わたしのサイトもかっこよくなるのかなぁ

CANIT先生
CANIT先生

技術的に困ることはほとんどなくなると思いますよ。ただ、最終的にはセンスの部分が大きいかと……

猫田さん
猫田さん

むぅ……

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

プログラマーになる準備言語・WordPress
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました