HTMLやCSSなんて1週間もあれば覚えられるだろ

いや、今までに何度もこの言葉を私は発してきた。だがこの言葉には決まって「それは出来る人だから言う言葉」と言う反発を受ける。

だがしかし、私は今までにWebプログラマ向けの講座や、大学の情報処理授業、専門学校でWebデザイナ向け授業等様々な場所で講座、授業を行なってきた。それらを対象にすると「最低限の知識がある人々相手だから当然」と言う言葉が返ってくるのだが、私は職業訓練でもWebプログラミングを教えたことがある。職業訓練の受講者はコンピュータに慣れ親しんでいない人も参加する。

だがそのような人たちにも私は1週間程度でHTMLとCSSを教えてきた。大体どれほど遅い人でも1週間もあればこの2つは理解でき、数人の理解できない人たちは「知った振り」をするような中途半端な知識の人や、「お金を貰うために職業訓練に参加」しているそもそもに覚える気のない人達だ。

先に言っておくが、知ったかぶりほど厄介なものはない。「知っている」つもりになることこそが、自分の学びの邪魔をすることは肝に銘じておいてほしい。

スラスラわかるHTML&CSSのきほん

まず先に言っておくが、私の言っている「HTMLとCSSが覚えられる」とは構文であり、全てのタグやプロパティ、オプション、セレクタについて暗記するというものではない。あんな物暗記する必要はないと私は授業の中で説明しているし、私自身も10年以上HTMLを書いているにも関わらず覚えていない。そもそもに、10年以上の間使ったことのないタグも多種多様にある。

HTMLやCSSの構文など、本来であれば1日で覚えることが出来る。それほど簡単なルールだ。だがしかし、それまでに「マークアップ言語」というものを経験したことのない人々にはそれらの理解が必要なため早くても3日ほどはかかってしまう(ことが多い)。一つのマークアップ言語を覚えるとその後はXMLだろうとYAMLだろうと1日で理解できるようになるのはその為だ。

まず、あなたがHTMLやCSSの学習に一週間以上を費やしているとすればそれはあなたの学習法が悪い。以前にも書いたかと思うが、「勉強が苦手」と言う人や「勉強ができない」と言う人は、「頭が悪い」のではなく、「勉強法が悪い」ということが大半になる。どれだけ自分で努力し成績を上げたつもりでも、的確な指導があればさらに成績を上げることが出来るのと同じだ。いくら自分が頑張ったとしても、その方法が誤った方向であれば無駄な努力だ。その方向を正すために師に仰ぐのだ。

HTMLとCSSが覚えられない人はその方向が間違っているにほかならない。

今までの知識は捨てろ

まず何事も勉強する際に最も重要なのがこれになる。私が行う講座でもまずこれを説明する。

どのような似たモノでも、それは違うモノである以上同じではないのだ。当たり前のように聞こえるかも知れないが、これに気づいていない人が大勢いる。

プログラミングの出来る人は言語間の差異を考えてもらえばいいだろう。例えばRubyとPythonだ。私はPythonユーザなのでRubyユーザによく絡まれる。「Rubyの○○と言う機能がPythonにはない」、「Ruby on Railsでは○○ができるのに、Djangoにはその機能がない」。これらほどアホな話はない。それぞれ違う環境の上で違う思想のもと、別の目的のために作られた道具である。さすれば必然と機能ややり方が異なる。これは当然でもあるし、必然でもある。これを理解していない人がどのようにプログラミングを行なっているのか疑問に思えるほどになる。
「Rubyの○○と言う機能はPythonにはないのか」と言う質問もおかしなことはすぐにわかるであろう。Rubyの○○という機能など知ったことではないし、その機能と同等の機能がPythonにあったとしてもそれは違う目的に用意されているかも知れない。だからこの場合は「○○という処理をしたいのだが、どうすれば実現できるか」と言う質問になる。

例えば扇風機に例えても同じだ。ダイソンの羽のない扇風機「エアマルチプライアー」と一般的な羽のある扇風機を比べても仕方がないのと同じだ。それぞれに目的や使途、考え方が異なるので比べ用がない。エアマルチプライアーは静音性を考えて作られたものだが、一般的な扇風機は送風を目的に作られている。ホテルの寝室にエアマルチプライアーは受け入れられるが、銭湯の脱衣所には受け入れられない。

これらと同じように、HTMLやCSSとそれ以外は全く異なるものなのだ。私が講座を行なっている中にも、橋梁の荷重試験をやっていた人やVBAをかじったことのある人、他のHTML講座に参加してちょっとした知識をつけている人など色々な人が参加し、それらの人々が「今までにやっていた○○ではこうやっていた」とHTMLやCSSをすんなりと受け入れようとしない。

抵抗しようとするからこそ身につくのが遠のいてしまう。先にも書いたように、それらは全て違うものだ。それを理解し、今までの知識は全て捨て、新たな知識として受け入れようとしなければならない。

多くの人がHTMLの後にCSSを勉強すると「width=""」のようにプロパティを書いてしまったり、「width: "200"」と書いてしまうが、HTMLとCSSも別物だ。新しい知識としてHTMLを忘れてCSSを学ばなければならない。

ルールに抗おうとせず、ルールのみに従おうと思え

先の項目と似ているが、HTMLにはHTMLルールがあり、CSSにはCSSのルールがある。その他とは違うことを理解し、それぞれをそれとして受け入れる必要がある。

HTMLやCSSには明らかに不自然と思える点が多々ある。だがそれは不自然であろうとなかろうと全てルールなのだ。不自然なものでもルールとして決まっていればそれが絶対なのだ。それに抗っても仕方がない。それを受け入れ、それを利用するしか無い。

タグやプロパティを暗記しようとは思うな

