【Udemy】HTML/CSSを初心者から一人前になれる講座を紹介！【0からでもOK】

こんにちはカレイドです。

プログラミングを始めよう！っておもった時にまず最初に勉強するのが　HTML/CSS という人はたくさんいると思います。

でも、HTML/CSSを学べるのはUdemyに限らず、Progateだったり、書籍だったり色々なものがあって結局どれがいいの？

という疑問を持った人がたくさんいると思います。

今回はそんなお悩みを解決してくれる講座をご紹介します。

最近はコンサルもさせていただいて、HTML/CSSをどこまでやればいいのかという疑問点は誰もが通る道であり、苦戦する場所なんだなと改めて感じました。

私が今から紹介する講座を勉強することでManehabiのLP（トップページ）くらいは最低限作れるようになります。

簡単なカレイドの自己紹介です。

何も知らなくてOK　0から始めるHTML/CSS学習！おしゃれでモダンなサイトを1から作ろう

今回オススメする講座は二つありますが、同じ講師の方が一貫して教えているものになります。

そして基礎部分だけではなく応用部分まで教えてくれている、そして知識として完結しているものをご紹介します。

今回ご紹介する講座は英語の講座なんですが、日本語に変換して勉強することができるので購入をご検討される方はこちらの記事と合わせてお読みください。

特にHTML/CSSの場合はコードを叩ければ何が反映されているかは分かるのであまり気にならないと思います。

【Udemy】英語字幕しかない講座を日本語字幕にして勉強する方法を解説する【セールとおすすめ講座】

そして、少しでも楽しそうと思った人はぜひ購入して始めることをお勧めします。　

Udemyは30日以内であれば返金可能なのでリスク０です。返金方法についてはこちらからどうぞ

【Udemy】返金制度の実際の流れと活用方法【デメリットなし】

Build Responsive Real World Websites with HTML5 and CSS3

まずは一つ目です。

Build Responsive Real World Websites with HTML5 and CSS3

こちらの講座はまずは基礎固めです。

初めて学ぶという人にはどういうフォントがいいか、そして色合いはどうしたらいいかということよりまずはコーディングをしたいって人が多いと思うので適宜飛ばしてもらっても全然オッケーです。

しかし、

色の使い方やフォントの使い方までいっぺんに教えてくれる講座や書籍、サイトは少ないので後で必ず必要になるタイミングがきます。

Progateもあくまでサイトを作ることが目的になっているのでフォントの使い方までは学ぶことが出来ません。

というわけで、自分が本格的にサイトを作ろうってなったタイミングで改めて見直してみると新しい発見とかがあるかもしれませんね。

行間や、文字の配置などは細かい部分ですが、視聴者視点からするととても大事なものです。

そういう意味で僕はこの講座をオススメしています。

HTML5 and CSS3の基礎を学び、モダンなWebサイトを作る

これだけでも十分基礎が学べますが、実はFloatという手法で横揃えにしたりするのは、あまりモダンな手法ではないです。

じゃあなんでこの講座紹介したの？と、思われた方も少なくないと思います。

実はこれには明確な理由があります。

私が今やっているWordPressの案件があるのですが、それはfloatを使って作られたもののちょっとした修正でした。

というわけで、もちろんスタイル当てている部分を全て消して1から統一しても、いいんじゃないの？と思う方もいると思います。

でもわざわざ消して書き直してもその部分に関してはただ書き方が変わるだけで、見た目が変わるわけないではありません。

どうせならたくさんの手法、特に昔のサイトではよく使われている手法のものは知っておいて損はないと思ってご紹介させていただきました。

また、floatは特殊な動きをするので、一度しっかり学んでおいた方が後で出てきた時にも迷わずに対応することができます。

最後に、古いやり方を学ぶことは新しいことを学んだ時により、その新しい手法のありがたみ、便利さがわかります。

流石に古すぎて使われていないものはナンセンスですが、floatはみんな大好きなProgateさんでもまだ教えているぐらいなので勉強しておきましょう！ということですね。

さてこの12時間ほどの講座で学べることとしては

このあたりになります。

では、まだ足りない知識とは他にどんなものであるでしょうか。

一気に差がつく講座　FlexboxからSassを使った効率のいいコード管理法を学ぶ講座

実際には前の講座をしっかりとこなして、サイトを作れるだけでもう立派なWebプログラマーです。

ただ、次に紹介する講座の知識を得るとさらにかっこよく、そして、大量のCSSコードを効率よく管理する方法まで学ぶことができます。

残りの応用部分として何を学ぶべきかというと

