ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/02/02
NEW
週刊ドットインストール(2023/02/02号)を更新しました!
PREMIUM
【旧版】JavaScriptでモーダルウィンドウを作ろう
JavaScriptでモーダルウィンドウを作る方法を学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでモーダルウィンドウを作ろう
JavaScriptでモーダルウィンドウを作る方法を学んでいきます。
0%
動画レッスン一覧
(8)
未完了
#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)
基礎講座
(360)
初心者向け
(359)
HTML
(110)
CSS
(111)
JavaScript (ES2017)
(36)
ミニプログラム
(141)
このレッスンを共有する