🍔ハンバーガーメニューの作り方講座。簡単なCSS実装を紹介。jQueryより高速です【ヤフー出身エンジニアの初心者向けプログラミング講座】

前回の動画がまだの方はこちらから↓
   • 【HTML/CSSレイアウト】よく使われるサイドバーデザインを一緒にコーデ...  

コーディングに便利なChrome拡張機能を作りました
   • 【HTML/CSSレイアウト番外編】コーディングに便利なChrome拡張機...  

🐙 GitHub（使用したコード）
https://github.com/lightsound/html-cs...

📙 もくじ
0:00 ハンバーガーメニューとは？
1:16 前回からのコードの変化について
3:19 index.htmlの解説
4:27 openとcloseのクラスについて
4:59 inputのid属性とlabelのfor属性の関係を解説
7:01 ハンバーガーメニューの実装開始
8:20 position: absoluteの絶対位置指定を解説
11:51 ハンバーガーメニューの実装再開①
18:06 transitionプロパティの解説
19:15 backgroundプロパティの解説
21:00 ハンバーガーメニューの実装再開②
22:01 checked擬似クラスについて解説
22:40 間接セレクタについて解説
24:39 ハンバーガーメニューの実装再開③
28:12 checkboxにチェックが入っているか確認
29:54 まとめ＆次回予告

🚀 今日のひとこと
今日はハンバーガーメニューの作り方です。
サイドバーをレスポンシブ対応するときに
よく使われるデザイン手法になります。
CSSでの実装方法が簡単かつ高速で、
JavaScript (jQuery) よりオススメしています。
（ReactやVue.jsを使わない場合の話）
ぜひマスターしてくださいね🍔

🔥この動画だけは見よ！
【HTML/CSSレイアウト】聖杯レイアウトのコーディング実践、デザイン解説
   • 【HTML/CSSレイアウト】聖杯レイアウトのコーディング実践、デザイン解...  

👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

🌏 SNS
Twitter:   / shimabu_it  
Instagram:   / shimabu_it  

🏷️ タグ
#ハンバーガーメニュー #ドロワーメニュー #ナビゲーションドロワー