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

目次

※コーディングの解説はCSSのコメントを参照

ディレクトリ構成

    
ec
 ├─img
 │  ├─favicon.ico
 │  ├─logo.svg
 │  └─item.jpg
 │
 ├─css
 │  └─style.css
 │
 └─index.html
    
  

HTML(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>

CSS(style.css)

別タブで開く
style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #333;
  font-size: 0.75rem;
  font-family: 'Raleway', sans-serif;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.site-title {
  width: 109px;
  line-height: 1px;
  margin: 0 auto 36px auto;
}
.site-title a {
  display: block;
}
.wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  max-width: 1000px;
  padding: 46px 0 26px 0;
  margin: 0 auto 50px auto;
  border-bottom: solid 1px #c3c3c3;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .menu,
nav .login {
  display: flex;
  align-items: center;
}
nav .menu li {
  margin-right: 14px;
}
nav .login li {
  margin-left: 14px;
}

/*-------------------------------------------
商品ページ
-------------------------------------------*/
#item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}
/*
flex-shrink: 0;
画像が縮小されるのを防ぐ
*/
#item .item-image {
  max-width: 400px;
  flex-shrink: 0;
  margin-right: 60px;
}
#item .item-info p {
  margin-bottom: 30px;
  line-height: 1.9;
}
/*
「display: flex;」と「align-items: center;」で、
高さを中央にそろえる
*/
#item .item-info .item-title {
  height: 60px;
  display: flex;
  align-items: center;
  border-top: solid 1px #c3c3c3;
  border-bottom: solid 1px #c3c3c3;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 20px;
}
#item .item-info .order-table {
  width: 100%;
  margin-bottom: 20px;
}
#item .item-info .order-table .color,
#item .item-info .order-table .size {
  width: 20%;
}
#item .item-info .order-table .quantity {
  width: 60%;
}
/*
外枠なしのテーブル
1.tdの上線を設定
*/
#item .item-info .order-table td {
  border-top: solid 1px #c3c3c3;
}
/*
外枠なしのテーブル
2.th、tdの右線を設定
*/
#item .item-info .order-table th,
#item .item-info .order-table td {
  font-weight: normal;
  padding: 10px;
  border-right: solid 1px #c3c3c3;
  text-align: center;
}
/*
外枠なしのテーブル
3.th、tdの最後だけ右線を消す
*/
#item .item-info .order-table th:last-child,
#item .item-info .order-table td:last-child {
  border-right: none;
}
/*
-moz-appearance: menulist;
-webkit-appearance: menulist;
セレクトボックスに右端の矢印を表示
*/
#item .item-info .order-table select {
  width: 100%;
  border: solid 1px #c3c3c3;
  padding: 0 10px;
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
}
#item .item-info .cart-btn {
  width: 100%;
  background-color: #4B4B4B;
  color: #fff;
  display: block;
  line-height: 1;
  padding: 18px 0;
  margin-bottom: 30px;
  text-align: center;
}
#item .item-info .size-table {
  width: 100%;
}
#item .item-info .size-table .size {
  width: 16%;
}
#item .item-info .size-table .chest,
#item .item-info .size-table .weist,
#item .item-info .size-table .height {
  width: 28%;
}
#item .item-info .size-table th {
  background-color: #ecebeb;
}
/*
外枠ありのレイアウト
2.th、tdに枠線を設定
*/
#item .item-info .size-table th,
#item .item-info .size-table td {
  font-weight: normal;
  padding: 10px;
  border: solid 1px #c3c3c3;
  text-align: center;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  padding: 10px 0;
}
#footer .copyright {
  font-size: 0.625rem;
  text-align: center;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 896px) {

  .site-title {
    margin-bottom: 26px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    margin-bottom: 0;
    border-bottom: none;
    padding: 36px 16px 16px 16px;
  }
  /*
  横スクロールできるようにする
  */
  nav {
    overflow-x: scroll;
  }

  /*-------------------------------------------
  商品ページ
  -------------------------------------------*/
  #item {
    flex-direction: column;
  }
  #item .item-image {
    max-width: 100%;
    margin: 0 0 10px 0;
  }
  #item .item-info {
    padding: 0 16px;
  }
}