体験：実行してみよう
コードはすでに入っています。そのまま「実行」ボタンを押して、プレビューに「Hello World」と表示されることを確認してください。演習の流れを体験する問題です。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Exercises
Write code and see the result immediately. Hints and answers included.
How to proceed: ① Read the guide → ② Do the exercise. Skipping guides leads to getting stuck. Read each step's guide before doing that category's exercises.
📋 Cheat Sheet (HTML / CSS / JS reference)
HTML
- <h1> 〜 <h6>
- Headings.
- <p>
- Paragraphs.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
25pt
イベントデリゲーション
idが「list」の要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
25pt
fetchで取得
https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
30pt
配列データの表示
https://jsonplaceholder.typicode.com/posts から取得し、先頭3件のtitleをconsole.logで出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
20pt
ローカルストレージ保存
key「name」でvalue「太郎」をlocalStorageに保存し、読み取ってconsole.logで出力してください。
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.
Click error to highlight line. ✕=error ⚠=warning ›=log.