スマホ向けのサイトでよく見かけるハンバーガーメニュー。
WordPressなら、多くのテーマ（テンプレート）がレスポンシブに対応しているので、
普通にメニューを登録するだけで自動的にハンバーガーメニューがついてくるでしょう。
しかし、LP制作や既存サイトのスマホ対応などを仕事として請け負った場合は、
必ずしも簡単にハンバーガーメニューが実装できるとは限りません。
今日のレッスンでは、CMSを使わない純粋なHTMLサイトをレスポンシブ対応させるためにハンバーガーメニューが必要になった生徒さんに、プラグインを使わず自分で１から実装するレッスンを行いました。
ハンバーガーメニューはHTMLでどう実装するのか？
まず、メニューを開くトリガーとなるハンバーガー部分のHTMLですが、３本線をどうやって表示させるかによってコーディングの方法が変わります。
一番簡単なのは、FontAwesomeなどのウェブフォントのHTMLタグを使う方法です。
あらかじめ３本線がついた図形が１つの文字として表示されるので、CSSで線に色をつけたりサイズを変更することが可能です。
もう１つは、spanなどのタグを２つあるいは３つ使って、CSSでその１つ１つを横長のバーのように表示させ、それを縦に並べることでハンバーガーアイコンのように見せかける方法です。
後者の方法は面倒ではありますが、メニューが開いているときは３本線、メニューが閉じているときは×マークのように、１つ１つの線のCSSを変更することによって図形を変化させやすいことがメリットです。
デザインの要件に応じて、HTMLの組み方を使い分ける（考える）ことが大切です。
ハンバーガーメニューの動作はどうやって実装するのか？
HTMLとCSSだけではハンバーガーメニューを閉じたり開いたりする「動作」は実装できません。
スマホ用のメニューに限りませんが、HTMLタグで表示された特定の部分を表示させたり隠したりするためには、
CSSで「表示されているときのスタイル」と「隠れているときのスタイル」の両方をclassで定義しておき、
HTMLタグにそのclassを付けるか付けないかで見た目を変化させる必要があります。
そして、ボタンやリンクなどをクリックしたことをきっかけに、HTMLタグから特定のclassを付けたり外したりできるのはJavaScriptだけです。
ですから、必ずJavaScriptが必要なのです。
JavaScriptには「イベント」という仕組みがあり、ブラウザの画面をスクロールさせたりウィンドウサイズを変更したり、ボタンやリンクをクリックしたり、何らかの出来事（＝イベント）が発生したことを、ブラウザから通知してもらうことができます。
この仕組みを利用して、ハンバーガー部分がクリックされたときにメニューを表示させることができます。
JavaScriptが学べるオススメの方法は？
よく、勉強熱心な生徒さんから尋ねられる質問なのですが、仕事に役立つ本質的な技術と知識を身に着けるためには、実践あるのみです。
コピペするだけで使えるコードはありますが、コピペしただけでは応用力は決して身に付きません。
大事なのは、ネットに載っているたくさんのサンプルコードの中から、「これをこうするからこうなるんだ」という本質に気付くことです。
例えば、widthを指定したブロック要素に margin: 0 auto; を指定すれば左右中央に配置できるテクニックは有名ですが、
なぜそうなるのかを理解しているかどうかで、仕事に使える応用力が身に付くかどうかが分かれます。
CODEMYのレッスンはどのように行われるのか？
CODEMYでは、必要に応じてスカイプだけでなくZOOMを使って遠隔操作をしながらレッスンを行います。
講師と生徒さんが同じデスクトップ画面を一緒に見ながら遠隔操作でコーディングの実演と解説を行うので、ネットのサンプルコードを見ても自分のサイトにどのように組み込めばよいのかが分からなくて困っている生徒さんに好評です。
考え方の筋道を教わることができるので、「着眼点」が分かるようになり、仕事で使える実力が養われるからです。
・HTMLやCSSの基本は知っているつもりだけど実践ではまだまだ通用しないと感じている。
・本で一生懸命独学したけれど、何が正しいコーディング方法なのかが分からない。
という方は、初回３０分の無料レッスンをご検討ください。