新規登録
ログイン
ダッシュボード
コース一覧
スキル図鑑
クイズ道場
へ戻る
実践レッスン
モーダルウィンドウを作ろう
モーダルウィンドウを作ろう
目安:2時間0分
スキル一覧
<button>
<div>
<p>
display: none
document.getElementById()
clickイベント
element.style
display: block
document.addEventListener()
position: fixed
top
left
transition
background-color
width
border
height
event.target
window.onclick
達成率：
0%
レッスンをはじめる
ボタンの設置
<button>
スキル
コーディング
モーダルウィンドウの基本構造を作成
<div>
<p>
コーディング
モーダルの非表示設定
display: none
スキル
コーディング
モーダルを開く動作を作成
document.getElementById()
clickイベント
element.style
display: block
スキル
コーディング
閉じるボタンの追加
<button>
コーディング
モーダルを閉じる動作の設定
document.getElementById()
document.addEventListener()
element.style
display: none
スキル
コーディング
モーダルのデザインを追加
position: fixed
top
left
transition
background-color
width
border
スキル
コーディング
モーダルの背景のスタイル指定
position: fixed
top
left
width
height
background-color
スキル
コーディング
モーダル以外をクリックで閉じる動作を追加
element.style
display: none
event.target
window.onclick
スキル
コーディング
クイズで振り返ろう
総復習クイズ
モーダルウィンドウを作ろう
15問
10分
