【HTMLオンラインレッスン後記】
曖昧な知識をブレンドすると明確になる
私のオンラインレッスンでHTMLを学び始めたばかりの生徒さんが、
最初の難関でもある「float」に突き当たりました。
floatと言えば、画像の隣にテキストを回り込ませたり、
liタグで書いたメニューを横並びにしたり、
普通に書くと縦に並んでしまうもの同士を横に並べたいときに
使います。
しかし、floatにはブラウザの不具合とも言える不思議な特徴や、
横並びが修了した時点で必ずfloatを解除しなければならない
という注意点があり、初学者は理解に苦しむところです。
ここをどう教えるか、教える側にとっても難しい場面ですが、
私は敢えて曖昧な知識をブレンドすることで理解を促しました。
同じことを２通りの方法で実践する
生徒さんには架空のホームページをHTMLで作り上げる指導を
しているのですが、メニューを横に並べる場面では「float:left」、
コンテンツエリアとサイドバーを横に並べる場面では「display:inline-block」
というように、同じことをするのに２通りの方法を行いました。
最初から２ヶ所とも「float」を使ったほうが、
同じことを繰り返す体験ができるので理解しやすいかと思ったのですが、
あえて別の方法を選んだのには理由があります。
２つの方法の違いを体感させる
その理由とは、同じ目的を果たすために異なる２つの方法（手段）がある
ということを体験してもらうことにあります。
１通りの方法だけを使い続けると、確かに覚えることが少なくて済むので
使いこなせるようになるまでの時間は短いかも知れません。
ですが、Webの世界は常に進化し続けています。
昔は「横並びといえばfloat」と決まっていましたが、
スタイルシート（CSS）の進化によって別の方法が主流になっていくことは
間違いないと思います。
特に、ボックスの並び替えに関しては様々なブラウザが「display」の
各属性をサポートするようになると思われます。
つまり、同じ目的を果たすために使える手段がどんどん増えていくのです。
そうなると、いろんな手段を体験してきた人が有利になります。
いろんな手段を体験してきた人は複数の手段の違いを知っているので、
目的に応じた手段を自分で選びだすことができるからです。
１つの手段しか知らない人は、選択の余地がありませんから、
場合によってはとても非効率なやり方をとることになるでしょう。
納得は知識を定着させる凝固剤
今回、floatとdisplayの違いとして次のような事実を体験していただきました。
- floatは解除しなければレイアウトが崩れる
- floatした要素を囲むボックスは高さの概念が失われてしまう
- display:inline-blockで並べると縦が揃わない
どちらも一長一短だということを体感を通して納得してもらったのです。
その上で、
「慣れるまではfloatを使っていきましょう」
ということにしました。
こんな方におすすめのマンツーマンレッスンを行っています
- ホームページの制作経験はあるけれどWordpressやレスポンシブサイトになると分からない方
- HTMLはある程度分っているつもりだけれど仕事で行き詰ってしまうことがある方
- Dreamweaverなどのホームページ制作ソフトに頼ってきたため何も見ずにHTMLを手書きできない方
無料相談だけでも受けてみたい方へ
HTMLやCSSの基礎、ホームページの制作やカスタマイズでお困りの方はお気軽にご相談ください。
↑ページの中ほどにあるオレンジ色の「先生に聞いてみる」というボタンを押すと、メッセージが入力できますので、お気軽にご相談ください。
ご相談のメッセージをいただきましたら２４時間以内にお返事を差し上げます。より詳しい状況をお聞かせいただける方には１時間ほどですがスカイプで無料相談を承りますので、ご遠慮なくお尋ねください。
