ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/12/07
NEW
【週刊ドットインストール】 レッスン制作の進捗、代表のひとりごと
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
リリース情報(note)
ES2017に対応した『JavaScriptでモーダルウィンドウを作ろう (全8回)』をリリースしました
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML
(116)
CSS
(118)
JavaScript (ES2017)
(36)
ミニプログラム
(143)
詳細情報
最終更新日
2019年4月16日
バージョン情報
JavaScript (ES2017)