などがありますね。

この辺になるとだいぶ抽象的なのでパッと言われてもなかなか理解し難いと思います。

flexbox CSSGrid

Flexbox,CSSGridは要素の配置方法です。例えば横並びとか、縦並びとか、それをスマートにやってくれます。

他にも要素の順番を入れ替えたりするのにFlexboxは簡単にそれをすることが出来ます。

Sass

Sassはある程度CSSでプロパティを書いているの似ている、重複している文字列が出てきます。それを、効率よく管理して無駄なコードを減らしてくれるものになります。

そしてよく使うものは変数として再利用することで、楽させてくれる素晴らしいものです。

::before ::after

::before ::afterはその要素にたいしてスタイルを通常のものとは別に当てるプロパティになります。

これを知っているか知らないかでスタイルの幅に大きな差ができます。

@keyframe 

@keyframeアニメーションは複雑なアニメーションを設定することが出来ます。知識として知っておくだけで、ここだけは凝って作りたいなんて時にお世話になると思います。特にネットですぐに使えるLoadingのCSSなんかはにこのkeyframeを使っていますね。

この中でもFlexboxについては絶対に学んで欲しいと思っています。

特にfloatしか知らない人にとっては革命的なプロパティであること間違いなしです。

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

上で紹介した動画の講師が続編で出した講座になります。

この講座ではよりモダンなテクニックを学ぶことができます。

先ほど上で紹介した残り必要なものは全てこれで網羅できます。

私は特段、CSSを極めなければいけないわけではありませんでした。

しかし、Reactで使うCSS部分にまだたくさん不安があったのとCSSはやはり見た目に大きく関わる部分なのでカッコ良く作りたいと言う思いがあったので取らない選択肢はありませんでした。

結果、自分のオリジナルサイトを大きく変えたところ、友人にも凄いと言ってもらえたりと改めて見た目って大事だなって実感をしたのでこの講座をとって本当によかったです。

こちらの講座では３部構成になっていて

step.1 モダンなアニメーションを学ぶ

まずは一つのサイトを通してモダンなアニメーションをボタンだったり、ナビゲーションだったり、カードだったりにつけていきます。

そして大量のCSSコードを効率よくまとめてくれる　Sass　についても学んでいきます。

step.2 Flexboxを学ぶ

step1とはまた別のサイトを使ってFlexboxを重点的に学びます。図解を絡めながらじっくりやってくれるので知識の整理にも役立ちます。

適宜、おまけとしてiconをsvgと呼ばれるベクター形式。かなり鮮明に表示してくれるものなのですが、それに対する扱い方も勉強できます。

step.3 CSSGridを学ぶ

最後にまたこれも今までのサイトとは別にもう一つサイトを作りながら実践的なCSSGridの使い方について学びます。

というわけで、全部で3つのサイトをたった１３００円ほどの書籍を買うぐらいの感覚で購入して学ぶことが出来てしまいます。

これは簡単なWebサイトぐらいは作れるよっていう人には本当にやってもらいたい講座です。

上級のCSSを学び効果的なアニメーションをつけたサイトを作成する

結局CSSの表現はいいものをパクるが正義

みなさんの中にはサイトを作る時に全部のプロパティを覚えて書かなきゃダメだ！って思っている人がいるかもしれません。

でも、実際の業務に関してもほとんどのパーツは以前に作った知見をそのままコピーして流用するのが一番確実で早いです。

その上でイメージに合ったデザインで少し中身をいじるのが理想です。

ということは、できるだけ多くの異なるパターンのサイトを作り、引き出しをたくさん持つことが大事になります。

そしてそのパーツを適宜組み合わせて作るのが、最も早い成長ルートです。

オリジナリティを出すのはもっと後、初めはすでにできているメニューを真似るだけで立派な戦力として活躍ができます。

私のサイトのトップページもこの講座で学んだことを参考に作りました、ぜひ、この講座を受けた後にサイトを見てみてください。

多分構成はかなり似ていることに気づくはずです。でもちょっとCSSの中身をいじって色合いだったり形を変えるだけで全く別のものに見えるのがCSSの凄いところです。

このアレンジ力をどんどん磨いて自分だけの引き出しだけをこれからも増やしていこうと思います。

なん度も言いますがいいものはパクってアレンジ。これに尽きます。

まとめ

いかがでしたでしょうか。

今回はHTML/CSSという見た目を作る上で一番重要な部分を学べる講座について解説しました。

自分のオリジナルのサイトが作れるようになるだけでもまずはプログラミングって楽しい！って思えるようになります。