@Toshiki_Aoki \n`, checks: [ { desc: "DOCTYPE宣言がある", test: (doc, code) => //i.test(code) }, { desc: " タグがある", test: (doc, code) => doc.querySelector('html') !== null }, { desc: " タグがある", test: (doc, code) => doc.querySelector('head') !== null }, { desc: " タグがある", test: (doc, code) => doc.querySelector('body') !== null }, { desc: "

に「はじめてのHTML」と書かれている", test: (doc) => { const h1 = doc.querySelector('h1'); return h1 && h1.textContent.includes('はじめてのHTML'); }} ] }, { id: 2, title: "見出しと段落", goal: "見出しタグ（h1〜h3）と段落タグ（p）を使い分けられるようになる", instructions: `

見出しタグ

• <h1> … 最も大きな見出し（ページに1つ）
• <h2> … 中見出し
• <h3> … 小見出し

数字が小さいほど重要な見出しです。

段落タグ

<p> タグで文章のまとまり（段落）を表します。

課題

自己紹介ページを作りましょう：

• <h1> で名前を書く
• <h2> で「自己紹介」と書く
• <p> で自己紹介文を書く
• <h2> で「趣味」と書く
• <p> で趣味の説明を書く

`, hint: `見出しと段落を交互に使いましょう。

<h1>山田太郎</h1>
<h2>自己紹介</h2>
<p>Webデザインを勉強中です。</p>
のように書きます。`, initialCode: `\n\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n`, checks: [ { desc: "

タグがある（名前）", test: (doc) => { const h1 = doc.querySelector('h1'); return h1 && h1.textContent.trim().length > 0; }}, { desc: "

タグが2つ以上ある", test: (doc) => doc.querySelectorAll('h2').length >= 2 }, { desc: "

タグが2つ以上ある", test: (doc) => doc.querySelectorAll('p').length >= 2 }, { desc: "「自己紹介」の見出しがある", test: (doc) => { const h2s = doc.querySelectorAll('h2'); return [...h2s].some(h => h.textContent.includes('自己紹介')); }}, { desc: "「趣味」の見出しがある", test: (doc) => { const h2s = doc.querySelectorAll('h2'); return [...h2s].some(h => h.textContent.includes('趣味')); }} ] }, { id: 3, title: "リスト", goal: "順序なしリスト（ul）と順序ありリスト（ol）を作れるようになる", instructions: `

2種類のリスト

• <ul> … 順序なしリスト（・で表示）
• <ol> … 順序ありリスト（1. 2. 3. で表示）
• <li> … リストの各項目

書き方

<ul> または <ol> の中に <li> を並べます。

課題

以下の2つのリストを作ってください：

• <h2> で「好きな食べ物」→ <ul> で3つ以上
• <h2> で「朝のルーティン」→ <ol> で3つ以上

`, hint: `<ul>（順序なし）と <ol>（順序あり）の違いに注意！

<ul>
　<li>カレー</li>
　<li>ラーメン</li>
</ul>`, initialCode: `\n\n\n \n \n\n

わたしのリスト

\n\n \n \n\n \n \n\n \n`, checks: [ { desc: "

タグがある", test: (doc) => doc.querySelector('ul') !== null }, { desc: "
タグがある", test: (doc) => doc.querySelector('ol') !== null }, { desc: "
1. タグが合計6つ以上ある", test: (doc) => doc.querySelectorAll('li').length >= 6 }, { desc: "「好きな食べ物」の見出しがある", test: (doc) => { const h2s = doc.querySelectorAll('h2'); return [...h2s].some(h => h.textContent.includes('好きな食べ物')); }}, { desc: "「朝のルーティン」の見出しがある", test: (doc) => { const h2s = doc.querySelectorAll('h2'); return [...h2s].some(h => h.textContent.includes('朝のルーティン')); }} ] }, { id: 4, title: "リンク", goal: "aタグを使ってリンクを作成できるようになる", instructions: `

   リンクタグ

   <a> タグで別のページへのリンクを作れます。

   • href 属性 … リンク先のURL
   • target="_blank" … 新しいタブで開く

   書き方の例

   <a href="https://example.com">テキスト</a>

   課題

   おすすめサイトのリンク集を作りましょう：

   • <h1> で「おすすめリンク集」と書く
   • <ul> の中に <li> を3つ作る
   • 各 <li> の中に <a> タグでリンクを作る
   `, hint: `リストの中にリンクを入れます：
   
   <ul>
