0Pricing
HTML for Kids · レッスン

HTML宝探し

HTMLを使って手がかりを解き、隠されたメッセージを見つけます

「HTML宝探し」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン2/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全2レッスンが含まれています。

宝探しを始めよう

HTML宝探し

HTML宝探しへようこそ！HTMLコードに隠された手がかりを解き、隠された宝物を見つけるのがあなたの使命です。各ステップを注意深く確認し、コードを変更して先へ進みましょう。

目標: 各課題を完了して宝物を見つけましょう！

HTML宝探し — イラスト1

宝の地図を準備する

ステップ1: 宝の地図を準備する

最初の手がかりはコメントの中に隠されています。HTMLコードを開いて手がかりを見つけましょう！

最初のHTMLコードはこちらです。

<!DOCTYPE html>
<html>
  <head>
    <title>Treasure Hunt</title>
  </head>
  <body>
    <h1>Welcome to the Treasure Hunt!</h1>
    <p>Follow the clues to find the treasure.</p>
    
    <!-- Clue 1: Add an image to this page with a description of "Treasure Map". -->
    
  </body>
</html>

宝の地図を追加する

ステップ2: 宝の地図を追加する

宝の地図を追加できましたか？例を紹介します。

<img src="treasure-map.jpg" alt="Treasure Map" />

道具を準備する

ステップ3: 道具を準備する

続けるには、宝探しに持っていく道具のリストを作成します。<ul>タグと<li>タグを使いましょう。

例:

<ul>
  <li>Compass</li>
  <li>Flashlight</li>
  <li>Map</li>
</ul>

さらに情報を探す

ステップ4: さらに情報を探す

<a>タグを使って、宝探しに関するWebサイトへのリンクを追加します。

例:

<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>

最後のチャレンジ

ステップ5: 最後のチャレンジ

宝物はもうすぐあなたのものです！宝物を開放するには、クリックすると隠されたメッセージが表示されるボタンを作成します。

次の例を参考にしてください。

<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
  Reveal the Treasure
</button>

ページをテストする

ステップ6: ページをテストする

すべての要素を追加したら、ページをテストしましょう。次の点を確認してください。

  • 画像が正しく表示される。
  • 道具のリストが表示される。
  • リンクをクリックすると、新しいタブでWebサイトが開く。
  • ボタンをクリックすると、宝物のメッセージが表示される。

すべて正常に動作したら、おめでとうございます。宝探しの完了です！

最後の宝物

完成したページは、次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <title>Treasure Hunt</title>
  </head>
  <body>
    <h1>Welcome to the Treasure Hunt!</h1>
    <p>Follow the clues to find the treasure.</p>
    
    <!-- Step 1: Added the treasure map -->
    <img src="treasure-map.jpg" alt="Treasure Map" />
    
    <!-- Step 2: Listed tools for treasure hunting -->
    <h2>My Treasure Hunting Tools</h2>
    <ul>
      <li>Compass</li>
      <li>Flashlight</li>
      <li>Map</li>
    </ul>
    
    <!-- Step 3: Added a useful link -->
    <h2>Learn More</h2>
    <a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
    
    <!-- Step 4: Added the hidden treasure -->
    <h2>Your Treasure</h2>
    <p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
    <button onclick="document.getElementById('hidden-message').style.display='block';">
      Reveal the Treasure
    </button>
  </body>
</html>

宝探しのおさらい

Great Job!

Congratulations! You’ve completed the HTML Treasure Hunt. You’ve practiced working with images, lists, links, and buttons—all essential elements of web development. Keep exploring and creating amazing projects!

HTML宝探し — イラスト10

よくある質問

「HTML宝探し」レッスンは無料ですか？

はい。「HTML宝探し」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全2レッスンが含まれています。

「HTML宝探し」で何を学びますか？

HTMLを使って手がかりを解き、隠されたメッセージを見つけます ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/2です。

「HTML宝探し」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. コードを書きながら学ぶ：簡単なWebページを作成する
  2. HTML宝探し
← HTML for Kidsに戻る