新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 モーダルウィンドウを作ってみよう (02:31) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面を作っていこう (02:46) 無料公開中
- #openのマークアップ
- #maskのマークアップ
- #modalのマークアップ
-
#03 ボタンのスタイルを整えよう (01:49)
- bodyのスタイリング
- #openのスタイリング
- #maskのスタイリング
-
#04 マスクとモーダルのスタイルを整えよう (02:56)
- #openのスタイリング
- #maskのスタイリング
- positionプロパティ
-
#05 マスクとモーダルを非表示にしよう (02:01)
- hiddenクラスの設定
- transformプロパティ
-
#06 要素を取得しよう (01:53)
- 要素の取得
-
#07 マスクとモーダルを表示しよう (02:19)
- clickイベントの設定
- hiddenクラスの付け外し
-
#08 モーダルにアニメーションをつけよう (02:21)
- transitionプロパティ
- z-index
ギャラリー
このレッスンについて
- 最終更新日
- 2019年4月16日
- バージョン情報
- JavaScript (ES2017)
- 関連キーワード (6)
