🍔ハンバーガーメニューの作り方講座。簡単なCSS実装を紹介。jQueryより高速です【ヤフー出身エンジニアの初心者向けプログラミング講座】
Vložit
- čas přidán 7. 07. 2024
- 前回の動画がまだの方はこちらから↓
• 【HTML/CSSレイアウト】よく使われるサ...
コーディングに便利なChrome拡張機能を作りました
• 【HTML/CSSレイアウト番外編】コーディ...
🐙 GitHub（使用したコード）
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
🏷️ タグ
#ハンバーガーメニュー #ドロワーメニュー #ナビゲーションドロワー - Jak na to + styl
🍔ハンバーガーメニューのCSSでの作り方講座です。
ポイントは👇になります！
① inputのidとlabelのforの関係の理解
② position: absoluteで画面外に隠しておく
③ checkboxがオンのときに画面内に持ってくる
ちょっと難しいですが実際に書いてみると理解が深まるかと思います。
コードもGitHubで見れるようにしていますのでぜひ模写してくださいね！
github.com/lightsound/html-css-class/tree/master/004_Sidebar-responsive
すごく分かりやすいです。
セレクタや擬似要素、細かい部分の解説まであり勉強になりました。助かります。
ありがとうございました😊
これまで初心者にとっては、「Progate」と「ドットインストール」が無料で分かりやすい教材でしたが、しまぶーさんの動画もそれに匹敵するくらい素晴らしいです！ありがとうございます！
初心者なのでコードの良し悪しの判断はできない状態ながらも、こちらはすごい洗練された感があり感動です。JSなしでこんなことができるとは。。。他の動画でも感動しながら見させてもらっています。他の方のコメントにもありましたが、私も（このシリーズのGridの動画などと共に）モチベーションUPしました。ありがとうございます！
めちゃくちゃわかりやすかったです！ 今まで実装できなかった機能の裏側がわかると、とても楽しくて、モチベーションUpです！
cssだけでハンバーガーメニューが作れるのは知らなかったです！動画見て思わずおお〜っとなりました。間接セレクタも初めて知りました。勉強になります。
いつも楽しく拝見しています！ハンバーガーメニュー制作に苦戦をしていたので、勉強になりました！！
次回も楽しみしています！
ちょうどモバイルファーストのWebサイトへのリニューアル作業中で、ハンバーガーメニューを検討していたところだったのでとても参考になりました。
昨年よりhtml、css、javascriptを中心に学習しており、初心者にも分かりやすい解説で大変感謝しております。これからも視聴してスキルアップしたいと思います！
とても分かりやすい動画でした。
ググっても理解できなかったがはっきりしました。
ありがとうございます。
海外の専門学校でJava開発者のコースに通っているものです。コースのカリキュラムにHtmlとCSSも含まれており１か月程学習し、ちょうど今週無事終了しました。課題で実際に3ページで構成された模擬のウェブサイトを作成しました。しかしながら限られた時間でしたのでサイドメニューには、触れなかったので今回の動画の解説は非常に参考になりましたしウェブページ作成について更に興味が湧きました。初めて聞いた話もあったので復習します。また、githubでコードの共有ありがとうございます。参考にさせていただきます。
ずっとこのコードの意味がわからなかったのですが理解できました！
ありがとうございます！
さらっと触れてるcssとjavascript だとcssの方が軽くてぬるぬる動くっていう情報が凄くためになります。
とても分かりやすく勉強になりました！ありがとうございます！
ほんとに分かりやすいです！
ハンバーガーメニュー、あまり理解できずにいたのですごくすっきりしました!
ありがとうございます😸
一つ一つの動きが理解できてわかりやすいですね！
めちゃめちゃ明快で、わかり易かったです！ありがたい〜！
おぉ〜と感動ながら見ていました。CSSでもこういった実装ができるんですね。
Javaなどでないとできない動作だと思ってました。
解説ありでわかりやすかったですが、相当難しかったです。
見聞きしているだけでは定着しないので、実際に自分自身で前回のサイドバー構図でページ作成したものに実装してみます。
いつもありがとうございます。
以前たいして理解できていないままググりつつ🍔メニュー作りました。
今回しまぶーさんの動画を見て なるほど！と思いました。
あと1回くらい作れば頭に残りそうです。復習にも動画活用させていただきます！！
しまぶーさんの動画がきっかけでプログラミングを本格的にはじめ、やっと模写コーティングまで辿り着けました😅
今回も模写コーティングをしていて分からない部分の講座でしたので非常に為になりました。感謝です♪
プログラミング楽しいのでもっと学んでいきます！！
いつもコメントありがとうございます😁
プログラミングが楽しいと感じると伸びが早くなりますよ（経験談）
難しいところに直面したら「よし、学びのチャンス！」と思って
ポジティブに楽しく学んでいきましょう〜！✌
すばらしい。わかりやすいです。
ぼやっと見ててもぐんぐん理解できました。わかりやすい！
ぼやっと見てて理解できるのは私の説明ではなくlove0me7tendonさんの理解力の高さ説が！🤣
解りやすくて助かります。ありがとうございます。
ひとつひとつ解説してくれていて、助かります！
励みになるコメントありがとうございます！（かわいいアイコンですね）
とても参考になりました。ありがとございます。Ｊ－Ｑｕｅｒｙで実走されているスライドショーやギャラリーなども、cssで解説してくれたら、涙をながしてよろこびます。
いつも勉強させてもらってます！
ハンバーガーメニューってこういうアルゴリズムで出来てるんですね！
勉強になりました！！！！
サイドバーってどうやってやってるんだろうって思っていたのでとても勉強になりました！！
CSSでもハンバーガーメニューを実装できるんですね！？
参考になりました、ありがとうございます！
いつも動画みて勉強させてもらってます。
CSSでハンバーガーメニューが作れるなんて驚きでした。ホームページを作ることになったので、動画を参考にCSSで実装してみました。
作り終わったあと動作確認してたら、ハンバーガーメニューのリンクから別ページへ移動したあと1つ戻るで戻るとハンバーガーメニューが開いたままになってしまいましたが要素の属性にを入れたら、更新後にチェックボックスが外れて、戻るで戻ってもメニューが閉じるようになり、無事に思った通りの動作にできました。
初心者ですがしまぶーさんの
動画で楽しく勉強できてます！
今後も動画楽しみにしてます。
応援してます！！
参考になりました。ありがとうございました。
しまぶーのIT大学は、ホントいつ見てもわかりやすいですね。
お忙しい中、いつも有益な動画ありがとうございます！！
実装はもちろん、IT情報も参考にさせていただいてます。
ありがとうございます！
分かりやすさ１番で作っています✌
これからも意識して作っていきますね✨
めちゃくちゃ分かりやすくて家ですげえええって叫んでました
わかり易すぎる ありがとうございあます
体系化されててすごい分かりやすかったです！
css の面白さを初めて理解しました。ありがとうございます！
余談ですが、誰かに教えるときって細かい部分までしっかりと理解してないといけないので難しいですよね。
それが勉強になるので楽しいんですけど☺️
とても難しいですね・・・今までも何度も「簡単に説明しているつもりだったけど初学者からすると難しい」という罠をふんできました。昔に比べるとマシになったと思っていますが、まだまだ改善していけるとも思っているので今後も分かりやすくを心がけていきます✌
前回のサイドバーの具体例がわからなかったのでありがたいです！
ありがとうございます😊
ハンバーガーメニューにハンバーガーの絵文字を使う人初めて見ました（笑）
jQueryなどを使わずにcssのみで実現できるとは思いませんでした。
チェックボックスのこんな使い方があったことが驚きです。
わかりやすい解説有難うございます。ちょっと質問なのですが…input[type="checkbox"]:checked ~aside {} の~aside部分を、例えば「親が一緒ではなく、且つ上にある要素」を指定したい時はどうすればいいでしょうか？
短くするとこんな感じです。
しまぶーさん、いつもながら分かりやすい講座をありがとうございます。
CSSだけで（js使わずに）こんなことができちゃうんですね！浅いところしかまだまだ理解できてませんが、教えていただいている言葉がスムースに理解できるようになっていることが、オレ大したもんやなーと思う今日この頃です(笑)。web制作の実務の中で、うまいこといかなかったり、これなんでやったかなー？？と何度もググる毎日ですが、しまぶーさんの講座がいろんな場面でヒントになっているように感じます。まいど、おおきにありがとうございます！
最後、急に大阪感が強くなって笑いました。私も5年関西に住んでいた（1年間は難波に住んでいました）ので懐かしく感じます笑
言葉がスムースに理解できるようになっていっているのであれば、今後の講座もきっと理解していけるはずです！一緒にスキルアップしていきましょう👍
模写コーティングの実装と解説の動画出してほしいです！
transitionを1sにしたらかなり遅くなりましたw
面白いですね😆
いつも有難く拝見しております。ニョロニョロ（関節セレクタ）を使わない方法もありますか？（同じ親かつ後にあるもの以外に影響を与えたい場合等）
サイドバーレイアウトの実装からハンバーガーメニューのCSSでの実装大変わかりやすかったです。ありがとうございます。 一つ質問ですが、ハンバーガーのアイコンをimgでなくHTMLやCSSのコードにテキストと同様に表示されていますが、あれはどうやるのでしょうか？ 教えていただけると助かります。
レスポンシブデザインやハンバーガーメニューを勉強しなくちゃなと思いつつ、CSSの難易度が爆上がりしている気がしてなかなか勉強に手を付けられずにいたのですが、またもやしまぶーさんの動画に助けられました！ありがとうございます！！
一転疑問なのですが、
asideタグやbackクラスのcssプロパティで同じ「position: absolute;」という記載なのにaside(サイドバー)の方が上に乗っかっているように表示されているのかが理解できませんでした。。。
ハンバーガーメニューの代わりに使えるUI, UXでオススメがあれば是非知りたいです！
しまぶーさん
いつも動画で勉強させてもらっています！
Yahoo等の大手ITの実態が分かるのはすごい参考になります！
質問なんですが、未経験からYahooに中途で入社することは可能でしょうか？
未経験から勉強して大手ITに入社したいと思っています。
Yahooは既卒も新卒も同じくくりで採用をとると書いてあったので、しまぶーさんの周りにどれくらい既卒の人がいたか教えて教えていただけると嬉しいです！
一点質問です！
.backに対してbackground-colorが指定されていますが、サイドバーを出した時にサイドバーが隠れない（asideのレイヤーが前に来ている）のは理由があるのでしょうか？
.back、aside共にposition: absoluteが指定されており、競合した際にどのような優先順位があるのか教えていただきたいです。
いつもタメになる動画の投稿ありがとうございます。
この方法（CSSだけ）でハンバーガーメニューを作ってみました。
メニュー内のリストをクリックすると各セクションの頭までページ内遷移するように設定しているのですが、
遷移はするものの、ハンバーガーメニューが表示されたままになります。
リストのクリックと同時にハンバーガーメニューを非表示にする方法を教えていただきたいです。
自分なりにググってみましたが、どれもうまくできませんでした（泣）
あとは、各リストにを付けたらチェックマークを外せるのかと思い試みましたができませんでした。。。
プログラミング初心者です。いつもすごく有益な動画をありがとうございます。
海外からひっそり参考にさせてもらっています！！
そこで質問？要望？があるのですが、Javascriptを使った画像の切り替え方（数秒おきに画像が変わるなど）の動画をぜひ作って解説していただきたいなと思い、コメントさせていただきました。
実際既存にあるブログなどを読んでトライしましたが、なんでこうなるんだろ？ってな感じでなかなかわかりにくかったです。
スライダーとかですね！あれもCSSでできるので、個人的にはCSSでやる方法を作りたいですね（その方がパフォーマンスがいいので）。
生のJavaScriptを書く機会って本当に減っていて基本はReactやVueを使って開発することが多くなっています。なので生のJavaScriptでスライダー講座を作るよりはReactでの作り方を解説したいというのが本音です（ただReactを理解してもらえるためのReact講座が先に必要に・・・）。CSSか、またはいずれReactでの講座を作りますね🙏
@@shimabu_it なんとCSSでもできるんですね！知らなかったです笑
もちろん言語はとはないので、少し先の話になってしますかもですがよろしくお願いします！
質問なのですが、結構前の動画でバックエンドエンジニアになるには一つの言語を極めた方が良いとおっしゃっていましたが、しまぶーさんなら現在の状況を見てどの言語が良いと考えますか。
もし機会があれば、初心者がwebページを作るときの手順の動画も是非見たいです！！
お疲れ様です！
C言語の必要性を教えてください！
大学でやってるんですが、何回やってもエラー表示ばっかりでこまってます、、
将来はIT系で独立できる様、プロゲートを中心にweb系言語を中心に学習中です。
C言語はどちらにせよ必修単位なので
やらなくてはならないのですが、、
モチベの問題ですね、
メッチャタイムリーでマジ感謝です！ しまぶーさんにどこかで監視されてるのか⁉︎www
今日の黒い服、似合ってますね^^
え、マジで黒い服着てるんですが・・・🤣www
常に監視していますよ
家の中でも軽率な行動は気をつけてくださいね^^ｗ
擬似クラスで.backに画面全体に黒の背景をつけてますが、サイドバーには被ってないのはなぜですか？
【モダンJavaScript #3】歴史から学ぶJavaScript後編以降が待ち遠しいです。
いつも動画ありがとうございます！
質問です
ITの基礎知識はどのように学ばれましたか？ サーバー、クラウド、フレームワーク等々
基本的には自分が作りたいものを実現する中で必要になった知識を学んでいった感じです。自分の場合は趣味に関するブログを作りたかったのでその仮定で色々学んでいきました。
学び方としてはひたすらググりまくって自分で試す感じです。ググりまくって自分で試すを繰り返しているうちに段々と「そういうことか」と理解していった感じですね！
フロントエンドにおいては極めようと思って本気で学んだ（今も日々学んでいる）ので体系的に知識はありますが、プログラミング全般で言うと割と断片的な知識だったりはします。そこが私の弱みですね💦
初心者の学習方法はHTMLCSSを完璧にしてから次の言語化ある程度理解してから次の言語ならどちらをしまぶーさんはやっていましたか？
「ある程度理解してから次の言語」ですね。プログラミング言語においてすべてマスターできるのは不可能なので、自分がそれなりに理解できたら次の言語にいった方が良いかと思います！👍
ハンバーガー・メニューは奥が深そうです。わかりやすい解説ありがとうございます！
ところで、コードをブラウザ表示した時にUI Build Assistantが効かなくなりました(T_T)
通常のwebサイトでは機能しているのですが...。原因がわからずです。
今日もわかりやすい動画ありがとうございます！
そして、しまぶーさんの動画とProgate、ドットインストールを利用しながら、今日でHTML、CSS、JavaScriptを学び始めて2週間になりました！
また昨日、自分のポートフォリオサイトを作りました！
現在は地方国立の理系の修士一年で、しまぶーさんと同じYahooのフロントエンドを目指しています。そこで、今これだけは学んでおくべき、就職してからも役に立つ言語って言ったら何になりますか？？
ちなみに、大学の研究ではPythonを用いて機械学習やデータサイエンスを研究し、バックエンドでPythonは使えます！それに付随して、データベースでMySQLも使えます！
長文で質問すみません💦💦
ポートフォリオサイトを作られたということで素晴らしいですね。私の動画も参考にしてくださってたいへん嬉しいです。ありがとうございます。🙏
フロントエンドでいうとReact・Vue・Angularなどのフレームワークどれかを触れる＋TypeScriptでかけるのと、あとは全体的な開発感を分かっている良いかもですね。ふわっとしていますが「SSRやSSGが何か分かっている」「GraphQLのアーキテクチャを理解している」「JAMStackが分かっている」...など。いわゆる色んなアーキテクチャを知っていて、それらのメリデメが分かると良いかなと。プログラミング言語はどうでしょうね〜。そこまで言語オタクじゃないのでなんとも言えませんがRustは熱そうな気はします。
あとは私の代はありませんでしたが今年はSPI的なコーディングテストがあるらしいので、その対策もしておくと良いかも知れません。言語としてJavaScriptは使えないらしいですがPythonは使えるとのことなので、Pythonを復習しても良いかもですね。責任は取れませんのであくまで噂程度に・・・。
参考になれば幸いです👍
しまぶーのIT大学
こんなにも丁寧に説明していただきありがとうございます😭
フロントエンドに関してはまだまだ初心者なので、説明いただいたことを一つ一つ丁寧に学んでいきたいと思います！
コーディングテストもしっかり解けるように、Pythonの復習も頑張ります！！
これからも、しまぶーさんの動画を参考にさせていただきながら頑張ります！
めっちゃ応援してます👍👍
参考書など使って勉強されましたか？
ハンバーガーのUIって人によって賛否両論あるよなあ。
リテラシーある人ならメニューが格納されてるってわかるけど
意外にわからない人が多いって話してる人いた。
自分的にはPCではメニューを全て出し、スマホ対応の際はハンバーガー使うようにしている。
賛否両論ありますね〜。次回のデザイン講座ではハンバーガーメニューを使わなかった場合の代替策まで踏み込んで解説する予定ですよ！😁
tailwindcss頑張っていますが、archilinuxやdevのインストールが上手く出来ずにエラーが出ます。どのように上手くインストールできますか？
将来的にはアプリ開発をしたいです。アプリ開発の勉強は楽しいのですが、難しく感じます。
スキルをはやくお金に換えることで学習のモチベーションが上がると自分は考えてます。
とりあえず小額でも、お金を稼ぐ！という経験もしたいので、ウェブ制作もしつつ、アプリ開発を勉強する、というのはお勧めできますか？
現在大学三年生
HTML CSS歴4ヶ月
JS 歴 2ヶ月
fire base 歴1ヶ月
React歴2ヶ月です。
１番のオススメはアプリ開発を学べるインターン・アルバイト先を探すことです。クラウドソーシングなどでWordPress案件を取ってくるようなお金の稼ぎ方はスキルが身につかずその場しのぎでしかないので長期的に見た場合、オススメしません。
またアプリ開発の技術でウェブ制作を行うことはできます。ウェブ制作の技術（jQuery、WordPress）でウェブサイトを作るよりも圧倒的に良いものが作れるので、ウェブ制作の技術を学ばれるよりはアプリ開発の技術（フロントエンドフレームワーク、JAMStack）を学ぶことをオススメします！
しまぶーのIT大学 返信ありがとうございます！
しまぶーさんの言葉を胸に頑張りたいと思います！
Let's go! How many videos Have you made? Also, I want to be CZcams friends :D
パン屑もハンバーガーもspanを使う理由はなぜなのでしょうか
自分のことを誇らしく思わないんですか？！
イケメンで仕事もできる！！
正直言って俺はしまぶーさんが羨ましい( ;∀;)
あ、すみませんこれ以上言うとファンが怒りますね。。。
今回の動画も大変ためになりました！
結構勉強するの疲れていたので、かみ砕いて説明してくれているので初心者の自分のような者には有難き動画でした！
これからも応援しています！また他の動画も見て回ります！本当に感謝！！！
コメント欄で言っても仕方ないかもしれないけど、しまぶーさんの下で働きたい。笑
なぜ、asideのposition-absoluteより.backのposition-absoluteが下に来るのでしょうか？htmlの記述が下に来ているからですか？
今回も分かりやすく勉強になりました。繰り返し見ながらやって、最後は見ないでできるまでやってみます。(ง •̀_•́)ง
後々、jsでも作れるようにしたいですが、まずは基礎をきちんと抑えるためにHTML CSSで作れた方が自信になります。
ありがとうございます！😌
いいね。
シンプルイズベスト👍笑
xクリックしたらサイドバーが消える仕組みが分からない。.close の設定が見当たらない
プログラミング言語は全部勉強しましたか？
時間を割いて学習したのはJavaScript（Node.js）とPHPぐらいですね。
あとは軽く触ってみた程度です！
いいね、サイコ―！(^^)/
説明というより早めに淡々と話しているので、よくわからなかった；；説明動画でしたら、話し方をゆっくりしてもらえると助かる
わかりやすいし、参考になるけど…
早口…