このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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のスタイル
