このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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)
- これまでのまとめ
- アプリ開発の振り返り
