「困った！HTML初心者にどうやって教えたらいいの？」HTMLとCSSの効率的な教え方
僕は専門学校の非常勤講師を何年かやっていまして、毎年1年生にHTMLの基礎から教えています。毎年試行錯誤しつつやっているのですが、最近になってようやくHTML初心者に教える際に「こうやるのが良いんじゃないか」というのがある程度確立してきたので書いてみようと思います。
尚、このやり方は教える側だけでなく「HTMLをやってみようかな」という初心者の方にもオススメです。ここに書いてある順番で学習していけば効率良く学んでいけると思います。
HTML初心者を対象とした効率良い教え方の順序
順序としては、やはりHTMLが先でCSSが後になります。HTMLが土台部分ですので、この土台がしっかりしていないとCSSの学習効率も悪くなります。まずはHTMLの基本をしっかり理解するところから始めましょう。
HTML編
学ぶ順番としては次のような項目でやっていきます。
- HTMLの基本ルールを覚える
- 最低限必要なタグを覚える
- セクショニング・コンテンツとアウトラインを説明する
- マークアップの練習を行う
- 順次その他の要素を学んでいく
CSS編
- CSSの基本書式を覚える(id,classもこの時に)
- 良く使われるプロパティを覚える(margin, padding, color)
- floatの基本を覚える
- floatを使ったレイアウト手法を覚える
- positionプロパティの使い方を覚える
- その他のプロパティやCSS3のプロパティを学ぶ
今から学ぶor教えるならHTML5から
今から学び始めるなら、HTML5からがオススメです。HTML5の基本的な部分はHTML4.01やXHTML1.0と共通なので、どうせなら最新の仕様から覚えてしまったほうが効率的です。
初心者の人でつまづきがちなのが、相対パスの仕組みやその概念です。PCを普段から使っている人でも案外「ディレクトリ階層(構造)」というのは意識していなかったりするので、その部分は特に丁寧にやります。
1.HTMLの学習の順序詳細
いきなり最初からメモ帳などのテキストエディタでタグを書かせます。小難しく説明するよりは、実践が一番だと思うので最初からタグを手打ちで書かせます。Dreamweaverなどの便利なツールを最初から使ってしまうと、タグを書かなくても出来てしまうので、最初のうちは「体で覚えさせる」という意味でも手打ちでタグを書かせるのが良いと思います。
1-1.HTMLの骨格部分と基本的なルールを教える
最初はHTMLの基本ルール(開始タグと閉じタグなど)を説明し、html, head, bodyなどの骨格部分を書かせます。DTDの説明もこの時点で行います。HTML5は短いので説明が楽ですねｗ。HTMLの説明に関してはごく簡単なHTMLの説明が非常にわかりやすくまとまっているので、必ず初回授業の時に紹介しています。
1-2.最低限必要なタグを教える
HTMLのタグは非常に沢山ありますが、最初からその全部を覚えるのはなかなか大変です。しかしよく使うタグは限られているので、まずは良く使われるタグだけを覚えてしまいましょう。この部分も敢えて絞って教えます。具体的には下記のようなタグです。
大見出し
テキストテキスト
- リスト
- リスト
- リスト1
- リスト2
1-3.セクショニング・コンテンツとアウトラインを説明する
HTML5の肝である、セクショニング・コンテンツに属する4つのタグ(section,article,nav,aside)と、アウトラインについて説明をします。アウトラインは説明だけだとなかなか理解しづらいので、PowerPointなどのアウトライン機能があるアプリケーションで文章のアウトラインを実際に作成させたりしてもよいでしょう。
1-4.文章→マークアップを練習させ、確認テスト
短めのプレーンテキストをHTMLでマークアップさせる練習を行います。この時点ではアウトラインが正しく出来ていない事が多いですが、あまり細かい事は指摘しません。何故ならば、この時点では「作るのが楽しい」ということを感じてもらいたいからです。
この時点で一通り基本部分の学習が終わるので、確認の意味も込めて実技テストを行います。プレーンテキストを配布して、その文章をHTMLでマークアップするという実技テストです。この時点でHTMLの基本と、アウトライン、相対パスなどの理解度を確認して、成績の良くない人へのフォローを行います。
1-5.必要に応じてその他のタグやXHTMLの説明を
必要に応じてその他のタグの使い方や説明を行います。これも全てのタグは説明しません。使用頻度の低い要素は使う機会もあまり無いので、さらっと触れる程度にします。HTML5とXHTML1.0やHTML4.01の差異などの説明もこの時に行います。既にHTMLを一通り学習し終えたので、最初に説明するよりもHTML4やXHTML1.0の違いが理解しやすいようです
2.CSSの学習の順序詳細
CSSも最初のうちはテキストエディタで手打ちさせていますが、途中からDreamweaverを使ってもOKにしています。
2-1.CSSの基本
CSSの基本書式とid, classの説明をします。セレクタも基本的なものだけに絞って教えます。(子孫セレクタあたりが使いこなせれば最初のうちは十分なので)
2-2.良く使われるプロパティを教える
頻繁に使われるプロパティを中心に教えていきます。HTML編で自分で作ったhtmlがあれば、それにスタイルを適用していくようにします。margin,padding,colorやフォント関連などを最初に扱います。
2-3.floatの基本
floatの基本を教える前に、ボックスモデルやマージンの相殺などの仕組みを教えます。floatは最初は一番単純なものをやります。何回か練習させて、float基本とそのの挙動を覚えさせます。
2-4.floatを使ったレイアウト
floatを使った2カラムレイアウトをやります。組み方が何パターンかあるので、それを1つ１つ丁寧に解説し実践させます。2カラムが一通りできるようになったら、3カラムのレイアウトやもっと複雑なものをやっていきます。clearfixやoverflowの使い方もこの時点で教えます。
2-5.positionプロパティを使ったレイアウト
floatによるレイアウトがあらかた出来るようになったら、positionプロパティを教えます。positionプロパティを使ったレイアウトを説明し、floatとpositionが両方適切に使えるように練習をします。
2-6.CSS3やその他のプロパティ
これまで扱わなかったその他のプロパティや、CSS3を使った表現手法などを説明します。必要に応じてCSS3のボックスレイアウトなど新しいレイアウト手法などを教えても良いと思います。
最後に
僕の授業では半年かけて(実質的には最初の3ヶ月で上記の全てをこなし、残りはサイト制作の実践的な練習を行います)このカリキュラムをやる訳なので、実際の会社の研修などではもう少しコンパクトにした方が良いかもしれません。会社の研修や学校などでHTMLやCSSを教える側になってしまった(?)方の参考になれば幸いです。
フロントエンドエンジニア5年目のkoyurugiです。
HTML5がオススメとのことですが、今のWebの現状を鑑みるにその選択は無いと思うのですが。
もちろん、HTMLを囓る程度で良いのならそれで十分かもしれませんが…。
現状として、
・国内のブラウザシェアはHTML5に未対応のIEが圧倒的に占めている。
・システム組み込み系のパーサーがHTML5の曖昧なタグの閉じ方ではなく、厳密な閉じ方を要求することが多い。
・セクショニングやアウトラインを重視するよりも、デザイン上のレイアウト表現の方があらゆる面において重要度が高い。
自分にはこれだけでも最初に教えるHTMLとしてHTML5は不適格です。
HTML5のサイトが増えてきたと言っても、IE等のレガシーブラウザのために数年は互換性を保つ必要があるでしょう。
国内の大半はまだIEが主流で、もうすぐサポート切れと言っても Windows XP が多く残っているので、
IE8がしばらく続く事実はそう簡単に覆らないと思います。
パーサーについては学生のうちや静的なHTMLでは縁が無いかもしれませんが、
タグの閉じ忘れ等は厳密なXHTMLの方がチェックツールにも引っかかりやすいので正確なHTMLを書く練習にも向いています。
セクショニングは文章に意味を持たせるという意味では必要ですが、
それを重要視しすぎるが故に自由な表現ができなくなっている初心者の方が多く見受けられます。
マークアップの楽しさは慣れてくると楷書体のような形式美に見いだしてきますが、
最初の頃は草書体のような方に縛られない自由なデザインを表現できることが楽しいと思います。
そして作業工程的に見て、文章構造ありきではなくデザインありきのマークアップなので、
また、SEOに効果があるような説明がたまに見ますが、多くの人が現時点では効果が無いもしくは無いに近いレベルという現実もあります。
長くなりましたが、以上です。
コーダーです。
上記コメントのフロントエンドエンジニアーさんは正しい文章構造で自由なデザインが出来ないのでしょうか？
現場に出るにはHTMl5よりかはガチガチのものを知っている方が良い気がしますが、文章構造を正しく教えた後にポジションを教えるという流れは綺麗だと思います。
正しい文章構造を理解し、その上で自由なデザインを書ける様になり、上のコメントの方の様なフロントエンドエンジニアさを輩出しなくて済むと思います。
コーダーはデザイナーとは違います。
あくまで文章構造にこだわり、どんなデザインにも対応出来るべきです。
現場ではどう、ではなく、まず最初にhtmlを”学ぶ”ということにおいては、各UAがどうレンダリングするかは学習する順番としては後まわしでよいと思いますが、いかがでしょう。
これから始める人にどこから教えるかという問題はなかなか難しいですよね。
半年コースとい比較的長いスパンの講座であればHTML5から入るという選択肢もありかもしれません。あくまでXHTML+CSS2.1での制約についてもきちんと教える前提であれば。
難易度の順番で言えばXHTML→HTML5の方が理解しやすい気がしますが、現時点で言えば結局どちらも必要になるので、両方扱えるように解説できるのであればどっちから先にやってもいいと思います。
HTML→CSSという順番で理解してもらうのは至極もっともな流れだと思います。正しく美しい文書構造のHTMLは、CSSでのスタイリングもそうでないものに比較してはるかにコントロールしやすいと思いますし。
ただ、そのためにはコンテンツ作成やデザインの時点である程度情報がきちんと整理されていないと正直非常にやりづらいのも事実。
上記フロントエンドエンジニアさんは、デザイン段階で情報がごった煮になったようなタイプのページのマークアップばかりされてきたのかな？
html5からで問題無いと思います。
文章のアウトラインを先に覚えさせないと旧時代のダメな記述だけ覚えて満足してもらっても困ると思います。
それにxpでie8まで対応ならjavascriptで対応させれば良いのでは？
閉じタグぐらいならチェックツール使うなり、入力補助のあるエディタなりで問題無いですし、なによりhtml5で推奨されないタグを使わないためにも触れておかないとダメでしょう。
そんな事よりはるかに重要なjavascriptとcssの記述位置や、cssスプライトやら、キャッシュの処理やら覚えさせた方が・・・
それと管理が難しいのでDB使って出力するような、wordpress的な物を使う事も覚えないと無駄な作業が増えるだけなんで実践では役立たず、存在だけでも教えとかないと・・・
後はインライン要素の改行で/**/で改行文字囲うとか、
floatとpositionは横幅が足りない時に改行するとか、一つ上の要素にもposition付けないと思ったように配置できないとか代表的な間違い例教える感じが良いかな、出来ればCSSグリット方式も覚えさせると良いが。
フラッシュはadobe製品でやった方が良いから後回しかな。
宣伝ぽく思われると嫌なのですが、弊社の講座では2年以上前からHTML5で基礎から教えています。
その当時でも１番目のコメントのような方がいらっしゃったので、IE対策についてもご紹介しています。
日本ではコンセプトなどを理解せずにテクニカル内容を重視していたり、どのブラウザでも全く同じ
見栄えであることが重宝されていると勘違いをされている方がいるようですが、そんな考えでいると
この業界に残っていることは不可能です。まぁ、年収200万円でもプロのコーダーだと言っていたら生き残っているのかもですが。
現状のどこのサイトを作られているのか分からないですが、「IEが圧倒的に占めている。」というのは数字だけを追って見方を間違えているとも言えます。
このような考えではととんでもないことになります。
逆にお伺いしたいのですが、どの時点からだとHTML5というのでしょうか？また、それは何年なのでしょうか？
そして、自分は必要ないと判断してHTML5を勉強していないでしょうか？
Webも10年以上がたち、昔のまま止まっている人をカットしてほしいとの企業の依頼が最近多いのですが、
まさにこのあたりの人を上司はカットしたいと思っているのかも知れません。
一流の会社の社長は既にHTML5のことも今後のことも知っています。自分が会社の足でまといにならないためにも心を入れ替えて勉強されることをおすすめします。
IEを自分が勉強しない理由にしないでほしいです。