ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/01/26
NEW
週刊ドットインストール(2023/01/26号)を更新しました!
PREMIUM
JavaScriptでハンバーガーメニューを作ろう
JavaScriptでハンバーガーメニューを作る方法を見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
詳解JavaScript 基礎文法編
(全26回)
PREMIUM
PREMIUM
0%
詳解JavaScript オブジェクト編
(全35回)
PREMIUM
PREMIUM
0%
詳解JavaScript DOM編
(全21回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(13)
質問と回答
(33)
未完了
#01 ハンバーガーメニューを作ろう
(02:50)
無料公開中
概要の説明
index.htmlの作成
viewportの設定
未完了
#02 マテリアルアイコンを使ってみよう
(02:31)
無料公開中
マテリアルアイコンの導入
menuアイコンの作成
closeアイコンの作成
未完了
#03 ヘッダーの要素を配置しよう
(02:14)
無料公開中
logoの作成
sp-menuの作成
main要素の作成
未完了
#04 CSSでスタイリングしていこう
(02:10)
styles.cssの作成
bodyのスタイル
headerのスタイル
sp-menuのスタイル
未完了
#05 ヘッダーのスタイルを整えよう
(02:00)
header h1のスタイル
sp-menu #openのスタイル
mainのスタイル
未完了
#06 スマートフォン用のメニューを作ろう
(02:33)
overlayの作成
closeアイコンの設置
overlayのスタイル
未完了
#07 メニューのスタイルを整えよう
(02:59)
overlay #closeのスタイル
overlay ulのスタイル
overlay liのスタイル
未完了
#08 クリックイベントを設定しよう
(02:32)
main.jsの作成
open要素の取得
overlay要素の取得
未完了
#09 クリックしたらメニューを表示しよう
(02:22)
openにclickイベントの作成
showクラスの作成
hideクラスの作成
未完了
#10 メニューを閉じられるようにしよう
(01:44)
closeにclickイベントの作成
showクラスの削除
hideクラスの削除
transitionの設定
未完了
#11 アニメーションの設定を完成させよう
(02:40)
overlay liのスタイル
overlay.show liのスタイル
li:nth-childのスタイル
未完了
#12 PC版のメニューを作ろう
(02:32)
pc-menuの作成
メディアクエリの作成
pc-menuのスタイル
未完了
#13 PC版のスタイルを整えよう
(02:43)
pc-menu ulのスタイル
pc-menu aのスタイル
pc-menu a:hoverのスタイル
#02 マテリアルアイコンを使ってみよう
link に貼り付ける Google Fonts の URL はどこにありますか?
2022年8月22日
#03 ヘッダーの要素を配置しよう
メニューアイコンに div を使っていますが、 nav でも問題ありませんか?
2022年3月24日
#04 CSSでスタイリングしていこう
なぜ margin-left: auto; とするとメニューアイコンが右揃えになるのですか?
2022年1月27日
.sp-menu に margin-left しても header に justify-content: space-between しても同じ表示になりますが、どちらがよいですか?
2022年1月27日
#05 ヘッダーのスタイルを整えよう
h1 の line-height を 64px にするのはなぜですか?
2022年1月27日
line-height を設定するとアイコンがずれてしまいます
2022年1月27日
#06 スマートフォン用のメニューを作ろう
overlay クラスの要素は z-index の値を指定していないのに、なぜ上に乗っているのでしょうか?
2022年1月27日
#07 メニューのスタイルを整えよう
なぜばつ印の記号は padding: 64px; が適用されないのですか?
2022年1月27日
ul を text-align: center; で指定すると、リストの点が li から大きく離れるのは何故ですか?
2022年1月27日
closeアイコンがmargin-leftで移動しないのはなぜですか?
2022年1月27日
display: none;だとうまく動かないのはなぜですか?
2022年1月27日
ulにmargin: 0を指定しなくてもよいのでは?
2022年1月27日
#08 クリックイベントを設定しよう
クラスを指定して要素を取得する際に getElementsByClassName を使わないのはなぜですか?
2022年1月27日
overlay要素の取得方法について教えて下さい
2022年1月27日
#09 クリックしたらメニューを表示しよう
.overlay .show と .overlay.show (半角空白なし)の違いを教えてください
2022年9月3日
opacity: 0; ではなく display: none; とするのはなぜですか?
2022年1月27日
.overlay.show は .show としてはいけないのですか?
2022年1月27日
showとhideをつける位置に違和感があります
2022年1月27日
#10 メニューを閉じられるようにしよう
.overlay.show に transition を書かないのはなぜですか?
2022年3月24日
#11 アニメーションの設定を完成させよう
アニメーションを上手く活用するためにどのような練習をすればいいですか?
2022年9月3日
CSS だけで li 要素が増えたときに自動で CSS を追記する処理はできますか?
2022年2月28日
.overlay 全体ですでに opacity を 0 に設定しているのに .overlay li のところでも opacity を 0 に設定しているのはなぜですか?
2022年1月27日
transition の設定を遷移前の子要素に設定してはいけないのでしょうか?
2022年1月27日
x ボタンがクリックされた時は、transition-delay で順番に消えていかないのはなぜですか?
2022年1月27日
nth-child、nth-of-type の書き方によって違いはありますか?
2022年1月27日
.overlay.show li で transform: none; にする意味は?
2022年1月27日
transitionプロパティを .overlay li {} に記載するのはなぜでしょうか?
2022年1月27日
#12 PC版のメニューを作ろう
なぜ「display: block;」を設定するのですか?
2022年1月27日
#13 PC版のスタイルを整えよう
なぜ pc-menu li ではなくて、pc-menu a とするのですか?
2022年6月1日
pc-menu や sp-menu など、div で囲ったほうがよいのですか?
2022年5月19日
JavaScriptでエラーになってしまいます
2022年1月27日
フレックスボックス内のblockとinline-blockはどう違いますか?
2022年1月27日
CSSとJavaScriptのどちらで実装すべきですか?
2022年1月27日
次におすすめのレッスン
JavaScriptでアコーディオンUIを作ろう
(全9回)
PREMIUM
PREMIUM
0%
JavaScriptでタブメニューを作ろう
(全10回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2020年8月24日
バージョン情報
Chrome 84 / Visual Studio Code 1.47.3
関連キーワード
(6)
基礎講座
(360)
初心者向け
(359)
HTML
(110)
CSS
(111)
JavaScript (ES2017)
(36)
ミニプログラム
(6)
このレッスンを共有する