こんちゃっす。木村です。
嫁氏が「わたしもプログラミングやってみたい」と言っていたので、嫁氏にはHTMLとCSSを理解するために「無料で学習できる方法」を紹介しました。
「HTMLやCSSはプログラミングじゃないよ」とは言いますが、プログラミングを考える上で土台となってきます。下にも書きましたが、「HTML/CSSだけではできない部分を、プログラミングが補う」という関係にあります。
以下は、嫁氏にLINEのノートで共有した情報をほぼそのまま掲載しています。やや日本語が雑な部分がありますが、ご了承ください。
TML CSS プログラミング 検証ツール Progate YouTube MDN Qiita teratail GitHub Udemy Zenn
はじめに
HTML/CSSだけだと、よほどの才能がないと「手に職」は無理ゲーです。
ただ、「HTML/CSSでできること」がわかると
「できないこと」をできるようにするためにプログラミング言語があるのかー
と思えます。
つまり、HTML/CSSだけでは行えない処理を、JavascriptやPHPなど、他のプログラミング言語が行うという相補関係にあります。このことが他のプログラミング言語を学ぶ意欲に繋がるのかも。
まずは「HTMLとCSSとは何か」「どういう仕組みか」を理解するところから始めましょう。
もちろん、CSS以外もちゃんとできるひとです。
学習アプリ
Progate
https://prog-8.com
- 鉄板のプログラミング学習アプリ
- 実際にプログラミングする感じでコード書きつつ勉強できる
- スマホアプリ版とPCブラウザ版がある
PCの方が実際のプログラミングに近いけど、スマホの方がお手軽感はある。きちんと学ぶならPC版（道場コースなど、PC版にしかないコンテンツもあるので）。
とりあえず無料でやれるHTML/CSSの部分をやっちゃって、それからYouTube動画見ると「あれ？かなり理解できてるかも」と実感できます。
YouTube
- 概要を知るにもOK！復習にもOK！
- ひとに解説してもらうと飽きない！
- 自分に合ったチャンネルを探そう！
知ってるところは飛ばしつつ、2倍速再生でざっくり学習。←これが大事
実際に自分でも書いてみないと身につかないけど、誰かがコード書いてるのみると「こう書けるのか」となんとなく理解できる。
CreatorQuest
めちゃくちゃ丁寧だし、動画も見やすい。CeVIO・さとうささらの声も聞きやすいですね。ただ、シリーズ更新が途中で止まってるので注意。今後更新されるかもしれないけど、その頃にはHTML/CSSは書けるようになってそう。
Akichon プログラミング講座
こなれてない感じが、逆にわかりやすい。じつはぼくが一番最初に見たHTML解説動画。概要をざっくり知るならいい感じ。コメントで質問してるひとに回答もしてるので、コメントもチラッと見るといいかも。
たにぐちまことのともすたチャンネル
あえて深掘りして「なんでそうなるのか」の部分を解説してくれてます。これまでの歴史を簡単に説明しつつ、今のHTML/CSSの主流などを教えてくれます。学習に悩んだときに見ると、思わぬヒントが隠れてる。
しまぶーのIT大学
元Yahoo!JAPANエンジニア。ひたすらわかりやすい。セレクタなど、細かい部分についてもきっちり解説しています。超初心者から抜け出したあたりにオススメ。
Webサイト
困ったときはGoogle検索。
で、だいたいここら辺のサイトが出てくる。読む。わかったりわからなかったりする。
ただ、「わからないことを自分で調べられる」ということもプログラミング学習では必須能力なので、今のうちから身につけちゃおう。
MDN
https://developer.mozilla.org/ja/docs/
エンジニアのためのWikipedia。何かしら検索したらまずここにたどり着く。日本語は機械翻訳されてるっぽいので読みづらいし、専門用語多めで何言ってるのか分かんないことも多い。ただ、きちんとした定義や説明を知りたいときには読むことも。
Qiita
https://qiita.com
エンジニアがアイデアや知識をめちゃくちゃ投下してくれてるサイト。無料でいいの？ってレベルで詳細に書いてくれてる人も。ただ、Qiitaの中で自分に適切な投稿を探すためには、そもそも検索のためのキーワード知らないといけないので、まずは他でざっくり理解しないとダメかも。
teratail
https://teratail.com/
エンジニアのためのYahoo!知恵袋。基本的に、自分がわからないことはすでに誰かが質問してる。Googleに「○○ ××のやり方」とかで検索すると、Qiitaかteratailにたどり着く。
GitHub
https://github.com
GitHubは、ユーザのみなさんからヒントを得て作成された開発プラットフォームです。オープンソースプロジェクトやビジネスユースまで、GitHub上にソースコードをホスティングすることで数百万人もの他の開発者と一緒にコードのレビューを行ったり、プロジェクトの管理をしながら、ソフトウェアの開発を行うことができます。
って具合に専門用語飛び交うけれど、世界中のひとが「こうやったらこんなことできるぜ！」っていう知見だったりコードだったりを発表したり、開発者間で情報やりとりするプラットフォーム。
（いまだに使いこなせない……）
その他
無料だったり有料だったり。とはいえ、HTML/CSSの学習で有料コンテンツは要らないと思うから、参考程度に。
これはナイショですけど、有料コンテンツを購入せずに目次だけ目を通して、キーワードをGoogle検索してみるというワザもあります。
Udemy
https://www.udemy.com/ja/
無料・有料の動画が見れる。個人が講座を受講・開講できるサイト。プログラミングだけでなく、資格だったりビジネスだったり、幅広く扱ってる。定期的にセールしてる。運営がベネッセ。
Zenn
https://zenn.dev
最近新しくできたサイト。エンジニアが無料・有料でいろんな知見を公開してる。
最後に
このようにHTMLやCSSはわざわざスクールに通わなくても、「比較的簡単に」「無料で」学習することができます。ただ、ひとつ注意が必要です。
学習うんぬんはもちろん大事だけど
いちばん大事なのは「実際に自分でコードを書いてみる」ことです。これが抜けてたら「ただ知ってるだけ」でしかありません。
自分書いてみて初めて「理解」に近づきます。
- 細かい部分の理解
- わかる/わからないの整理
- エラーの対処法
何より自分でイジってみることで、「こうすればこう動く。じゃあこうやってみたら……？」と試行錯誤する楽しみに気づくかも。
自分でコードを書く際は、どこかのWebサイトを参考にしながら「どう書いたらこのサイトを完全再現できるかな？」とチャレンジするのがオススメです。こうした再現を「模写コーディング」と呼びます。
答え合わせは、ブラウザの「検証ツール」によってすることができます。検証ツールでは、実際のコードを確認することができます。
基礎知識を頭に入れたら、手を動かして自らの血肉にしましょう！
- Webサイトのどこかを右クリックをし「検証」を選択する
- もしくは[F12]キーを押す（PCの設定によっては、[fn] + [F12] の場合も）
