ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/02/02
NEW
週刊ドットインストール(2023/02/02号)を更新しました!
PREMIUM
JavaScriptでモーダルウィンドウを作ろう
JavaScriptでモーダルウィンドウを作る方法を学んでいきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
詳解JavaScript 基礎文法編
(全26回)
PREMIUM
PREMIUM
0%
詳解JavaScript オブジェクト編
(全35回)
PREMIUM
PREMIUM
0%
詳解JavaScript DOM編
(全21回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(8)
質問と回答
(14)
未完了
#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
#02 画面を作っていこう
<section> タグは通常見出しが中に入るものだと思っていたのですが...
2022年1月27日
<button> と <div> の使い分けを教えてください
2022年1月27日
#04 マスクとモーダルのスタイルを整えよう
position: absolute; と margin: 0 auto; による中央揃えの違いはなんですか?
2022年11月20日
要素の重なる順番はどのようにして決まりますか?
2022年1月27日
right: 0; の場合、指定がなければ left: auto; になりますか?
2022年1月27日
親要素に position: relative を指定しなくてもよいのですか?
2022年1月27日
absoluteで絶対配置した要素を、中央揃えにするやり方が理解できない
2022年1月27日
#05 マスクとモーダルを非表示にしよう
#modal > p が理解できません
2022年3月24日
#06 要素を取得しよう
JavaScriptはブロックで囲うのか、即時関数で囲うのか?
2022年1月27日
#07 マスクとモーダルを表示しよう
close.click() がわかりません
2022年12月10日
close.click(); の click() は関数ですか?
2022年4月4日
classList の add や remove をするとなぜ mask, modal が画面のあの位置に出てくるのでしょうか?
2022年1月27日
addEventListener内で使っているclick()について
2022年1月27日
#08 モーダルにアニメーションをつけよう
モーダルが消えるときにアニメーションさせずにパッと消すことはできますか?
2022年6月5日
次におすすめのレッスン
JavaScriptでハンバーガーメニューを作ろう
(全13回)
PREMIUM
PREMIUM
0%
JavaScriptでアコーディオンUIを作ろう
(全9回)
PREMIUM
PREMIUM
0%
JavaScriptでタブメニューを作ろう
(全10回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2020年3月25日
バージョン情報
Chrome80 / Visual Studio Code 1.42.1
関連キーワード
(6)
基礎講座
(360)
初心者向け
(359)
HTML5
(32)
CSS3
(20)
JavaScript (ES2017)
(36)
ウェブサイト構築
(155)
このレッスンを共有する