このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 モーダルウィンドウを作ってみよう (02:12) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 画面を作っていこう (02:19) 無料公開中
- styles.cssの作成
- #openのマークアップ
- #maskのマークアップ
- #modalのマークアップ
-
#03 ボタンのスタイルを整えよう (02:47)
- bodyのスタイリング
- #openのスタイリング
- #maskのスタイリング
-
#04 マスクとモーダルのスタイルを整えよう (02:45)
- #openのスタイリング
- #maskのスタイリング
- positionプロパティ
-
#05 マスクとモーダルを非表示にしよう (02:09)
- hiddenクラスの設定
- transformプロパティ
-
#06 要素を取得しよう (02:01)
- main.jsの作成
- 要素の取得
-
#07 マスクとモーダルを表示しよう (02:37)
- clickイベントの設定
- hiddenクラスの付け外し
-
#08 モーダルにアニメーションをつけよう (02:43)
- transitionプロパティ
- z-index
