【HTML/CSS】模写コーディング独学。それYouTubeで。【初心者向け】
今日は釣りサムネにしてみました。（お茶目）
どうも。サイコショッカー太郎です。本当です。
本日なんですけど、プログラミング初心者の皆さん。（お前もやろがい）
次に自分がどんな事を学べばいいか分からず、プロゲートを何周も何周も周回していませんでしょうか？
それはプログラミング学習ではなくて忍者わんこをムキムキにするゲームをやっているだけなので今すぐやめましょう。。。。。
そんな方達に今回おすすめしたいのが
[ 模 写 コ ー デ ィ ン グ ] です。
これはなんなのかというと、読んで字の如く、
「既存のwebページを写経する」というHTML/CSSの練習方法です。
でも、いきなりwebページ見てこれできる人多分ほとんどいないと思うんですよ。
画像データとかどこから取るねんとか、要素と要素の間の幅どうやって測るねん。
みたいになって詰みます。
でまあ、色々やってみてですね。
結局、細かいやり方とかですね動画で学んでしまうのが一番手っ取り早いんじゃないかなと、気づいたわけですね。
マナブログさんのお動画の方でもこんな言ってました。
動画だと少し戻してまた見直せますし、止めてコード見たりできますし。
いい時代になったもので、YouTubeだと無料で見れますから。こんなにコスパの良い学習はないんじゃないかなと思うわけです。
そんな模写コーディングを今まさに始めたくなった人向けに、
【めちゃくちゃ参考になる模写コーディング動画3選】
を持ってきましたので発表していきたいと思います。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
1.Webの神様/
【超入門】初心者向け 模写コーディング！オススメのやり方とポイント【HTML・CSS コーディング】
こちらの動画は、なつこさんと言うナビゲーターさんが、丁寧に説明しながらコードを書いてくれると言う動画です。
この動画では、序盤に、事前準備の説明がかなり細かく入っていて、模写コーディングに使える拡張機能や、画像の抽出方法、webページ全体のスクリーンショットの撮り方なども解説してくれます。
なので、初めて模写コーディングする方には特におすすめです。
全体的に動画を見ながら同じようにコードを書いていけば大丈夫なんですが、
CSSの章に入った段階で、動画のペースがグッと上がって、ちょっと初心者だとついていけなくなる感じがありました。
これはCSSのコードを自分で考える練習になると思えるので、プラスととるかマイナスととるかはあなたの理解度次第ですね。
【HTML編・現役Webデザイナーが教える】初めてでもわかるHTMLコーディング入門
上記の動画で「置いて行かれた」「HTMLからまだよく分からない」と感じた方は河相さんのこちらの動画を参考にしてみてはどうでしょうか。
この動画は2部構成になっており、HTMLとCSSにそれぞれ分かれて説明されております。
動画自体はサクサク進んでいくのですが、簡潔でわかりやすい説明を常時イケボで聞けます。
この動画はとにかく一度最後までやりきってみる。がコンセプトになっているため、初心者を置いて行かないように、重点をしっかり説明しながら進めてくれます。
動画を見終わると、おしゃれなカフェのサイトのようなものを作れます。
レイアウトにもセンスがあるので、作り終わった時に結構達成感があると思います。
【模写コーディング】やり方・メリット・おすすめのツールを紹介！【HTML/CSS】
3つ目はちょっとおまけ的なものですが。
上記２つの動画のように、コードを見ながら一緒に書いていくと言う動画ではなくて、
模写コーディングの概念の説明や、
イケメン大学生が、HTML/CSSで模写コーディングすることによってどんなメリットがあるか。
模写コーディングにおけるワンランク上のスキル（多分現場でも使える）を身につけるツールを教えてくれます。
彼のポートフォリオはかなりレベルが高くて「こんなの絶対作れない」っていうかっこいいサイトが動画に出てくるのですが、ツールを駆使してこんなふうに作れます。
っていう説明が見れます。
12分くらい。比較的短い動画になってるので見て損はないと思います。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
いかがでしたでしょうか、動画のペースとか、自分がどんなデザインを作りたいかによって、参考になる動画が変わってくると思うんですけど、
ズブズブの初心者目線で選んでみました。参考になっていただければと思います。
次回は「物申す系youtuberになりたい」と言うタイトルで書いていきたいと思います。
PS.
一個前のブログで、初めてコメントがつきました！！！（うれしょん）
PS2.
このブログ初めて10日ぐらいかと思うんですけど。PV数が１００を超えたそうです！(うれしょん)
Twitterもやっておりますのでよければフォローお願いします。
Kawai Shotaro / 河相勝太郎
