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 'こんにちは'; } 関数定義エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
配列のmap
numbersの各要素を2倍した新しい配列を作り、console.logで出力してください。numbersは[1,2,3]。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
三項演算子
scoreが60以上なら「合格」、未満なら「不合格」を変数resultに代入し、console.logで出力。scoreは70。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
25pt
イベントデリゲーション
idが「list」の要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
25pt
fetchで取得
https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
25pt
エラーハンドリング
fetchで取得し、res.okがfalseなら「エラー」とconsole.log、trueならデータのtitleを出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
30pt
配列データの表示
https://jsonplaceholder.typicode.com/posts から取得し、先頭3件のtitleをconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
20pt
ローカルストレージ保存
key「name」でvalue「太郎」をlocalStorageに保存し、読み取ってconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
カテゴリ別ガイド
環境構築
ブラウザだけでHTML/CSS/JSを実行する体験から始め、ローカル開発のイメージを掴みます。
このカテゴリで身につくスキル
- Hello World
- エディタ操作
- プレビュー確認
演習数: 6
HTML基礎
見出し・段落・リスト・リンク・画像など、Webページの骨格を作るタグを演習で定着させます。
このカテゴリで身につくスキル
- h1-h6
- p / ul / ol
- a / img
- セマンティックHTML
演習数: 10
CSS基礎
色・余白・フォント・セレクタで見た目を整える力を身につけます。
このカテゴリで身につくスキル
- color / background
- margin / padding
- class selector
- font-size
演習数: 10
JavaScript基礎
変数・関数・配列・条件分岐でロジックの読み書きを練習します。
このカテゴリで身につくスキル
- const / let
- function
- array methods
- if / for
演習数: 15
HTML応用
フォーム、label/input、tableなどユーザー入力とデータ表示の基礎を学びます。
このカテゴリで身につくスキル
- form
- label + input
- table
- アクセシビリティ
演習数: 5
CSSレイアウト
FlexboxとGridでカードUI・ナビ・中央寄せなど実務レイアウトを再現します。
このカテゴリで身につくスキル
- display:flex
- justify / align
- CSS Grid
- gap / responsive
演習数: 8
DOM操作
getElementById、イベント、動的要素追加でページを操作します。
このカテゴリで身につくスキル
- getElementById
- addEventListener
- createElement
- textContent
演習数: 10
API連携
fetchとJSONで外部データを取得し、画面に反映する流れを体験します。
このカテゴリで身につくスキル
- fetch
- JSON.parse
- error handling
- CORS awareness
演習数: 5
実践プロジェクト
TODO・カウンター・タイマーなど小さなアプリを完成させ、ポートフォリオの核にします。
このカテゴリで身につくスキル
- state
- localStorage
- UI events
- end-to-end flow
演習数: 5