【ソースコード】初級編：ECサイト／商品ページ

index.html

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>TOTALLY</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap">
  </head>

  <body>
    <header id="header">
      <div class="site-title">
        <a href="index.html"><img src="img/logo.svg" alt="TOTALLY"></a>
      </div>

      <nav class="wrapper">
        <ul class="menu">
          <li><a href="#">ALL</a></li>
          <li><a href="#">NEW</a></li>
          <li><a href="#">VINTAGE</a></li>
          <li><a href="#">CATEGORY</a></li>
          <li><a href="#">LOOKBOOK</a></li>
          <li><a href="#">BLOG</a></li>
        </ul>
        <ul class="login">
          <li><a href="#">LOGIN</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <div id="item" class="wrapper">
        <div class="item-image">
          <img src="img/item.jpg" alt="">
        </div>

        <div class="item-info">
          <h1 class="item-title">TOTALLY Short Sleeve Shirt</h1>
          <p>
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキスト
          </p>

          <p>￥9,999 +tax</p>

          <table class="order-table">
            <thead>
              <tr>
                <th class="color">Color</th>
                <th class="size">Size</th>
                <th class="quantity"></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>White</td>
                <td>S</td>
                <td>
                  <select name="quantity_s">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>White</td>
                <td>M</td>
                <td>
                  <select name="quantity_m">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>White</td>
                <td>L</td>
                <td>
                  <select name="quantity_l">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>

          <a class="cart-btn" href="#">ADD TO CART</a>

          <table class="size-table">
            <thead>
              <tr>
                <th class="size">Size</th>
                <th class="chest">Chest</th>
                <th class="weist">Weist</th>
                <th class="height">Height</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>S</th>
                <td>99 ～ 99</td>
                <td>99 ～ 99</td>
                <td>99 ～ 99</td>
              </tr>
              <tr>
                <th>M</th>
                <td>99 ～ 99</td>
                <td>99 ～ 99</td>
                <td>99 ～ 99</td>
              </tr>
              <tr>
                <th>L</th>
                <td>99 ～ 99</td>
                <td>99 ～ 99</td>
                <td>99 ～ 99</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>

    <footer id="footer" class="wrapper">
      <p class="copyright">&copy; TOTALLY</p>
    </footer>
  </body>
</html>