HTML を覚える方法
Web ブラウザーを見ながら HTML をキータイピングして練習しながら覚えられる Web サイトがある
👆 W3Schools.com という Web サイトだ。かなり昔からある。
名前が似ている W3C とは関係のない団体。
この W3Schools の Web サイトを作ってるのが誰だか分からないが
なんか昔から 超やる気があって、常に内容を今風にアップデートしてくれているので、最近の技術が分からなくなったとき まず このサイトを見て練習するとよい
こういうサイトは他にもあるが、とりあえず わたしのこの記事では W3Schools.com の Web サイトの使い方を説明する
👆 W3Schools の目次には HTML、 CSS、 JAVASCRIPT など、 Web 系の技術の名前がたくさん並んでいる。日本では超有名なのに無いのもある、 VBA とか。目次にある HOW TO とか何だこれと思うやつを開いても面白い
ひとまず HTML をクリックしてほしい
👆 目次みたいなやつ、専門用語では ナビゲーション と呼ぶ
ナビゲーションが何のために 画面の横に付いているかというと、
あなたが今見ているページは どこなのか分かるようにするためなのと、
次はどのページに進むのかが 分かりやすいようにするためだ
👆 緑色に着色されている部分を ハイライト と呼ぶ
ハイライトのもともとの意味は 陰影の中でも特に白く光っていて元の色が飛んでいるところだが、パソコン界隈では昔から なんか選択されて色が強調されているところを ハイライト と呼んでいる
上図では、 HTML という大きな分類の中にいて、さらにその中の HTML Tutorial というところにいて、さらにその中の HTML HOME というところにいるのだなと分かる
なんか目次の多さを見ただけでも うげーっ と思うかもしれないが、わたしも うげーっ と思っている。しかも HTML だけでこの多さだし、その他の技術文書なんてものは もっと多い。 みんなどうしてるのか？ と思うかもしれない。
絶望しているあなたに ここで代表的かつ日本的な昔からある勉強法をとりあえず１つだけ紹介しよう。それが なし崩し という方法だ。
調子のいい日も 調子の悪い日も とりあえず勉強の続きを １つだけ進めるだけでいい。そうすれば必ず勉強の残りが１つは減る。
貯めておいて後でまとめてやろう、というのは なし崩し ではない。
１つってどれぐらいかは決まりはない。１問かもしれないし、１ページかもしれないし、１章かもしれない。決まりはない
日本語に翻訳しよう
👆 Web ブラウザーの Google Chrome を使っていると、Web ページの何もないところで右クリックすれば［日本語に翻訳］という項目があるかもしれない。クリックしてほしい
👆 すると日本語に翻訳される。変な日本語に翻訳されることもある。
👆 もう少しマシな翻訳にしてほしい箇所があれば、２０２４年現在であれば、 DeepL を使うとよい。昔からあるWebサイトだが今のところまだイケてる
👆 W3schools を使う上で重要なのが、日本語なら［自分で試してみる］ボタン、英語なら［Try it yourself］ボタンだ。クリックしてほしい
👆 すると なんか テキストボックスが ２つに分割されたみたいな画面が出てくる
👆 プログラマーをやっていると これから先 いろんなところで なんか こういう感じの画面を何度も見ることになる。特に定まった名前は無いが、こういう画面を見ると ソースコード を編集して ボタン を押せば、 プレビュー 画面が変わるのかな、ぐらいに思う。こういうのは慣れてくると分かる
👆 ソースコードの `This is a Heading` と書かれているところを `ここは大きな見出し（＾ｑ＾）` と書き替えて、 `Run` ボタンを押してほしい。プレビュー画面が変わると思う
このトライイット・エディターを使うと HTML を書く練習ができる
今はまだ HTML の書き方を何も覚えていないだろうから まだ大したことはできないだろうが、覚えていけば できることが少しは増えていく。
HTML を完璧に覚えたところで、それだけでは今どきの Web サイトは作れないとは思うが、何でもいいからレッスンを１つ修了するというのは自信が身に付く。 HTML でもいいからまずは何かレッスンを１つ修了して自信を付けるのは良いことだと思う。そして重要なのは、 HTML を覚えたら、それを念入りに覚えようとするのではなく、さっさとサクッと次の技術に進むことだ。何でかというと、一部分だけを見るのではなく、全体を見ることが重要だからだ。 HTML は Web サービスの一部分。 Web サービス１つ分の全体を覚えることが重要。他のことがまだまだある
（書きかけ）
この記事が気に入ったらサポートをしてみませんか？