5pt
体験：実行してみよう
コードはすでに入っています。そのまま「実行」ボタンを押して、プレビューに「Hello World」と表示されることを確認してください。演習の流れを体験する問題です。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
演習問題
コードを書いて、すぐに結果を確認できます。ヒント・解答あり。
進め方: ① 解説を読む → ② 演習する。解説を飛ばすと詰まる。各ステップの解説を読んでから、該当カテゴリの演習に進むこと。
📋 チートシート（タグ・CSS・JS 一覧）
HTMLの基本タグ
- <h1> 〜 <h6>
- 見出し。h1が最も大きく、h6が最小。1ページにh1は1つ推奨。例:
<h1>タイトル</h1> - <p>
- 段落。文章の1ブロックを表す。例:
<p>これは段落です。</p> - <ul> と <li>
- 順序なしリスト。ulが外側、liが各項目。例:
<ul><li>項目1</li><li>項目2</li></ul> - <ol> と <li>
- 順序付きリスト。番号が自動で付く。例:
<ol><li>手順1</li><li>手順2</li></ol> - <a href="...">
- リンク。hrefに飛び先URL、タグの間が表示テキスト。例:
<a href="https://example.com">例</a> - <img src="..." alt="...">
- 画像。srcに画像URL、altに説明（必須）。自己閉じタグ。例:
<img src="画像のURL" alt="説明"> - <strong> / <em>
- strongは強い強調（太字）、emは軽い強調（斜体）。例:
<p>これは<strong>重要</strong>です。</p> - <div> / <span>
- divはブロック要素（縦に積む）、spanはインライン（横に並ぶ）。意味はなくグループ化・装飾用。
CSSの基本
color: blue; 文字色background-color: #f5f5f5; 背景色margin: 16px; 外側の余白padding: 16px; 内側の余白font-size: 1.2rem; フォントサイズtext-align: center; 中央寄せJavaScriptの基本
console.log('Hello'); コンソールに出力const name = '太郎'; 変数宣言function greet() { return 'こんにちは'; } 関数定義エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
25pt
イベントデリゲーション
idが「list」の要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
25pt
fetchで取得
https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
30pt
配列データの表示
https://jsonplaceholder.typicode.com/posts から取得し、先頭3件のtitleをconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。