HTMLとCSSのおすすめのYouTube動画を紹介します
Web開発に興味があって、「これからHTMLとCSSをちょっと勉強してみようかな」という方もいらっしゃると思います。
HTMLとCSSを学ぶ方法としては書籍、学習サイト、プログラミングスクールなどいろいろとありますが、手っ取り早く短時間で基本を学ぶ方法としてはYouTubeが適していると思っています。
ただ、YouTube上には多数の動画があるのでどの動画で学べばよいかはなかなか判断が難しいと思います。
そこで、本記事では私が実際に視聴した動画の中でHTMLとCSS関連でおすすめの動画をいくつか紹介しようと思います。
動画の選定基準は下記のとおりです。
あまり長すぎない
コーディングしている様子が見れる
内容がわかりやすい
内容が充実している（基本的な内容が網羅されている）
学習内容と学習の順番
HTMLとCSSの学習内容ですが、まずは下記の４つを１から４まで順に学習していき、その後は少しづつその他の技術（レスポンシブデザイン、ポジション、アニメーション、、、）を身につけていくのが良いと思います。
１．HTMLの基本
２．CSSの基本
３．CSS Flexboxの基本
４．CSS Gridの基本
上記の４つの中では４のCSS Gridは使用する場面は限られますので、まずは１〜３を理解した後、余裕が出てきたら４を学ぶというのが良いと思います。
HTMLのおすすめ動画
下記はHTMLの基本を１時間で学べる動画です。
CSSのおすすめ動画
CSSの基本を１時間半で学べる動画です。
CSS Flexboxのおすすめ動画
CSS Flexboxは下図のNabvarのような一次元のレイアウトを実現するのに欠かせない技術です。
下記はCSS Flexboxの基本を５０分で学べる動画です。
HTMLとCSSでWebサイトを作成している動画例
HTMLとCSS（Flexbox含む）がどのようなものかを理解したら、実際にHTMLとCSSを使ってWebサイトを作成している動画を視聴してみるのが良いと思います。
例えば下記はHTMLとCSSで１０個のWebサイトの画面を作成している動画です。
HTMLとCSSを使ってどのように画面を作成していくのかの流れを確認することができます。
下記のサイトからデモを見ることができます。
例えば「Automotive Car」のリンクをクリックすると下記のサイトに遷移します。
下記にリンクを貼っておきます。
上記の動画は最初から最後まですべてを見る必要はなく、デモサイトでWebサイトの画面を確認して気に入ったWebサイトがあればその部分だけの動画を見るので良いと思います。
動画の内容も全て理解する必要はなく、まずはHTMLとCSSを使ってどのようにWebサイトが作成されていくかの雰囲気が掴めればとりあえず良いと思います。
Emmetのおすすめ動画
上記の１０個のWebサイトを作成する動画の中でも使われていましたが、HTMLとCSSを省略記法でコーディングすることができるEmmetというものがあります。
必ず使わなくてはならないというものではありませんが、知っておくと便利な機能です。
下記の動画ではEmmetの基本を３５分で学ぶことができます。
Emmetには公式のチートシートがあり、HTMLとCSSの省略記法がまとめて紹介されています。
下記にリンクを貼っておきます。
CSS Gridのおすすめ動画
CSS GridはCSS Flexboxに比べると使用する頻度は少ないですが、下図のサイトのような二次元のGrid状のレイアウトを実現するのに欠かせない技術です。
下記はCSS Gridの基本を１時間で学べる動画です。
HTMLとCSSのおすすめ学習サイト
本記事ではHTMLとCSS関連のおすすめ動画をいくつか紹介しましたが、HTMLとCSSをじっくりと学習するためにはその他の学習教材が必要となります。
そこでおすすめなのが次の２つの学習サイトです。
MDN
W3Schools
MDNサイトの画面です。
下記にリンクを貼っておきます。
W3Schoolsサイトの画面です。
下記にリンクを貼っておきます。
MDNとW3Schoolsについては以前下記の記事で紹介しましたので、興味のある方はご確認ください。