ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
JavaScriptでモーダルウィンドウを作ろう
JavaScriptでモーダルウィンドウを作る方法を学んでいきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(8)
質問と回答
(20)
#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 マスクとモーダルのスタイルを整えよう
fixed と absolute の使い分けについて教えてください
2023年11月28日
position を設定すると z-index も設定され、レイヤーが重なっていくという理解で良いのでしょうか?
2023年10月2日
section 内の p タグ内を「hello」とすると、モーダルウィドウ内からはみ出てしまいます。
2023年6月22日
position: absolute; のオフでモーダルウィンドウが mask に隠れるのはなぜですか?
2023年4月30日
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 要素を取得しよう
getElementById では要素取得できましたが、querySelector ではうまく動作しない理由はなぜですか?
2023年8月10日
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 モーダルにアニメーションをつけよう
html では記述した順番が上の方が、背面に表示されるのでしょうか?
2024年3月8日
モーダルが消えるときにアニメーションさせずにパッと消すことはできますか?
2022年6月5日
次におすすめのレッスン
JavaScriptでハンバーガーメニューを作ろう
(全13回)
PREMIUM
PREMIUM
0%
JavaScriptでアコーディオンUIを作ろう
(全9回)
PREMIUM
PREMIUM
0%
JavaScriptでタブメニューを作ろう
(全10回)
PREMIUM
PREMIUM
0%
リリース情報(note)
今週はVS Codeに対応した『JavaScriptでモーダルウィンドウを作ろう』をリリースしました。
詳細情報
最終更新日
2020年3月25日
バージョン情報
Chrome80 / Visual Studio Code 1.42.1