Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
パソコン買って半年の、57歳のおじさんです。メモ帳からHTML、CSSでホームページを作っています。ハンバーガーメニューを作りたいのですが、とてもわかりやす神動画ありがとうございます。今後もヒロ先生の動画で勉強します。
そのご年齢で凄すぎます🤯❗️❗️❗️ありがとうございす！より参考になるような動画出せるように頑張ります🙇❗️
@@hirocode メモ帳で作成したホームページを、FTPフリーソフトでアップロードする方法がしりたいです。ヒロ先生は何を使ってますか？FFFTPなど試しましたがうまくできません。窓の社でWinSCPなどもダメでした。初心者に最適のFTPを教えて下さい。
こんな素晴らしい動画を無料で公開していただきありがとうございます。生成AIに作ってもらったものがうまくいかずに困っていました。今後も勉強させていただきます。ありがとうございました！
そう言っていただけて嬉しい限りです😭❗️こちらこそ嬉しいコメントいただきありがとうございます🙇
これまじ神ですハンバーガーメニュー作ろうかなというときにちょうどアップしてくれてまじで感謝です
そういっていただけて動画作った甲斐がありました😭❗️こちらこそご視聴いただきありがとうございます🙇♂️❗️
ハンバーガーメニューの実装が調べてもイマイチできなかったのですが、この通りにやったら、ちゃんと実装できました！ありがとうございました☺️
やってみていただけて嬉しいです😊♪こちらこそありがとうございます🙇❕
ずっと出来なくてモヤモヤしていましたが、こちらの動画のおかげで解決しました！ありがとうございます😊
嬉しいコメントいただきありがとうございます🙇❗️
とてもシンプルな言葉で説明してくださるので、分かりやすかったです！😍今回作ったメニュー(サンプル)の中身も解説してもらえたら嬉しいです😂
嬉しいコメントいただきありがとうございます🙇♂️今回メニューの中まで作りきれていませんが、一番シンプルな形だと、テキスト上のボタンを縦に並べるのが簡単です！PC版では横に並べているものを、flex-direction: column;で縦方向に並べるイメージです😆❕
やっぱ悩んだらこのチャンネルだわ…ありがとうございます
ありがとうございます😭❗️
分かりやすい解説動画ありがとうございます。アニメーションの処理まであるとさらに良かったなと感じました。次回も楽しみにしています。
こちらこそご視聴いただきありがとうございます😊♪めちゃめちゃ参考になるご意見いただきありがとうございます🙇♂️❗️アニメーション部分の動画も今後出したいと思います😆❗️
スクールよりも分かりやすくてびっくりしちゃう…
そう言っていただけて嬉しいです😭❗️ありがとうございます🙇
とても分かりやすくて勉強になります！PCの時はそのままのメニューでSPで見たときにハンバーガーメニューに切り替わるhtmlとcssのコーディングをしていただけると嬉しいです。これからも応援していますので、頑張ってください！
コメントいただきありがとうございます😊♪ 今回アニメーションなども解説できていないので、ご要望いただいた点含めてもう少し細かい内容の動画再度上げたいと思います😆❗️応援嬉しいです😭ありがとうございます🙇♂️❗️
めちゃくちゃ分かりやすかったので次はspan要素を用いてJavascriptを使って実装して欲しいです。リセットCSSの内容が気になりました！
嬉しいコメントいただきありがとうございます😊♪次にアニメーション部分の動画出せたらと思います！リセットCSSについてサンプル概要欄に載せたので参考にしてみてください😆❗️
見やすいし声も聞きやすいし話しや作業の速さも丁度良くて、買った動画教材より分かりやすいです…😂SP版のデザインにハンバーガーメニュー入れたので、コーディングの参考にさせていただきます\( ˆoˆ )/
めちゃくちゃ嬉しいコメントいただきありがとうございます😭❗️参考にしていただけて嬉しいです😆♪
ハンバーガーメニューは便利で難しい印象がありましたが、この動画でハードルが下がった感じがします。チャンネル登録させていただきますので、今後もよろしくお願いします。
嬉しいコメントいただきありがとうございます😆❗️チャンネル登録もして下さって、とっても嬉しいです😭😭😭こちらこそ今後ともよろしくお願いいたします🙇♂️
ありがとうございました。.menu.is-active 間にスペースがないのは.menuかつ.is-activeの場合という認識でよろしいでしょうか？スペースができてしまうと、親要素.menuの中の子孫要素.is-activeということでよろしいでしょうか？
こちらこそありがとうございます🙇♂️指定についてはまったくその通りです😆‼️
大変わかりやすかったです、ありがとうございました!ハンバーガーメニューが表示された際、.burgerにz-indx:2;とのご指示でしたが、反映されなく、閉じることができません。値を上げてやってみましたが効果がなく、、menu内のposition:fixed;が大きく効いてしまってるのか、なんなのか、、もしお分かりになられば、その場合の対処を教えていただきたいです。
嬉しいです！ありがとうございます☺️♪.burgerと.menuは隣同士で並んでいる状態でしょうか?また、ブラウザの検証が使えるようでしたら、角要素にz-indexがそれぞれ当たっているか確認してみてください🙇❗️
@@hirocode お忙しいところ返信ありがとうございます！もう一度やり直してみたらうまくいきました!また動かない時はいただいたアドバイス元に確認しようと思います。ありがとうございました!
実案件となると、3本線や×ボタンは画像の切り替えだけでいけますか？やはり最終的には三本線をアニメーションさせるところまでおぼえたほうがよろしいでしょうか？
コメントありがとうございます😆❗️全然画像で実装することもありますが、僕は指摘受けて修正したってことは今までないです！ただ、３本線のもそこまで難しくないので、今度動画出してみますね☺️♪
@@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の指定を無くさないと競合して動きがおかしくなるはずです！
わかりやすい動画ありがとうございます！ほぼほぼ動画通りに行ったのですが、メニューが開かれているときに右上にハンバーガーボタンを出すところがうまく行きません。何も見えてなくてもクリックができ、動作も問題ないのですが✖️ボタン(画像)が出てこないのには何か理由があるのでしょうか？
嬉しいコメントいただきありがとうございます😊♪動作問題なくてボタン表示が出ないのなんででしょう💦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 御回答頂きありがとうございます！記述例まで丁寧にお教え頂けてとても助かりました、無事に項目を縦並びで増やすことができました^^
ノーコードについての動画頼みます
ご要望いただきありがとうございます🙇♂️❗️ノーコードに関する動画について今後出せていけたらと思います❗️❗️
ディベロッパーツールを開こうとするとメールが作成されるのですが、どうしたらディベロッパーを開けるようになりますか。
コメントありがとうございます😊メニューバーの表示→開発/管理→デベロッパーツール からでも開けます！他のショートカットとかぶってるかもしれないので、システム環境→ショートカットからショートカットキー指定すればショートカットで開ける様になるかもです‼️
@@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 返信ありがとうございます！くっ付けて記述してみたら上手くいきました！コーディング初心者なので、これからもヒロコードさんの動画でたくさん学ばさせていただきます😊
こんにちわ！jquery初心者の私でも理解でき、とても参考になりました！ありがとうございます！！質問があります。自身が作成中のサイトにご紹介されたハンバーガーメニューを実装したのですが、position:fixedだけ上手くいきません。そこ以外は特に問題なく作動しています。よくfixedが効かない原因として親要素にtransformをついている場合がありますが、特にそれもありません。(animationは付けています)animationもtransform同様にfixedに影響しますか？もし影響しないのであれば、どういった原因が考えられますでしょうか？
嬉しいコメントいただきありがとうございます😊♪そうですね、animation内にtransformプロパティが入っていなければ問題ないように思います。もしanimationが適用されている要素の外側にfixedする要素を配置できれば解決されるかもしれません🙇♂️❗️それでも解決されないようであれば別の原因かもしれません💦
@@hirocode ご返信ありがとうございます！試してみます！
いつも動画見て勉強させて頂いてます！質問なのですが、自分で作ったwebページのヘッダーにハンバーガーメニューをつけようと思っているのですが、他の親要素にposition:relative;を付けているせいなのか、.burgerにposition:relative;を付けても、.menuページでのハンバーガーメニューが表示されませんでした。同じヘッダー内で二つのposition:relative;を使用していると反映されないのでしょうか？最近始めたばっかりの初心者なので、教えていただけたら幸いです😂
いつもご視聴いただきありがとうございます🙇♂️❗️恐らくですが、.burger要素と.menu要素の配置が関係していると思われます。.burger要素の隣（同じ階層）に.menu要素を置けば上手くいくかと思います😆❗️
일본어 메뉴는 읽기가 어렵더라고요. 외국인들에게 일본 식당 메뉴 설명하는 컨텐츠 올려보세요.
코멘트 감사합니다 🙇♂️. 의견을 참고로 개선하고 싶습니다❗️
パソコン買って半年の、57歳のおじさんです。
メモ帳からHTML、CSSでホームページを作っています。
ハンバーガーメニューを作りたいのですが、とてもわかりやす神動画ありがとうございます。
今後もヒロ先生の動画で勉強します。
そのご年齢で凄すぎます🤯❗️❗️❗️
ありがとうございす！より参考になるような動画出せるように頑張ります🙇❗️
@@hirocode メモ帳で作成したホームページを、FTPフリーソフトでアップロードする方法がしりたいです。ヒロ先生は何を使ってますか？FFFTPなど試しましたがうまくできません。窓の社でWinSCPなどもダメでした。初心者に最適のFTPを教えて下さい。
こんな素晴らしい動画を無料で公開していただきありがとうございます。
生成AIに作ってもらったものがうまくいかずに困っていました。
今後も勉強させていただきます。
ありがとうございました！
そう言っていただけて嬉しい限りです😭❗️こちらこそ嬉しいコメントいただきありがとうございます🙇
これまじ神ですハンバーガーメニュー作ろうかなというときにちょうどアップしてくれてまじで感謝です
そういっていただけて動画作った甲斐がありました😭❗️こちらこそご視聴いただきありがとうございます🙇♂️❗️
ハンバーガーメニューの実装が調べてもイマイチできなかったのですが、この通りにやったら、ちゃんと実装できました！
ありがとうございました☺️
やってみていただけて嬉しいです😊♪
こちらこそありがとうございます🙇❕
ずっと出来なくてモヤモヤしていましたが、こちらの動画のおかげで解決しました！ありがとうございます😊
嬉しいコメントいただきありがとうございます🙇❗️
とてもシンプルな言葉で説明してくださるので、分かりやすかったです！😍
今回作ったメニュー(サンプル)の中身も解説してもらえたら嬉しいです😂
嬉しいコメントいただきありがとうございます🙇♂️
今回メニューの中まで作りきれていませんが、一番シンプルな形だと、テキスト上のボタンを縦に並べるのが簡単です！
PC版では横に並べているものを、flex-direction: column;で縦方向に並べるイメージです😆❕
やっぱ悩んだらこのチャンネルだわ…ありがとうございます
ありがとうございます😭❗️
分かりやすい解説動画ありがとうございます。アニメーションの処理まであるとさらに良かったなと感じました。次回も楽しみにしています。
こちらこそご視聴いただきありがとうございます😊♪
めちゃめちゃ参考になるご意見いただきありがとうございます🙇♂️❗️アニメーション部分の動画も今後出したいと思います😆❗️
スクールよりも分かりやすくてびっくりしちゃう…
そう言っていただけて嬉しいです😭❗️ありがとうございます🙇
とても分かりやすくて勉強になります！PCの時はそのままのメニューでSPで見たときにハンバーガーメニューに切り替わるhtmlとcssのコーディングをしていただけると嬉しいです。これからも応援していますので、頑張ってください！
コメントいただきありがとうございます😊♪ 今回アニメーションなども解説できていないので、ご要望いただいた点含めてもう少し細かい内容の動画再度上げたいと思います😆❗️応援嬉しいです😭ありがとうございます🙇♂️❗️
めちゃくちゃ分かりやすかったので次はspan要素を用いてJavascriptを使って実装して欲しいです。
リセットCSSの内容が気になりました！
嬉しいコメントいただきありがとうございます😊♪
次にアニメーション部分の動画出せたらと思います！
リセットCSSについてサンプル概要欄に載せたので参考にしてみてください😆❗️
見やすいし声も聞きやすいし話しや作業の速さも丁度良くて、買った動画教材より分かりやすいです…😂SP版のデザインにハンバーガーメニュー入れたので、コーディングの参考にさせていただきます\( ˆoˆ )/
めちゃくちゃ嬉しいコメントいただきありがとうございます😭❗️参考にしていただけて嬉しいです😆♪
ハンバーガーメニューは便利で難しい印象がありましたが、この動画でハードルが下がった感じがします。
チャンネル登録させていただきますので、今後もよろしくお願いします。
嬉しいコメントいただきありがとうございます😆❗️
チャンネル登録もして下さって、とっても嬉しいです😭😭😭
こちらこそ今後ともよろしくお願いいたします🙇♂️
ありがとうございました。.menu.is-active 間にスペースがないのは.menuかつ.is-activeの場合という認識でよろしいでしょうか？スペースができてしまうと、親要素.menuの中の子孫要素.is-activeということでよろしいでしょうか？
こちらこそありがとうございます🙇♂️
指定についてはまったくその通りです😆‼️
大変わかりやすかったです、ありがとうございました!
ハンバーガーメニューが表示された際、.burgerにz-indx:2;とのご指示でしたが、反映されなく、閉じることができません。値を上げてやってみましたが効果がなく、、menu内のposition:fixed;が大きく効いてしまってるのか、なんなのか、、もしお分かりになられば、その場合の対処を教えていただきたいです。
嬉しいです！ありがとうございます☺️♪
.burgerと.menuは隣同士で並んでいる状態でしょうか?
また、ブラウザの検証が使えるようでしたら、角要素にz-indexがそれぞれ当たっているか確認してみてください🙇❗️
@@hirocode お忙しいところ返信ありがとうございます！もう一度やり直してみたらうまくいきました!また動かない時はいただいたアドバイス元に確認しようと思います。ありがとうございました!
実案件となると、3本線や×ボタンは画像の切り替えだけでいけますか？やはり最終的には三本線をアニメーションさせるところまでおぼえたほうがよろしいでしょうか？
コメントありがとうございます😆❗️
全然画像で実装することもありますが、僕は指摘受けて修正したってことは今までないです！
ただ、３本線のもそこまで難しくないので、今度動画出してみますね☺️♪
@@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の指定を無くさないと競合して動きがおかしくなるはずです！
わかりやすい動画ありがとうございます！
ほぼほぼ動画通りに行ったのですが、メニューが開かれているときに右上にハンバーガーボタンを出すところがうまく行きません。何も見えてなくてもクリックができ、動作も問題ないのですが✖️ボタン(画像)が出てこないのには何か理由があるのでしょうか？
嬉しいコメントいただきありがとうございます😊♪
動作問題なくてボタン表示が出ないのなんででしょう💦
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 御回答頂きありがとうございます！記述例まで丁寧にお教え頂けてとても助かりました、無事に項目を縦並びで増やすことができました^^
ノーコードについての動画頼みます
ご要望いただきありがとうございます🙇♂️❗️ノーコードに関する動画について今後出せていけたらと思います❗️❗️
ディベロッパーツールを開こうとするとメールが作成されるのですが、どうしたらディベロッパーを開けるようになりますか。
コメントありがとうございます😊メニューバーの表示→開発/管理→デベロッパーツール からでも開けます！他のショートカットとかぶってるかもしれないので、システム環境→ショートカットからショートカットキー指定すればショートカットで開ける様になるかもです‼️
@@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 返信ありがとうございます！くっ付けて記述してみたら上手くいきました！コーディング初心者なので、これからもヒロコードさんの動画でたくさん学ばさせていただきます😊
こんにちわ！
jquery初心者の私でも理解でき、
とても参考になりました！
ありがとうございます！！
質問があります。
自身が作成中のサイトに
ご紹介されたハンバーガーメニューを
実装したのですが、
position:fixedだけ上手くいきません。
そこ以外は特に問題なく作動しています。
よくfixedが効かない原因として
親要素にtransformをついている場合がありますが、
特にそれもありません。
(animationは付けています)
animationもtransform同様に
fixedに影響しますか？
もし影響しないのであれば、
どういった原因が考えられますでしょうか？
嬉しいコメントいただきありがとうございます😊♪
そうですね、animation内にtransformプロパティが入っていなければ問題ないように思います。もしanimationが適用されている要素の外側にfixedする要素を配置できれば解決されるかもしれません🙇♂️❗️それでも解決されないようであれば別の原因かもしれません💦
@@hirocode ご返信ありがとうございます！試してみます！
いつも動画見て勉強させて頂いてます！
質問なのですが、自分で作ったwebページのヘッダーにハンバーガーメニューをつけようと思っているのですが、
他の親要素にposition:relative;を付けているせいなのか、.burgerにposition:relative;を付けても、.menuページでのハンバーガーメニューが表示されませんでした。
同じヘッダー内で二つのposition:relative;を使用していると反映されないのでしょうか？
最近始めたばっかりの初心者なので、教えていただけたら幸いです😂
いつもご視聴いただきありがとうございます🙇♂️❗️
恐らくですが、.burger要素と.menu要素の配置が関係していると思われます。.burger要素の隣（同じ階層）に.menu要素を置けば上手くいくかと思います😆❗️
일본어 메뉴는 읽기가 어렵더라고요. 외국인들에게 일본 식당 메뉴 설명하는 컨텐츠 올려보세요.
코멘트 감사합니다 🙇♂️. 의견을 참고로 개선하고 싶습니다❗️