HTML

HTML実践編② スペック表を作ってみよう！

今回は、HTMLだけを使って「シンプルな商品紹介ページ」を作ってみましょう。

この実践を通じて、商品の情報を整理するためのタグや、見やすいレイアウトを作る方法を学べます。

今回学べるHTMLタグ

  • <h1>：ページの大きな見出し（商品タイトルなど）
  • <p>：商品の説明文を表示するタグ
  • <strong>：価格などの強調表示に使うタグ
  • <table>, <tr>, <td>：商品のスペックを整理する表の作成
  • <ul>, <li>：商品の特徴をリスト形式で表示
  • <a>：購入ボタン風のリンクを作成

最初のHTMLファイルを用意しよう

まずは、商品紹介ページの土台となるHTMLファイルを作成します。
以下のコードをVS Codeにコピーして「product.html」という名前で保存してください。

基本のHTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品紹介ページ</title>
</head>
<body>

  <h1>おすすめの商品</h1>

</body>
</html>

保存方法（VS Code）

  1. VS Codeを開く
  2. 新しいファイルを作成
  3. 上のコードを貼り付け、「product.html」として保存
  4. 保存したファイルをダブルクリックすると、ブラウザで表示できます！

ステップごとにページを作成していこう

ここからは、先ほどの基本ファイルに少しずつ情報を追加して、商品紹介ページを完成させます。

ステップ1：商品情報を入力しよう

使用するタグ

  • <h1>：商品タイトルを表示するためのタグ
  • <p>：商品の説明文を表示するためのタグ
  • <strong>：価格を強調するためのタグ

指示内容

  • 商品名： スーパーワイヤレスイヤホン
  • 商品説明： 高音質でクリアなサウンドが楽しめる、最新のワイヤレスイヤホン
  • 価格： 9,800円（税込）
（分からなかったクリック！）コードのヒントを表示する 
<h1>スーパーワイヤレスイヤホン</h1>
<p>高音質でクリアなサウンドが楽しめる、最新のワイヤレスイヤホンです。</p>
<p>価格: <strong>9,800円（税込）</strong></p>
（分からなかったクリック！）追加する場所のヒント

<h1>おすすめの商品</h1> のすぐ下に追加してください。

ステップ2：スペック表で情報を整理しよう

使用するタグ

  • <h2>：スペックの見出しを表示するタグ
  • <table>：表全体を作るためのタグ
  • <tr>：表の行を作るためのタグ
  • <td>：表のセル（データ部分）を作るためのタグ

指示内容

  • 連続再生時間： 8時間
  • 充電時間： 1.5時間
  • 防水機能： IPX5
（分からなかったクリック！）コードのヒントを表示する 
<h2>製品スペック</h2>
<table border="1">
  <tr>
    <td>連続再生時間</td>
    <td>8時間</td>
  </tr>
  <tr>
    <td>充電時間</td>
    <td>1.5時間</td>
  </tr>
  <tr>
    <td>防水機能</td>
    <td>IPX5</td>
  </tr>
</table>
（分からなかったクリック！）追加する場所のヒント

ステップ1で追加した「価格」の下に追加してください。

ステップ3：商品の特徴と購入リンクを追加しよう

使用するタグ

  • <h2>：特徴と購入リンクの見出しを表示するタグ
  • <ul>：特徴をリスト形式で表示するためのタグ
  • <li>：リスト内の各項目を表示するためのタグ
  • <a>：購入リンクを作成するためのタグ

指示内容

  • 主な特徴：
    • 高音質でクリアなサウンド
    • 長時間バッテリー
    • 防水仕様でアウトドアにも最適
  • 購入リンク： https://example.com
（分からなかったクリック！）コードのヒントを表示する 
<h2>主な特徴</h2>
<ul>
  <li>高音質でクリアなサウンド</li>
  <li>長時間バッテリー</li>
  <li>防水仕様でアウトドアにも最適</li>
</ul>

<h2>ご購入はこちら</h2>
<a href="https://example.com" target="_blank">今すぐ購入する</a>
（分からなかったクリック！）追加する場所のヒント

スペック表の下に追加してください。

完成版のHTMLファイル

完成版のサンプルコードを記載します！

答え合わせに使ってみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品紹介ページ</title>
</head>
<body>

  <h1>スーパーワイヤレスイヤホン</h1>
  <p>高音質でクリアなサウンドが楽しめる、最新のワイヤレスイヤホンです。</p>
  <p>価格: <strong>9,800円（税込）</strong></p>

  <h2>製品スペック</h2>
  <table border="1">
    <tr>
      <td>連続再生時間</td>
      <td>8時間</td>
    </tr>
    <tr>
      <td>充電時間</td>
      <td>1.5時間</td>
    </tr>
    <tr>
      <td>防水機能</td>
      <td>IPX5</td>
    </tr>
  </table>

  <h2>主な特徴</h2>
  <ul>
    <li>高音質でクリアなサウンド</li>
    <li>長時間バッテリー</li>
    <li>防水仕様でアウトドアにも最適</li>
  </ul>

  <h2>ご購入はこちら</h2>
  <a href="https://example.com" target="_blank">今すぐ購入する</a>

</body>
</html>

まとめ

基本のHTMLファイルをベースに、少しずつ内容を追加することでシンプルな商品紹介ページが完成しました！

<h1>, <p>, <strong>, <table>, <ul>, <li>, <a> など、HTMLの基本タグを組み合わせるだけで、ここまで作れることが実感できたと思います。

商品の情報を自分なりにアレンジして、オリジナルの商品紹介ページを作ってみましょう！ 🚀

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。