　<li><a href="https://google.com">Google</a></li>
</ul>

href にはURLを、タグの中にはリンクの表示テキストを書きます。`, initialCode: `\n\n\n \n \n\n \n \n\n \n \n\n \n`, checks: [ { desc: "

   に「おすすめリンク集」と書かれている", test: (doc) => { const h1 = doc.querySelector('h1'); return h1 && h1.textContent.includes('おすすめリンク集'); }}, { desc: " タグが3つ以上ある", test: (doc) => doc.querySelectorAll('a').length >= 3 }, { desc: " タグに href 属性がある", test: (doc) => { const links = doc.querySelectorAll('a'); return links.length > 0 && [...links].every(a => a.hasAttribute('href') && a.getAttribute('href').length > 0); }}, { desc: "

   と
   • でリスト構造になっている", test: (doc) => { const ul = doc.querySelector('ul'); return ul && ul.querySelectorAll('li').length >= 3; }} ] }, { id: 5, title: "画像", goal: "imgタグで画像を表示し、alt属性を適切に設定できるようになる", instructions: `

     画像タグ

     <img> タグで画像を表示できます。閉じタグは不要です。

     • src 属性 … 画像のURL
     • alt 属性 … 画像の説明文（重要！）
     • width 属性 … 横幅の指定

     alt属性はなぜ必要？

     画像が表示できないときや、視覚障害の方がスクリーンリーダーを使う際に読み上げられます。必ず設定しましょう。

     課題

     プロフィールカードを作りましょう：

     • <img> で画像を表示（下記URLを使用）
     • alt 属性に説明を入れる
     • width を "200" に設定
     • <h2> で名前、<p> で紹介文を書く

     画像URL：
     https://via.placeholder.com/200

     `, hint: `<img> タグは閉じタグが要りません。
     
     <img src="https://via.placeholder.com/200" alt="プロフィール写真" width="200">
     
     この下に名前と紹介文を書きましょう。`, initialCode: `\n\n\n \n \n\n

     プロフィールカード

     \n\n \n \n\n \n \n\n \n \n\n \n`, checks: [ { desc: " タグがある", test: (doc) => doc.querySelector('img') !== null }, { desc: "src 属性が設定されている", test: (doc) => { const img = doc.querySelector('img'); return img && img.hasAttribute('src') && img.getAttribute('src').length > 0; }}, { desc: "alt 属性が設定されている", test: (doc) => { const img = doc.querySelector('img'); return img && img.hasAttribute('alt') && img.getAttribute('alt').length > 0; }}, { desc: "width が設定されている", test: (doc) => { const img = doc.querySelector('img'); return img && img.hasAttribute('width'); }}, { desc: "

     で名前が書かれている", test: (doc) => { const h2 = doc.querySelector('h2'); return h2 && h2.textContent.trim().length > 0; }}, { desc: "

     で紹介文が書かれている", test: (doc) => { const ps = doc.querySelectorAll('body > p, body > * p'); return ps.length >= 1 && [...ps].some(p => p.textContent.trim().length > 0); }} ] }, { id: 6, title: "テーブル", goal: "table, tr, th, td タグを使って表（テーブル）を作れるようになる", instructions: `

     テーブルの構造

     • <table> … 表全体を囲む
     • <tr> … 1行（Table Row）
     • <th> … 見出しセル（太字・中央揃え）
     • <td> … データセル

     課題

     1週間のスケジュール表を作りましょう：

     • 1行目: <th> で「曜日」「予定」の見出し
     • 2行目以降: <td> で曜日と予定を3行以上
     • <table> に border="1" を付ける

     `, hint: `テーブルの基本構造：
     
     <table border="1">
