INFO:

前回の動画がまだの方はこちらから↓ https://youtu.be/UUPSC8ooDOk コーディングに便利なChrome拡張機能を作りました https://youtu.be/CXrW5rqP-WY 🐙 GitHub（使用したコード） https://github.com/lightsound/html-css-class/tree/master/004_Sidebar-responsive 📙 もくじ 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レイアウト】聖杯レイアウトのコーディング実践、デザイン解説 https://youtu.be/XrFD_0Pr6Nc 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました！ 現在は起業家として新規サービスを開発中です！ 下記に興味がある方はチャンネル登録をおねがいします！ ・IT業界、Web系、プログラミング講座 ・リモートワーク、在宅勤務、副業 ・スタートアップ、ベンチャー、経営者、社長 🌏 SNS Twitter: https://twitter.com/shimabu_it Instagram: https://www.instagram.com/shimabu_it 🏷️ タグ #ハンバーガーメニュー #ドロワーメニュー #ナビゲーションドロワー