好きなものランキングを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルの骨組みを作ろう

VS Codeで index.html を作り、HTMLの骨組みを書きましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>好きなものランキング</title>
  </head>
  <body>

  </body>
</html>
💡 ヒント
すべてのHTMLファイルに必要な骨組みです。

参考: HTML レッスン1

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>好きなものランキング</title>
  </head>
  <body>

  </body>
</html>
2

タイトルと導入文を書こう

<body> の中に、ランキングのタイトルと導入文を書きましょう。テーマは食べ物・ゲーム・音楽など何でもOKです。

<h1>🍜 好きな食べ物ランキング</h1>
<p>私が好きな食べ物を紹介します！</p>
💡 ヒント
<h1> でタイトル、<p> で導入文を書きます。

参考: HTML レッスン2

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h1>🍜 好きな食べ物ランキング</h1>
<p>私が好きな食べ物を紹介します！</p>
3

番号付きリストでベスト5を作ろう

<h2> で見出しを作り、<ol> と <li> で1位〜5位を書きましょう。

<h2>ベスト5</h2>
<ol>
  <li>ラーメン</li>
  <li>カレー</li>
  <li>寿司</li>
  <li>ピザ</li>
  <li>うどん</li>
</ol>
💡 ヒント
<ol> の中に <li> を5つ書きます。ol は ordered list（番号付きリスト）の略です。

参考: HTML レッスン4

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h2>ベスト5</h2>
<ol>
  <li>ラーメン</li>
  <li>カレー</li>
  <li>寿司</li>
  <li>ピザ</li>
  <li>うどん</li>
</ol>
4

比較表の見出し行を作ろう

ここからは自分で考えてみましょう！<table> タグで表を作り、最初の行に <th> で「順位」「食べ物」「おすすめ度」の見出しを書いてください。

💡 ヒント
<table> の中に <tr>（行）を作り、<th>（見出しセル）を並べます。

参考: HTML レッスン4

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h2>詳細比較</h2>
<table>
  <tr>
    <th>順位</th>
    <th>食べ物</th>
    <th>おすすめ度</th>
  </tr>
</table>
5

比較表のデータ行を追加しよう

<th> の行の下に、<tr> と <td> でデータ行を3つ追加してください。

💡 ヒント
<tr> の中に <td>（データセル）を並べます。上位3つ分の行を追加しましょう。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

  <tr>
    <td>1位</td>
    <td>ラーメン</td>
    <td>★★★★★</td>
  </tr>
  <tr>
    <td>2位</td>
    <td>カレー</td>
    <td>★★★★☆</td>
  </tr>
  <tr>
    <td>3位</td>
    <td>寿司</td>
    <td>★★★★☆</td>
  </tr>
6

ブラウザで確認しよう

ファイルを保存（Ctrl+S / Cmd+S）して、ブラウザで開いて確認しましょう。ランキングに番号がついていて、表が正しく表示されていれば完成です！

💡 ヒント
HTMLファイルをダブルクリックするとブラウザで開けます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

完成！ブラウザでランキングと比較表が表示されていればOKです。
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら