こんにちは、yutaです。
Webデザインの学習を始めた方で、CSSを知らないという方はいないと思いますが、勉強を始めたばかり、あるいはこれから始めようと思っている方の中には、「どうやって勉強したら良いのか分からない」という方も多いのではないでしょうか。今回は、そういう方のために「CSSを体系的に学べるサイト」と「CSSを勉強している時に躓きやすい点を解説してあるサイト」をまとめてみました。
1.CSSを体系的に学べるサイト
1-1.CSSだけでなくHTMLの知識もゼロから学べる「サルワカ | Webデザイン入門」
1-2.2-3分の短い動画でプログラミングを学べる「ドットインストール」
2.CSSを勉強する時に躓きやすい点を解説してあるサイト
2-1.HTMLの各要素がブロックレベル/インラインを一目で確認できる「TAG index」
2-2.レスポンシブデザインの勉強の基礎となるメディアクエリについて学べる記事
2-3.コピペで使える、おしゃれな見出しデザイン68選「サルワカ」
2-4.何かと便利なFlexboxの使い方を非常に分かりやすくまとめてある記事
1.CSSを体系的に学べるサイト
CSSを学ぶには、Webページ制作のための土台となるHTMLを理解する必要があります。以下で紹介するサイトでは、HTMLの基礎からCSSを使ったWebページのデザインまで知識ゼロの方でも理解できるように易しくかつ詳しく解説されています。
また、そもそもプログラミングを勉強する環境が整っていないという方のために環境構築の方法についても解説されているので、パソコンとインターネット環境さえあれば今すぐ始められます！
ここで紹介するサイトの特徴はCSSを「体系的に学べる」という点です。体系的というのは、基礎知識から学習が始まって、知識を増やしながら徐々に応用編へ移っていくスタイルのことです。要するに学校の授業みたいな感じですね。学生さんは初めは知識ゼロですが、基礎から勉強することで英語を習得したり、数学の問題を解けるようになりますよね。これから紹介するサイトはそういう感じで土台作りから応用編までを順序正しく学べるのでおすすめです。
1-1.CSSだけでなくHTMLの知識もゼロから学べる「Webデザイン入門 | サルワカ」
こちらのサイトは、僕がHTMLとCSSを一から学習したサイトです。HTMLやCSSを勉強するために必要な環境作りから、HTML・CSSの基礎知識、CSSを使った具体的なWebページのデザイン方法などを非常に分かりやすく、丁寧に解説してあります。
サイト自体も「さすがWebデザインの学習サイト」と言いたくなるほど洗練されていて、見易いです。正直、このレベルのコンテンツを完全無料で公開されている筆者様に大大大感謝です。
書籍を購入して勉強するのもありですが、ちょっとやってみたい程度の興味であれば、まずはサルワカさんのサイトで勉強してみるといいでしょう。
1-2.2-3分の短い動画でプログラミングを学べる「ドットインストール」
こちらのサイトは、プログラミング学習サイトとして非常に有名ですがもちろんHTMLやCSSの勉強もできます。ドットインストールの一番の特徴は「2-3分の短い動画でプログラミングを学べる」ことですね。
有料プランもありますが、基本的に無料で利用できます。有料プランも月額980円と手を出しやすい価格なので、NetflixやHuluなどで月額料金を払っている方は、ドットインストールにも少し予算を割いて人生をイージー化させるための一歩を踏み出すのも有りかもしれません。
2.CSSを勉強する時に躓きやすい点を解説してあるサイト
ここからは、CSSを勉強している時に躓きやすい所を分かりやすく解説してあるサイトや、Webデザインを勉強するうえでちょいちょい確認したくなる項目をまとめてある便利サイトを紹介します。
2-1.HTMLの各要素がブロックレベル/インラインを一目で確認できる「TAG index」
CSSの勉強をしていると、HTMLの要素がブロックレベル要素なのかインライン要素なのかを知りたくなることがよくあります。divやpなどの頻繁に使う要素はブロックレベル要素だと覚えているものですが、例えばtableは？とかulは？とかコーディング中に「あれ？」っとなることがあるのでこういうサイトをブックマークしておくと便利ですよ！
2-2.レスポンシブデザインの勉強の基礎となるメディアクエリについて学べる記事
レスポンシブの基本 | メディアクエリの書き方 | それからデザイン
現在のWebサイトにはレスポンシブデザインが必須と言っても過言ではありません。ここ10年の間にスマホが急速に普及して、現在ではパソコンよりもスマホでWebサイトを閲覧される割合のほうが多くなっています。そんな中でパソコンでしか適切に表示がされないWebサイトは閲覧数が下がり、ECサイトなどの場合は売り上げが上がりにくくなるでしょう。
そういうわけでWebデザインを学ぶうえで、レスポンシブデザインは必修項目なわけですが、レスポンシブデザインはCSSで実現します。HTMLはWebサイトの内容(文字や画像)を記述し、CSSでデザイン(文字色やサイズ、コンテンツの配置やエフェクトなど)を記述します。
最近ではレスポンシブデザインを実現させるためのCSSフレームワークである「Bootstrap」が人気ですが、場合によってはBootstrapを使えないシーンもあったりしますし、そういったフレームワークの礎となっている知識が少しあるだけでも、フレームワークの勉強をする際の理解力が格段にアップします。
具体的にはメディアクエリというものの説明がされているんですが、これはWebサイトを閲覧する「ブラウザの画面幅に応じてデザインを複数決める」ことができる機能です。例えば、パソコンのブラウザで見ている時には3カラムのデザインにするけど、スマホで見ている時には1カラムにしようなどといった「デザインの場合分け」ができるようになります。Webデザイナーを目指す方は必須の知識でしょう。
2-3.コピペで使える、おしゃれな見出しデザイン68選「サルワカ」
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 | サルワカ
「CSSを体系的に学べるサイト」でも紹介したサルワカさんですが、ブログ記事などで非常に使えるおしゃれな見出しデザインを68個も紹介してあります。しかも、コピペで使えるのですぐに利用できますし、一つ一つのデザインに簡単な解説も付いているのでコードを見ながら自分のデザインの勉強にもなります。本当にサルワカさんは僕のイチオシです！
2-4.何かと便利なFlexboxの使い方を非常に分かりやすくまとめてある記事
【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。| PLUS DESIGN COMPANY
上のサイトは、PLUS DESIGN COMPANYという大阪を拠点に活動しているデザイン事務所が公開しているブログ記事ですが、Flexboxの使い方について非常に分かりやすくまとめてあります。
Flexboxは、CSSを扱ううえで必須の知識です。Flexboxを使うことで、Webサイトの上部に配置されているメニューバーを作成したり、複数カラムのページを作成したりできます。基本的な使い方はすぐに覚えてしまうのですが、レイアウトや要素の並び替え、要素の伸縮など実際には色々な機能があってそれらを全て覚えることは難しいので、必要に応じてこのサイトを見て確認すると良いでしょう。
実際僕もFlexboxは毎回使うと言っても過言ではないほど多用しますが、その度にこのサイトにお世話になっています。ありがとうございます笑。
今回は、CSSを体系的に勉強できるサイトと、CSSの勉強中に躓きやすい点を開設していあるサイトを紹介してきました。まずは独学でやってみて、もっと高度な知識を付けたい、高速にレベルアップしたいと思う方は「TechAcademy [テックアカデミー] 
」などのオンラインスクールを受講するのもアリですね！無料体験もできるようなので、とりあえず無料で受講してみて気に入ったら本格的に受講してみるという感じで良いと思います。では、また！
ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)
