【実践】HTML CSS ハンバーガーメニューの作り方！ + jQuery
Vložit
- čas přidán 7. 04. 2022
- 「ハンバーガーメニュー」の実装方法について実践・解説しています😊♪
HTML CSS、そしてjQueryを使用して、基本のハンバーガーメニューを実装します😆
🎥 この動画の構成 🎥
00:15 ハンバーガーメニューとは
00:34 今回の解説の流れ
00:58 jQueryとは
01:16 基本ファイルの作成
02:52 リセットCSSの読み込み（概要欄にファイルあり）
04:16 まずはheaderを作る
07:09 ハンバーガーボタンを配置
11:08 メニュー表示を作成
13:15 クリックでメニュー表示
17:50 メニューとボタンの重なり
18:18 ボタンの表示切り替え
🗂 今回使用したファイル 🗂
www.craft.do/s/ILX6WDSh75qQo9
📁 リセットCSS
www.craft.do/s/rILNx69uiB951N
ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
✅ 👇 『チャンネル登録』よろしくお願いします🙇♂️
czcams.com/users/hirocode?sub_c...
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
◆ Twitter. ツイッター
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#WEBデザイン #Figma #XD
ずっと出来なくてモヤモヤしていましたが、こちらの動画のおかげで解決しました！ありがとうございます😊
嬉しいコメントいただきありがとうございます🙇❗️
パソコン買って半年の、57歳のおじさんです。
メモ帳からHTML、CSSでホームページを作っています。
ハンバーガーメニューを作りたいのですが、とてもわかりやす神動画ありがとうございます。
今後もヒロ先生の動画で勉強します。
そのご年齢で凄すぎます🤯❗️❗️❗️
ありがとうございす！より参考になるような動画出せるように頑張ります🙇❗️
@@hirocode メモ帳で作成したホームページを、FTPフリーソフトでアップロードする方法がしりたいです。ヒロ先生は何を使ってますか？FFFTPなど試しましたがうまくできません。窓の社でWinSCPなどもダメでした。初心者に最適のFTPを教えて下さい。
これまじ神ですハンバーガーメニュー作ろうかなというときにちょうどアップしてくれてまじで感謝です
そういっていただけて動画作った甲斐がありました😭❗️こちらこそご視聴いただきありがとうございます🙇♂️❗️
早速リクエストにお答え頂き、ありがとうございます！助かります！
こちらこそありがとうございます😊‼️
とてもシンプルな言葉で説明してくださるので、分かりやすかったです！😍
今回作ったメニュー(サンプル)の中身も解説してもらえたら嬉しいです😂
嬉しいコメントいただきありがとうございます🙇♂️
今回メニューの中まで作りきれていませんが、一番シンプルな形だと、テキスト上のボタンを縦に並べるのが簡単です！
PC版では横に並べているものを、flex-direction: column;で縦方向に並べるイメージです😆❕
ハンバーガーメニューの実装が調べてもイマイチできなかったのですが、この通りにやったら、ちゃんと実装できました！
ありがとうございました☺️
やってみていただけて嬉しいです😊♪
こちらこそありがとうございます🙇❕
やっぱ悩んだらこのチャンネルだわ…ありがとうございます
ありがとうございます😭❗️
とても分かりやすくて勉強になります！PCの時はそのままのメニューでSPで見たときにハンバーガーメニューに切り替わるhtmlとcssのコーディングをしていただけると嬉しいです。これからも応援していますので、頑張ってください！
コメントいただきありがとうございます😊♪ 今回アニメーションなども解説できていないので、ご要望いただいた点含めてもう少し細かい内容の動画再度上げたいと思います😆❗️応援嬉しいです😭ありがとうございます🙇♂️❗️
スクールよりも分かりやすくてびっくりしちゃう…
そう言っていただけて嬉しいです😭❗️ありがとうございます🙇
分かりやすい解説動画ありがとうございます。アニメーションの処理まであるとさらに良かったなと感じました。次回も楽しみにしています。
こちらこそご視聴いただきありがとうございます😊♪
めちゃめちゃ参考になるご意見いただきありがとうございます🙇♂️❗️アニメーション部分の動画も今後出したいと思います😆❗️
めちゃくちゃ分かりやすかったので次はspan要素を用いてJavascriptを使って実装して欲しいです。
リセットCSSの内容が気になりました！
嬉しいコメントいただきありがとうございます😊♪
次にアニメーション部分の動画出せたらと思います！
リセットCSSについてサンプル概要欄に載せたので参考にしてみてください😆❗️
見やすいし声も聞きやすいし話しや作業の速さも丁度良くて、買った動画教材より分かりやすいです…😂SP版のデザインにハンバーガーメニュー入れたので、コーディングの参考にさせていただきます\( ˆoˆ )/
めちゃくちゃ嬉しいコメントいただきありがとうございます😭❗️参考にしていただけて嬉しいです😆♪
わかりやすい動画ありがとうございます！
ほぼほぼ動画通りに行ったのですが、メニューが開かれているときに右上にハンバーガーボタンを出すところがうまく行きません。何も見えてなくてもクリックができ、動作も問題ないのですが✖️ボタン(画像)が出てこないのには何か理由があるのでしょうか？
嬉しいコメントいただきありがとうございます😊♪
動作問題なくてボタン表示が出ないのなんででしょう💦
18:14 このようにカーソル合わせてもボタン表示されない感じでしょうか？？
background-imageの指定、hoverの指定、z-indexの指定あたりもしかしたら誤りがあるかもしれないです。
chromeのデベロッパーツール使えるようでしたら、
まず.menuの上に.burgerが来ているか、
次に、.burgerのbackground-imageの指定が正しくアクティブになっているか。
この点見てみたら原因わかりそうです。
解決しないようであれば再度コメントください😆！
わかりやすい動画をありがとうございます！ burgerクラスにposition:relativeとz-index:2を追加されていますが、position:relativeはなぜ必要なのでしょうか。なくても大丈夫そうなのですが、やはり必要なのでしょうか？
嬉しいコメントいただきありがとうございます😊♪
z-indexプロパティは、positionプロパティがstatic以外の時しか効かないです！positionプロパティはデフォルト値がstaticなので、position: relative;を指定しています❗️
そうだったんですか！ ご説明ありがとうございます。ということはstatic以外ならrelativeじゃなくてもいいということなのでしょうか。デフォルト値ってけっこうやっかいですよね😅
厄介ですよね💦今回でいうと、relative以外の値、absoluteやfixed指定してしまうと要素の位置が変わってしまうのでrelativeをかけています‼️
@@hirocode なるほど。考えてみたらそうですね💧 勉強を始めて半年くらいですが、まだまだデフォルト値に翻弄されてます💧 丁寧なご説明ありがとうございます！
今回「サンプル」という文字が１つだけハンバーガーメニューの項目になっていますが、
実装する際には複数の項目をタテに並べる必要が出てくるかと思います。
単純にサンプルをコピペして追加しても
サンプル
────
サンプル
とはなりませんでした。
項目の増やし方を教えて頂けると助かります…！
コメントいただきありがとうございます😊♪
.menuについてはレイアウト部分になるので、中のコンテンツは別で作成する必要があります❗️
項目1
項目2
例えばこんな感じで組んであげれば縦並び上にボタンのリストが組めるかと思います😆❗️
@@hirocode 御回答頂きありがとうございます！記述例まで丁寧にお教え頂けてとても助かりました、無事に項目を縦並びで増やすことができました^^
ありがとうございました。.menu.is-active 間にスペースがないのは.menuかつ.is-activeの場合という認識でよろしいでしょうか？スペースができてしまうと、親要素.menuの中の子孫要素.is-activeということでよろしいでしょうか？
こちらこそありがとうございます🙇♂️
指定についてはまったくその通りです😆‼️
実案件となると、3本線や×ボタンは画像の切り替えだけでいけますか？やはり最終的には三本線をアニメーションさせるところまでおぼえたほうがよろしいでしょうか？
コメントありがとうございます😆❗️
全然画像で実装することもありますが、僕は指摘受けて修正したってことは今までないです！
ただ、３本線のもそこまで難しくないので、今度動画出してみますね☺️♪
@@hirocode ありがとうございます。楽しみにしています。
大変わかりやすかったです、ありがとうございました!
ハンバーガーメニューが表示された際、.burgerにz-indx:2;とのご指示でしたが、反映されなく、閉じることができません。値を上げてやってみましたが効果がなく、、menu内のposition:fixed;が大きく効いてしまってるのか、なんなのか、、もしお分かりになられば、その場合の対処を教えていただきたいです。
嬉しいです！ありがとうございます☺️♪
.burgerと.menuは隣同士で並んでいる状態でしょうか?
また、ブラウザの検証が使えるようでしたら、角要素にz-indexがそれぞれ当たっているか確認してみてください🙇❗️
@@hirocode お忙しいところ返信ありがとうございます！もう一度やり直してみたらうまくいきました!また動かない時はいただいたアドバイス元に確認しようと思います。ありがとうございました!
質問失礼します。
ハンバーガーアイコンをimgで挿入する場合と、
今回のように背景として挿入するのとで
どんな違いがあるのでしょうか？
ご質問いただきありがとうございます😊♪
imgタグで画像を切り替えるのと指定が面倒になります！あらかじめimgタグを2つ用意して、cssで双方のdisplayをon / off、もしくはopacity（透過度）を変えて指定することになり、なおかつ一瞬オブジェクトが消えるので画面のカクつきも考慮した組み方が必要になります！一応javascriptでsrc属性の値を変更するパターンもあります。
それに比べてbackground-imageだと値を変えるだけなのでかなり手間が省けます😆❗️
お返事ありがとうございます！
とても分かりやすく、勉強になりました🐸
いつも動画見て勉強させて頂いてます！
質問なのですが、自分で作ったwebページのヘッダーにハンバーガーメニューをつけようと思っているのですが、
他の親要素にposition:relative;を付けているせいなのか、.burgerにposition:relative;を付けても、.menuページでのハンバーガーメニューが表示されませんでした。
同じヘッダー内で二つのposition:relative;を使用していると反映されないのでしょうか？
最近始めたばっかりの初心者なので、教えていただけたら幸いです😂
いつもご視聴いただきありがとうございます🙇♂️❗️
恐らくですが、.burger要素と.menu要素の配置が関係していると思われます。.burger要素の隣（同じ階層）に.menu要素を置けば上手くいくかと思います😆❗️
ハンバーガーメニューは便利で難しい印象がありましたが、この動画でハードルが下がった感じがします。
チャンネル登録させていただきますので、今後もよろしくお願いします。
嬉しいコメントいただきありがとうございます😆❗️
チャンネル登録もして下さって、とっても嬉しいです😭😭😭
こちらこそ今後ともよろしくお願いいたします🙇♂️
こんにちわ！
jquery初心者の私でも理解でき、
とても参考になりました！
ありがとうございます！！
質問があります。
自身が作成中のサイトに
ご紹介されたハンバーガーメニューを
実装したのですが、
position:fixedだけ上手くいきません。
そこ以外は特に問題なく作動しています。
よくfixedが効かない原因として
親要素にtransformをついている場合がありますが、
特にそれもありません。
(animationは付けています)
animationもtransform同様に
fixedに影響しますか？
もし影響しないのであれば、
どういった原因が考えられますでしょうか？
嬉しいコメントいただきありがとうございます😊♪
そうですね、animation内にtransformプロパティが入っていなければ問題ないように思います。もしanimationが適用されている要素の外側にfixedする要素を配置できれば解決されるかもしれません🙇♂️❗️それでも解決されないようであれば別の原因かもしれません💦
@@hirocode ご返信ありがとうございます！試してみます！
この動画のようにハンバーガーメニューを作成した場合fadeOutやfadnInは使えないのでしょうか？
$('.menu').fadeOut()
$('.menu'.is-active).fadeIn()
と表記しても適用されなかったので、、😢
コメントありがとうございます😊♪ できます！！
$('.menu'.is-active)
この部分が、正しくは、
$('.menu.is-active')
という記述です！
合わせて、cssの.menu.is-activeの指定は消してあげます😆❗️
@@hirocode
ご返信ありがとうございます！
cssの.menu.is-activeの指定を消すというのは、display flexを消すという認識で合っていますか？
そこの項目を削除してみたんですが、画面の切り替え自体が起こらなくなってしまったので、認識が違ったのかなと思いまして💦
あってます❗️
fadeIn()ではdisplay: block;が指定されることになるので、CSS側のdisplay: flexの指定を無くさないと競合して動きがおかしくなるはずです！
ディベロッパーツールを開こうとするとメールが作成されるのですが、どうしたらディベロッパーを開けるようになりますか。
コメントありがとうございます😊メニューバーの表示→開発/管理→デベロッパーツール からでも開けます！他のショートカットとかぶってるかもしれないので、システム環境→ショートカットからショートカットキー指定すればショートカットで開ける様になるかもです‼️
@@hirocode Chromeで試したら開けました！ありがとうございます！
ショートカットキーで開く方法も模索してみます！
返信ありがとうございました🙇🏻♂️
動画のようにcssで.menu .is-active{ display: flex; }と書いてハンバーガーボタンを押してもメニューが表示されないので困ってます。デベロッパーツールではhtmlでclass="menu is-active"と表示されるのにcssでは.menu .is-activeが表示されないです。どうかお助けください。
こんにちは😊
.menuと.is-activeの2つを持つ要素の指定は、.menu.is-activeのように、くっ付けて記述します😆❗️
.menu .is-activeのようにスペースを空けると、.menuの子要素か孫要素の.is-active要素に対する指定になります❗️
@@hirocode 返信ありがとうございます！くっ付けて記述してみたら上手くいきました！コーディング初心者なので、これからもヒロコードさんの動画でたくさん学ばさせていただきます😊
揚げ物大好き
油っこいもの僕も大好きです😆♪
ノーコードについての動画頼みます
ご要望いただきありがとうございます🙇♂️❗️ノーコードに関する動画について今後出せていけたらと思います❗️❗️
일본어 메뉴는 읽기가 어렵더라고요. 외국인들에게 일본 식당 메뉴 설명하는 컨텐츠 올려보세요.
코멘트 감사합니다 🙇♂️. 의견을 참고로 개선하고 싶습니다❗️