ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/02/02
NEW
週刊ドットインストール(2023/02/02号)を更新しました!
PREMIUM
JavaScriptで三択クイズを作ろう
シンプルな三択クイズを作りながらJavaScriptのDOM操作についての理解を深めていきます。
0%
動画レッスン一覧
(14)
未完了
#01 三択クイズを作ってみよう
(02:14)
無料公開中
完成版の確認
作業用フォルダの設定
index.htmlの作成
未完了
#02 HTMLのマークアップをしよう
(02:20)
無料公開中
index.htmlのマークアップ
要素の確認
style.cssの作成
文字コードの指定
未完了
#03 CSSでスタイリングをしよう
(02:45)
無料公開中
mainのスタイリング
h1のスタイリング
未完了
#04 全体のスタイルを整えよう
(02:42)
cursor
.correctクラス
.wrongクラス
::after疑似要素
未完了
#05 JavaScriptの実装をはじめよう
(02:00)
main.jsの作成
クイズデータの用意
未完了
#06 section要素を生成しよう
(02:36)
createElement('section')
appendChild()
開発者ツールで確認
未完了
#07 h2要素を生成しよう
(01:34)
createElement('h2')
配列へのアクセス
textContent
appendChild()
未完了
#08 ul要素を生成しよう
(02:16)
createElement('ul')
appendChild()の動作を復習
未完了
#09 li要素を生成しよう
(02:30)
createElement('li')
appendChild()の動作を復習
未完了
#10 イベントリスナーを追加しよう
(02:40)
addEventListener()
未完了
#11 正解・不正解を判定しよう
(01:27)
正解・不正解の判定
classList.add()
classList.remove()
未完了
#12 問題の数を増やしてみよう
(02:04)
配列の入れ子
クイズの描画
未完了
#13 forEach()で処理でまとめよう
(01:45)
forEach()
未完了
#14 完成したアプリを振り返ろう
(01:04)
これまでのまとめ
アプリ開発の振り返り
ギャラリー
このレッスンについて
最終更新日
2022年12月13日
バージョン情報
Chrome 108 / Visual Studio Code 1.73.1
関連キーワード
(6)
基礎講座
(360)
初心者向け
(359)
HTML
(110)
CSS
(111)
JavaScript
(142)
ミニプログラム
(141)
このレッスンを共有する