これを勘違いしている人は多い。他のHTML講座を受講した人の中には「タグを全て覚えろ」と言われた人までいるという。否、これは明らかな誤りだ。講師が10人いれば十人十色様々な考えがあるはずだがこの講師の考え方は理解ができない。

タグやプロパティを暗記してどうするのか？上にも書いたように、10年以上やっていても使わないような特殊なタグがある。そして、リファレンスを開けば掲載されている内容を暗記する理由も見つからない。タグやオプション、プロパティ、値は合計で数百もある、それらを覚えることに性を出すより、そのタグはどういったときに使えるかを考えることが重要だ。

私はいつもこう説明している。

HTMLやCSSのタグやプロパティなんて覚えても仕方がない。分からなければリファレンスを開けば載っているし、暗記しようと努力している時間があれば何度もリファレンスを開くことが出来る。何度も使っているタグやプロパティは覚えようとしなくても勝手に覚えていく。そうやって日常的に使うタグは1ヶ月もすれば身についている。
だが、覚えていないタグを使わないわけではない。だからこそ最低でも一度はリファレンスに目を通しておかなければならない。例えば「○○したい」と思った時に、リファレンスの全てに一度でも目を通しておけば「○○ってことができるプロパティがあったよな」と思い出すことが出来、そうすればリファレンスから索引などを使いプロパティを見つけることが出来る。
だが、リファレンスに目を通して置かなければ「○○ってできるかな」と思った時に、リファレンス全てに目を通して探す必要が出てくる。あるはずの機能を探すのと、あるかどうかから探すのでは全く確認時間が異なる。

だから一度リファレンスに目を通し、半年後や一年後にもう一度リファレンスに目を通し直し、忘れていた機能などが無いかを思い出すことが必要になる。暗記ではなくこの程度で十分だ。これを「機能の暗記ではないか」というかもしれないが全く異なる。一度聞いた音楽は空の状態で自分で再現出来なくても、もう一度聞けば「聞いたことがある」と思い出せるのと同じような理屈だ。

小学生の頃に聞いた音楽すべてを思い出せなくても、「この歌流行ってたよね」と大滝詠一の「幸せの結末」を流されれば思い出すはずだ。

トライアンドエラーはやめろ

多くの人間がやる方法としてこのトライアンドエラーがある。これには賛否両論分かれるとは思うが、少なくとも私はHTMLやCSSでトライアンドエラーは厳禁だと感じている。

他のプログラミング言語では間違った方法であればエラーや警告でその旨を表示してくれるが、HTMLやCSSでは基本的にそれはない。ブラウザにレンダリングされた内容を見て、それが私のやりたかったことかどうかを判断するしか無い。そうなると、望んだ結果になるまでタグやプロパティをとっ替えひっ変え書きなおすことになるが、この方法を行なっていると身につくことはなく、次にも同じミスを犯してしまうことになる。

どんなタグやプロパティでも、一度使う前にそれが本当にそれでいいのか考え、それでいいと自信を持った上で入力し表示を確認する。それが異なった表示であれば「○○で望んだ結果にはならなかった」と記憶に残り、経験として覚えているはずである。そして次に書き換える時に同じように考え、その書き方が正しければそれも同じように経験として残る。

だが望む結果になるまで何度も書き換えているのであれば、どれがダメだったか、どれで成功したかの印象が低く、記憶や経験に残らず、何度も何度も同じ失敗を繰り返すことになってしまう。そして一向に身につかないまま月日が流れていくのである。

一度経験として刻まれたものは忘れがたい知識となり、新しいことに挑戦する際にもその知識から「○○でうまくいかないことがあったからこの方法でいいのではないか」と当たりを付けて挑むことも出来るようになる。だがこれは決して「考えに考え、間違えてはいけない」ということではない。誤った方法を行うことで「それではダメなことを知る」ことが出来るのだ。人間は経験からしか学ぶことができず、それが失敗であったとしても経験され、知識として身につくのだ。

トライアンドエラーはこの「失敗経験」も次々と流れ作業のように行うため、「失敗」としての経験はつかないのだ。

入門書を鵜呑みにするな

どのような書籍でも、入門書というものは「入門」の為に作られたものであり、その内容は正しいものではないことが多い。その「正しくない説明」を鵜呑みにすると、次に正しい知識が来た際にその矛盾から混乱してしまうことになる。だからこそ最初に勉強する際には「ふーーん」と言う程度で覚えておく覚悟が必要だ。

そして正しい知識が来た際にそれを固定化しておく必要がある。

私がいつも出す例として、入門書(HTML4)の多くには「ブロック要素の中にはブロック要素とインライン要素を、インライン要素の中にはインライン要素を記述することが出来る」と書かれていることが多いが、例えば「P」タグの中にはいかなるブロック要素も記述することはできない。これは先の説明とは異なる内容だ。そして先にも書いた不自然なルールになるかも知れない。

だがこれは段落の中には文章以外に入れることができないという当然なルールがあるからであり、これに抗うことは出来ずこれに従うしか無い。「ブロック要素の中にはブロック要素を書くことが出来る」と思い込んでしまっていてはこのルールを知った際に混乱してしまう。だからこそ「入門書」は「入門」のそのレベルとして理解する程度に置いて置かなければならない。

HTMLやCSS以外にもプログラミングや各種資格勉強など、このように様々な間違った学習法により知識としてつけることに失敗している人が多いかと思う。もし新しい勉強をしている中でどうしても頭に入らず「私は頭が悪いのではないか」と感じることがあれば、決して諦めることはせず、その道の師を探し、自分の誤った学習法を指摘してもらってほしい。

スラスラわかるHTML&CSSのきほん

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

よくわかるHTML5+CSS3の教科書