どうも、篠原です。
上流工程の作業を任せてもらえるようになり、要件定義やDBテーブル定義などに勤しんでいる今日このごろです。
コーディングが恋しくて仕方ないので、少しでもコーディングに触れたいがために今回はHTMLとCSSについて書きます。。
皆さんはHTML・CSSを勉強する時は何を使っていますか？
実際にエディタでコードを書いたり、参考書などを読んだりなど、人それぞれかと思います。
今回は、個人的にどの方法よりも一番手軽に学べるのでは？と考えている【youtube動画】による勉強方法を紹介したいと思います！
本当にYoutubeで学べるの？
動画じゃHTMLとかCSSは簡単に学べないんじゃ…？
そう考えている方もいらっしゃるかと思います。
そんなことはありません。
むしろ、動画だからこそ学びやすいのです！
CSSをよく知らない人は、「この一行にどんな意味があるんだろう…？」と悩んでしまうことが多いと思います。
どの記述が一体どの部分に反映されているのか、記述が増えれば増えるほど分からなくなりますよね。
その悩みが顕著に出てしまうのが、コーディングの結果だけが載っているWEBページやテキストなどです。
過程をすっぽ抜かした結果だけを見せられても、どのCSSがどこに効いているかが分からないので、
「ここはもっとこうしたいな…」
という細かいカスタマイズが出来ないんですよね。（全く同じものを作る分には問題ないのですが。。）
ですが、動画で実際にCSSを書いているところを見ると、結果だけでなく過程も見ることが出来るので、
どの記述がどのように反映されているのかがとても分かりやすいです。
実際に見てみよう
百聞は一見に如かず。。
というわけで実際に私が暇な時間に見た中で、これいいな〜と思ったものを紹介します。
ちなみに、以下の動画はHTMLとCSSをある程度理解している人向けのものです。
（なんにも知らなくても純粋に楽しく見ることはできます！！）
HTMLやCSSって何？？って方は、【こちら】の記事をご覧ください。
では、どうぞ！
ログインフォームと送信ボタンを作成するHTML・CSS
シンプルなデザインのログインフォームです。アニメーションがおしゃれで綺麗ですね。
個性的なホバーアクションつきのボタンを作成するHTML・CSS
こちらは一工夫あるホバーアクションがついたボタンを作成するためのHTML・CSSです。
動画内で使われているCSSをちょっといじれば、もっといろいろなパターンのホバーが作れるようになりますね。
ホバーアクションはWEBサイトを作る上で必ずと言っていいほど取り入れるものなので、動画で分かりやすく学ぶことが出来るのは便利です。
※ホバーアクションとは
WEBページにあるボタンなどにカーソルをあわせると、ボタンの色が変わったり下線がついたりしますよね。
あれがホバーアクションです。
特定の要素にホバーした時に起こる動き（アクション）をCSSで定義することが出来ます。
項目をクリックすると中身のサブメニューが開くHTML・CSS
こちらはサイトのメニューを表示する時によく使われるものですね。
項目名をクリックすると、その中身のサブメニューが開くものです。
このようなメニューを取り入れているWEBサイトは結構多いので、分かりやすくやり方を教えてくれるのはありがたいです。
動画で学ぶことのメリット
上記の３つの動画は、画面が左右に分割されており、左側で書かれたコードが右側のWEB上でどのように反映されるかがリアルタイムで分かるのが魅力的です。
コードが反映された部分を分かりやすくマウスポインターで示してくれるのも親切ですよね。
これらは動画ならではの見せ方です。
動画の時間も1つあたり10分以内と短めで、さくっと見られることも利点の1つであると言えます。
今日こんなデザインをコーディングする予定があるから、通勤時間中にさくっと見とこ〜みたいなことも出来ますね！
まとめ
今回は動画で学ぶHTML・CSSについてお話しました。
恥ずかしながら、youtubeにこのような動画コンテンツがあることを知ったのは、わりと最近のことです。。
これをきっかけにyoutubeチャンネルを開設するのもアリでは？とか実は思っています。
会社の知名度アップや広告収入、新人教育などに役立ちそうですよね！
様々なメディアコンテンツやプラットフォームが増えてきて、知識を吸収するための方法も多様化してきましたね。
学ぶ対象や、学ぶものの特性を理解した上でどのような方法で勉強するのが効率的であるかを判断していくことが大事になりそうです。