　<tr>
　　<th>曜日</th>
　　<th>予定</th>
　</tr>
　<tr>
　　<td>月曜</td>
　　<td>デザイン勉強</td>
　</tr>
</table>`, initialCode: `\n\n\n \n \n\n

     今週のスケジュール

     \n\n \n \n \n \n\n \n`, checks: [ { desc: " タグがある", test: (doc) => doc.querySelector('table') !== null }, { desc: " タグが4つ以上ある（見出し+3行）", test: (doc) => doc.querySelectorAll('tr').length >= 4 }, { desc: "

     タグが2つ以上ある（見出し行）", test: (doc) => doc.querySelectorAll('th').length >= 2 }, { desc: "

     タグが6つ以上ある", test: (doc) => doc.querySelectorAll('td').length >= 6 }, { desc: "border 属性が設定されている", test: (doc) => { const t = doc.querySelector('table'); return t && t.hasAttribute('border'); }} ] }, { id: 7, title: "フォーム（基礎）", goal: "form, input, label, button タグで基本的なフォームを作れるようになる", instructions: ` フォームの基本タグ <form> … フォーム全体を囲む <label> … 入力欄の説明ラベル <input> … テキスト入力欄 <button> … 送信ボタン inputのtype属性 type="text" … テキスト入力 type="email" … メールアドレス入力 課題 お問い合わせフォームを作りましょう： 「お名前」のラベル + テキスト入力欄 「メールアドレス」のラベル + メール入力欄 「送信」ボタン `, hint: `<form> の中に label と input のセットを並べます： <form> 　<label>お名前</label> 　<input type="text"> 　<br> 　… 　<button>送信</button> </form>`, initialCode: `\n\n\n \n \n\n お問い合わせフォーム \n\n \n \n \n \n\n \n \n\n \n \n \n\n \n`, checks: [ { desc: " タグがある", test: (doc) => doc.querySelector('form') !== null }, { desc: " タグが2つ以上ある", test: (doc) => doc.querySelectorAll('label').length >= 2 }, { desc: "type=\"text\" の input がある", test: (doc) => doc.querySelector('input[type="text"]') !== null }, { desc: "type=\"email\" の input がある", test: (doc) => doc.querySelector('input[type="email"]') !== null }, { desc: " タグがある", test: (doc) => doc.querySelector('button') !== null } ] }, { id: 8, title: "フォーム（応用）", goal: "select, textarea, radio, checkbox など多様なフォーム要素を使えるようになる", instructions: ` 応用フォーム要素 <select> + <option> … ドロップダウン <textarea> … 複数行テキスト type="radio" … 単一選択（同じnameで1つだけ） type="checkbox" … 複数選択 課題 アンケートフォームを作りましょう： <select> で年齢層を選択（3つ以上の選択肢） type="radio" で満足度を選択 type="checkbox" で興味のある分野を選択 <textarea> で自由記述欄 送信ボタン `, hint: `ラジオボタンは name 属性を同じにします： <input type="radio" name="satisfaction"> 良い <input type="radio" name="satisfaction"> 普通 チェックボックスは複数選択可能： <input type="checkbox"> デザイン <input type="checkbox"> コーディング`, initialCode: `\n\n\n \n \n\n アンケートフォーム \n\n \n \n 年齢層：\n \n \n\n \n 満足度： \n \n \n\n \n 興味のある分野： \n \n \n\n \n ご意見： \n \n \n\n \n \n \n\n \n`, checks: [ { desc: " タグがある", test: (doc) => doc.querySelector('select') !== null }, { desc: " タグが3つ以上ある", test: (doc) => doc.querySelectorAll('option').length >= 3 }, { desc: "type=\"radio\" の input がある", test: (doc) => doc.querySelector('input[type="radio"]') !== null }, { desc: "type=\"checkbox\" の input がある", test: (doc) => doc.querySelector('input[type="checkbox"]') !== null }, { desc: " タグがある", test: (doc) => doc.querySelector('textarea') !== null }, { desc: "<button> タグがある", test: (doc) => doc.querySelector('button') !== null } ] }, { id: 9, title: "セマンティックHTML", goal: "header, nav, main, section, footer などの意味のあるタグでページ構造を組み立てられるようになる", instructions: ` <div class="instruction-section"> <h3>セマンティックタグとは？</h3> <p>ページの構造に <strong>意味（セマンティクス）</strong> を持たせるタグです。SEOやアクセシビリティに重要です。</p> </div> <div class="instruction-section"> <h3>主なタグ</h3> <ul> <li><code><header></code> … ページのヘッダー部分</li> <li><code><nav></code> … ナビゲーション</li> <li><code><main></code> … メインコンテンツ</li> <li><code><section></code> … セクション区切り</li> <li><code><footer></code> … フッター部分</li> </ul> </div> <div class="instruction-section"> <h3>課題</h3> <p>ポートフォリオサイトの構造を作りましょう：</p> <ul> <li><code><header></code> の中に <code><nav></code> でナビメニュー</li> <li><code><main></code> の中に <code><section></code> を2つ以上</li> <li><code><footer></code> にコピーライト文</li> </ul> </div> `, hint: `ページ全体の構造イメージ：<br><br><code><header></code><br>　<code><nav></code> ナビゲーション <code></nav></code><br><code></header></code><br><code><main></code><br>　<code><section></code> セクション1 <code></section></code><br>　<code><section></code> セクション2 <code></section></code><br><code></main></code><br><code><footer></code> © 2024 <code></footer></code>`, initialCode: `<!DOCTYPE html>\n<html>\n<head>\n <title>ポートフォリオ</title>\n<meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="7Dxt4d8-GHbtTE2rCDKMGtIu0QRV8tydtmYyhHHgF8S8vJhMsvNpjm4wE8B9qk4bvd8VU8PVIpcBUm0k4r5nCw" /><meta content="" name="routing-root-path" /><meta content="media" name="site-name" /><meta content="ja" name="i18n-default-locale" /><meta content="ja" name="i18n-locale" /></head>\n<body>\n\n <!-- header の中に nav でナビゲーションを作ろう -->\n \n\n <!-- main の中に section を2つ以上作ろう -->\n \n\n <!-- footer にコピーライト文を書こう -->\n \n\n<svg width="0" height="0" style="position:absolute" aria-hidden="true"><symbol id="ck-icon-arrow-down" viewBox="0 0 1792 1792"><path d="M1675 832q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z" /></symbol><symbol id="ck-icon-arrow-up" viewBox="0 0 1792 1792"><path d="M1675 971q0 51-37 90l-75 75q-38 38-91 38-54 0-90-38l-294-293v704q0 52-37.5 84.5t-90.5 32.5h-128q-53 0-90.5-32.5t-37.5-84.5v-704l-294 293q-36 38-90 38t-90-38l-75-75q-38-38-38-90 0-53 38-91l651-651q35-37 90-37 54 0 91 37l651 651q37 39 37 91z" /></symbol><symbol id="ck-icon-calendar" viewBox="0 0 1792 1792"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z" /></symbol><symbol id="ck-icon-chevron-left" viewBox="0 0 1792 1792"><path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z" /></symbol><symbol id="ck-icon-chevron-right" viewBox="0 0 1792 1792"><path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z" /></symbol><symbol id="ck-icon-clock-o" viewBox="0 0 1792 1792"><path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" /></symbol><symbol id="ck-icon-trash" viewBox="0 0 1792 1792"><path d="M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z" /></symbol><symbol id="ck-icon-undo" viewBox="0 0 1792 1792"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5t-264-204.5q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5q-98 0-188 35.5t-160 101.5l137 138q31 30 14 69-17 40-59 40h-448q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5t284.5-55.5q156 0 298 61t245 164 164 245 61 298z" /></symbol></svg><script async="async" defer="defer" nonce="6rIJoVpBKspnNg/MNsTbmw==" src="//www.instagram.com/embed.js"></script> <!--Clipkit(R) v15.6.1-20260806 Copyright (C) 2026 VECTOR Inc.--> </body>\n</html>`, checks: [ { desc: "<header> タグがある", test: (doc) => doc.querySelector('header') !== null }, { desc: "<nav> タグがある", test: (doc) => doc.querySelector('nav') !== null }, { desc: "<main> タグがある", test: (doc) => doc.querySelector('main') !== null }, { desc: "<section> タグが2つ以上ある", test: (doc) => doc.querySelectorAll('section').length >= 2 }, { desc: "<footer> タグがある", test: (doc) => doc.querySelector('footer') !== null }, { desc: "nav が header の中にある", test: (doc) => { const h = doc.querySelector('header'); return h && h.querySelector('nav') !== null; }}, { desc: "section が main の中にある", test: (doc) => { const m = doc.querySelector('main'); return m && m.querySelectorAll('section').length >= 2; }} ] }, { id: 10, title: "総合課題：カフェサイト", goal: "これまで学んだ全てのHTMLタグを使って、カフェのWebサイトを作れるようになる", instructions: ` <div class="instruction-section"> <h3>総合課題</h3> <p>これまで学んだタグを全て使って、<strong>カフェのWebサイト</strong> のHTMLを作りましょう！</p> </div> <div class="instruction-section"> <h3>必要な要素</h3> <ul> <li><code><header></code> + <code><nav></code> でヘッダーとナビ</li> <li><code><main></code> でメインコンテンツ</li> <li><code><h1></code>〜<code><h2></code> で見出し</li> <li><code><p></code> でお店の紹介文</li> <li><code><img></code> で画像（alt属性付き）</li> <li><code><ul></code> または <code><ol></code> でメニューリスト</li> <li><code><table></code> で営業時間の表</li> <li><code><form></code> で予約フォーム（名前・メール・ボタン）</li> <li><code><footer></code> でフッター</li> </ul> </div> <div class="instruction-section"> <h3>自由に作ろう！</h3> <p>内容やテキストは自由です。上の要素が全て含まれていればOKです。</p> </div> `, hint: `全体の構成例：<br><br>1. <code><header></code> … 店名 + ナビ<br>2. <code><main></code><br>　・紹介セクション（h2 + p + img）<br>　・メニューセクション（h2 + ul）<br>　・営業時間セクション（h2 + table）<br>　・予約セクション（h2 + form）<br>3. <code><footer></code> … コピーライト`, initialCode: `<!DOCTYPE html>\n<html>\n<head>\n <title>Cafe WEBCOACH</title>\n<meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="7Dxt4d8-GHbtTE2rCDKMGtIu0QRV8tydtmYyhHHgF8S8vJhMsvNpjm4wE8B9qk4bvd8VU8PVIpcBUm0k4r5nCw" /><meta content="" name="routing-root-path" /><meta content="media" name="site-name" /><meta content="ja" name="i18n-default-locale" /><meta content="ja" name="i18n-locale" /></head>\n<body>\n\n <!-- ===== ヘッダー ===== -->\n <!-- header + nav でナビゲーション付きヘッダーを作ろう -->\n \n\n <!-- ===== メインコンテンツ ===== -->\n <main>\n\n <!-- お店の紹介セクション（h1 or h2 + p + img） -->\n \n\n <!-- メニューセクション（h2 + ul or ol） -->\n \n\n <!-- 営業時間セクション（h2 + table） -->\n \n\n <!-- 予約フォームセクション（h2 + form） -->\n \n\n </main>\n\n <!-- ===== フッター ===== -->\n \n\n<svg width="0" height="0" style="position:absolute" aria-hidden="true"><symbol id="ck-icon-arrow-down" viewBox="0 0 1792 1792"><path d="M1675 832q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z" /></symbol><symbol id="ck-icon-arrow-up" viewBox="0 0 1792 1792"><path d="M1675 971q0 51-37 90l-75 75q-38 38-91 38-54 0-90-38l-294-293v704q0 52-37.5 84.5t-90.5 32.5h-128q-53 0-90.5-32.5t-37.5-84.5v-704l-294 293q-36 38-90 38t-90-38l-75-75q-38-38-38-90 0-53 38-91l651-651q35-37 90-37 54 0 91 37l651 651q37 39 37 91z" /></symbol><symbol id="ck-icon-calendar" viewBox="0 0 1792 1792"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z" /></symbol><symbol id="ck-icon-chevron-left" viewBox="0 0 1792 1792"><path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z" /></symbol><symbol id="ck-icon-chevron-right" viewBox="0 0 1792 1792"><path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z" /></symbol><symbol id="ck-icon-clock-o" viewBox="0 0 1792 1792"><path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" /></symbol><symbol id="ck-icon-trash" viewBox="0 0 1792 1792"><path d="M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z" /></symbol><symbol id="ck-icon-undo" viewBox="0 0 1792 1792"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5t-264-204.5q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5q-98 0-188 35.5t-160 101.5l137 138q31 30 14 69-17 40-59 40h-448q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5t284.5-55.5q156 0 298 61t245 164 164 245 61 298z" /></symbol></svg><script async="async" defer="defer" nonce="6rIJoVpBKspnNg/MNsTbmw==" src="//www.instagram.com/embed.js"></script> <!--Clipkit(R) v15.6.1-20260806 Copyright (C) 2026 VECTOR Inc.--> </body>\n</html>`, checks: [ { desc: "<header> タグがある", test: (doc) => doc.querySelector('header') !== null }, { desc: "<nav> タグがある", test: (doc) => doc.querySelector('nav') !== null }, { desc: "<main> タグがある", test: (doc) => doc.querySelector('main') !== null }, { desc: "見出しタグ（h1 or h2）がある", test: (doc) => doc.querySelector('h1, h2') !== null }, { desc: "<p> タグで紹介文がある", test: (doc) => doc.querySelectorAll('p').length >= 1 }, { desc: "<img> タグがある（alt属性付き）", test: (doc) => { const img = doc.querySelector('img'); return img && img.hasAttribute('alt'); }}, { desc: "<ul> または <ol> のリストがある", test: (doc) => doc.querySelector('ul, ol') !== null }, { desc: "<table> タグがある", test: (doc) => doc.querySelector('table') !== null }, { desc: "<form> タグがある", test: (doc) => doc.querySelector('form') !== null }, { desc: "<input> タグがある", test: (doc) => doc.querySelector('input') !== null }, { desc: "<footer> タグがある", test: (doc) => doc.querySelector('footer') !== null } ] } ]; // ===== State ===== let currentLesson = 0; let completedLessons = new Set(); // Load progress from localStorage try { const saved = localStorage.getItem('webcoach_html_progress'); if (saved) completedLessons = new Set(JSON.parse(saved)); } catch(e) {} // ===== Init ===== function init() { // Populate lesson select const select = document.getElementById('lessonSelect'); lessons.forEach((l, i) => { const opt = document.createElement('option'); opt.value = i; opt.textContent = `${String(l.id).padStart(2,'0')}. ${l.title}`; select.appendChild(opt); }); loadLesson(0); } function loadLesson(index) { currentLesson = index; const lesson = lessons[index]; // Update select document.getElementById('lessonSelect').value = index; // Update instruction panel document.getElementById('lessonNumber').textContent = `Lesson ${String(lesson.id).padStart(2,'0')}`; document.getElementById('lessonTitle').textContent = lesson.title; document.getElementById('lessonGoal').textContent = lesson.goal; document.getElementById('instructionContent').innerHTML = lesson.instructions; // Reset hint document.getElementById('hintContent').innerHTML = lesson.hint; document.getElementById('hintContent').classList.remove('show'); // Load saved code or initial code const savedCode = getSavedCode(index); const editor = document.getElementById('codeEditor'); editor.value = savedCode || lesson.initialCode; // Update preview updatePreview(); updateLineNumbers(); // Update navigation buttons document.getElementById('btnPrev').style.visibility = index === 0 ? 'hidden' : 'visible'; document.getElementById('btnNext').textContent = index === lessons.length - 1 ? '🎉 完了！' : '次へ →'; // Update progress updateProgress(); // Reset check button document.getElementById('btnCheck').classList.remove('success'); document.getElementById('btnCheck').textContent = '✓ 答え合わせ'; // Scroll instruction to top document.querySelector('.panel-instruction').scrollTop = 0; } // ===== Editor Functions ===== function onEditorInput() { updatePreview(); updateLineNumbers(); saveCode(); } function updatePreview() { const code = document.getElementById('codeEditor').value; const frame = document.getElementById('previewFrame'); frame.srcdoc = code; } function updateLineNumbers() { const editor = document.getElementById('codeEditor'); const lines = editor.value.split('\n').length; const nums = []; for (let i = 1; i <= lines; i++) nums.push(i); document.getElementById('lineNumbers').textContent = nums.join('\n'); } function syncScroll() { const editor = document.getElementById('codeEditor'); const lineNums = document.getElementById('lineNumbers'); lineNums.style.transform = `translateY(-${editor.scrollTop}px)`; } function handleTab(e) { if (e.key === 'Tab') { e.preventDefault(); const editor = e.target; const start = editor.selectionStart; const end = editor.selectionEnd; editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end); editor.selectionStart = editor.selectionEnd = start + 2; onEditorInput(); } } // ===== Code Persistence ===== function saveCode() { const code = document.getElementById('codeEditor').value; try { localStorage.setItem(`webcoach_html_code_${currentLesson}`, code); } catch(e) {} } function getSavedCode(index) { try { return localStorage.getItem(`webcoach_html_code_${index}`); } catch(e) { return null; } } // ===== Answer Check ===== function checkAnswer() { const code = document.getElementById('codeEditor').value; const lesson = lessons[currentLesson]; // Parse user code const parser = new DOMParser(); const doc = parser.parseFromString(code, 'text/html'); const results = lesson.checks.map(check => { let passed = false; try { passed = check.test(doc, code); } catch(e) {} return { desc: check.desc, passed }; }); const allPassed = results.every(r => r.passed); // Show modal showResultModal(allPassed, results); if (allPassed) { completedLessons.add(currentLesson); try { localStorage.setItem('webcoach_html_progress', JSON.stringify([...completedLessons])); } catch(e) {} updateProgress(); const btn = document.getElementById('btnCheck'); btn.classList.add('success'); btn.textContent = '✓ クリア！'; } } function showResultModal(success, results) { const overlay = document.getElementById('modalOverlay'); const icon = document.getElementById('modalIcon'); const title = document.getElementById('modalTitle'); const msg = document.getElementById('modalMessage'); const list = document.getElementById('feedbackList'); icon.className = 'modal-icon ' + (success ? 'success' : 'fail'); icon.textContent = success ? '🎉' : '🔍'; title.textContent = success ? 'クリア！' : 'もう少し！'; msg.textContent = success ? 'すべての条件を満たしました。素晴らしいです！' : '以下の条件を確認してみましょう。'; list.innerHTML = results.map(r => `<li class="${r.passed ? 'pass' : 'fail'}">${r.passed ? '✅' : '❌'} ${r.desc}</li>` ).join(''); overlay.classList.add('show'); } function closeModal(e) { if (e.target === document.getElementById('modalOverlay')) { document.getElementById('modalOverlay').classList.remove('show'); } } function closeModalBtn() { document.getElementById('modalOverlay').classList.remove('show'); } // ===== Navigation ===== function switchLesson(index) { loadLesson(parseInt(index)); } function prevLesson() { if (currentLesson > 0) loadLesson(currentLesson - 1); } function nextLesson() { if (currentLesson < lessons.length - 1) loadLesson(currentLesson + 1); } function resetCode() { const lesson = lessons[currentLesson]; document.getElementById('codeEditor').value = lesson.initialCode; onEditorInput(); document.getElementById('btnCheck').classList.remove('success'); document.getElementById('btnCheck').textContent = '✓ 答え合わせ'; } // ===== Progress ===== function updateProgress() { const total = lessons.length; const done = completedLessons.size; const pct = Math.round((done / total) * 100); document.getElementById('progressFill').style.width = pct + '%'; document.getElementById('progressText').textContent = `${done}/${total} 完了`; } // ===== Start ===== init(); </script> <svg width="0" height="0" style="position:absolute" aria-hidden="true"><symbol id="ck-icon-arrow-down" viewBox="0 0 1792 1792"><path d="M1675 832q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z" /></symbol><symbol id="ck-icon-arrow-up" viewBox="0 0 1792 1792"><path d="M1675 971q0 51-37 90l-75 75q-38 38-91 38-54 0-90-38l-294-293v704q0 52-37.5 84.5t-90.5 32.5h-128q-53 0-90.5-32.5t-37.5-84.5v-704l-294 293q-36 38-90 38t-90-38l-75-75q-38-38-38-90 0-53 38-91l651-651q35-37 90-37 54 0 91 37l651 651q37 39 37 91z" /></symbol><symbol id="ck-icon-calendar" viewBox="0 0 1792 1792"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z" /></symbol><symbol id="ck-icon-chevron-left" viewBox="0 0 1792 1792"><path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z" /></symbol><symbol id="ck-icon-chevron-right" viewBox="0 0 1792 1792"><path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z" /></symbol><symbol id="ck-icon-clock-o" viewBox="0 0 1792 1792"><path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" /></symbol><symbol id="ck-icon-trash" viewBox="0 0 1792 1792"><path d="M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z" /></symbol><symbol id="ck-icon-undo" viewBox="0 0 1792 1792"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5t-264-204.5q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5q-98 0-188 35.5t-160 101.5l137 138q31 30 14 69-17 40-59 40h-448q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5t284.5-55.5q156 0 298 61t245 164 164 245 61 298z" /></symbol></svg><script async="async" defer="defer" nonce="6rIJoVpBKspnNg/MNsTbmw==" src="//www.instagram.com/embed.js"></script> <!--Clipkit(R) v15.6.1-20260806 Copyright (C) 2026 VECTOR Inc.--> </body> </html></div></div> <div class="back-to-roadmap mb-4 text-center"></div> </div> </div> <div class="lightbox-modal" id="lightboxModal"> <img src="" alt=""> </div> <div id="modal" class="fixed-menu-modal"> <div class="fixed-menu-modal-content"> <div class="index mb-3" style="background-color: #FDF5E8;"> <div> <div class="fw-light">INDEX</div> <div class="h3">目次</div> </div> <div class="toc"></div> </div> <!-- ボタン類 --> <div id="fixed-menu_buttons" class="fixed-menu_buttons"></div> <div class="back-to-roadmap text-center"></div> </div> </div> <button id="toggleBtn" class="floating-btn"> <img id="iconOpen" src="/theme/webcoach/img/icons/fixed-menu_modal-open.svg" alt="メニューを開く"> <img id="iconClose" src="/theme/webcoach/img/icons/fixed-menu_modal-close.svg" alt="メニューを閉じる" style="display:none;"> </button> </div> </div> </div> <!-- <script src="https://cdn.clipkit.co/clipkit/javascripts/item-shopify-1.0.js?v=v15.6.1-20260806" async></script> -->