30days

表の作り方【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

本日はプライスセクションをやっていこうと思います!
ほとんどが表の作り方の解説になります。

本日のポイント

・参考サイトを確認しながら表を作れるようになろう!

ピクセルパーフェクト、レスポンシブは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

完成形

HTML

<section id="price">
<div class="inner">
  <div class="title">
    <h2>News</h2>
    <div class="title-line"></div>
  </div>
  <div class="wrap">
    <div class="left">
      <img src="img/price-img.png" alt="人">
    </div>
    <div class="right">
      <table class="table">
        <tr>
          <th></th>
          <th>column1</th>
          <th>column2</th>
        </tr>
        <tr>
          <th>row1</th>
          <td>100円</td>
          <td>100円</td>
        </tr>
        <tr>
          <th>row2</th>
          <td>6,000円</td>
          <td>0円</td>
        </tr>
        <tr>
          <th>row3</th>
          <td class="sm">
            <p><span class="red">6,000円</span><br>
            *今だけ半額</p>
          </td>
          <td>0円</td>
        </tr>
        <tr>
          <th>row4</th>
          <td>100円</td>
          <td>100円</td>
        </tr>
      </table>
      <div class="contact">
        *目安なので詳しくは<a href="#">お問い合わせ</a>ください
      </div>
    </div>
  </div>
</div><!-- .inner -->
</section>

 

SCSS

#price{
  padding:60px 0 102px 0;
  background-color:#EFEFEF;
  .inner{
    max-width: 1086px;
    width: 100%;
    margin: 0 auto;
  }

  .title{
    text-align: center;
    h2{
      color:#333333;
      font-size: 60px;
      font-weight: bold;
    }
  }

  .title-line{
    margin: 54px auto 0 auto;
    width:105px;
    height:3px;
    background-color: #3F51B5;
  }

  .wrap{
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
  }
  table{
    width: 608px;
    table-layout: fixed;
    background-color:white;
  }
  tr{
    height:48px;
    vertical-align: middle;
  }
  td,th{
    border: 1px solid #707070;
  }
  th{
    background-color:#999999;
    color:white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
  }
  td{
    text-align: right;
    padding-right: 17px;
    font-size: 16px;
    font-weight: normal;
    color:#333333;
  }
  th:first-child{
    width: 160px;
  }
  .sm{
    font-size: 14px;
    p{
      line-height: 30px;
    }
  }
  .red{
    color:#E81919;
  }
  tr:nth-child(4){
    height: 82px;
  }
  .contact{
    margin-top: 20px;
    font-size: 16px;
    color:#333333;
    a{
      border-bottom:1px solid #333333;
    }
  }
}

表の作り方

目的に沿った表を作るために大切なことを一つあげると

表を作る為の表現の方法をストックしておくことです。

表の作り方を覚える必要はなく、
僕の今回のコーディングでもHPcodeを参照にして書いています。

東フリの記事を引用すると「暗記はクソ」らしいです。

https://tokyofreelance.jp/daily-trial-rails1/

なので色々な表を作れるように、参照サイトをあげておきます。
全く作り方がわからない人は一番上のWeblikerのサイトが一番わかりやすいと思います。

表の作り方に入る前に、まずタイトルを作り
画像と表をflexで横並べにしましょう。

innerいっぱいの横幅なのでjustify-content:space-between;を使います。

表の作り方ですが、まずもう一度目標とする表を確認しましょう。

特徴としては以下のように挙げられます
1行目、1列目が見出し
見出しは中央揃え
1列目の幅だけ異なり、2,3列目が同じ幅
4行目の高さだけが異なる
ではこれを一つづつ解説していきます。

見出しの作り方

見出しはthタグで作ります。
見出しをthタグデータをtdタグで作ることで、別のCSSを指定することができますね。

今回の見出しはグレーの背景、白文字、上下左右中央揃えなので次のCSSを指定します。

th{
    background-color:#999999;
    color:white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
  }

上下の中央揃えはvertical-align:middle;で指定することができます。

ちなみにWeblikerのようにtrの中身を横並べにすれば、
HTMLの見た目も表っぽくなります。

幅を整える

今回は1列目だけ少し幅が狭く、残りの2列が同じ幅ですね。

列の幅は中のコンテンツによって自動的に変化する特徴があります。 (HPcode 参照)
このままではデザインの再現が難しいので、表を作るときはとりあえずtable-layout: fixed;をつけましょう。
このCSSは中のコンテンツに関わらずに幅を均等にしてくれます。

今回は表全体の幅と最初の幅だけ指定してあげれば、
残りの2列は等間隔になり表の幅については完成します。

1列目だけを指定する方法ですがth:first-childで指定できます。
なのでCSSは以下のようになります。

table{
    width: 608px;
    table-layout: fixed;
    background-color:white;
  }
th:first-child{
    width: 160px;
  }

高さを整える

高さはtrタグを使えば簡単に調節することができます。

今回は4行目だけ高さが異なるので、
tr全体を指定した後で、4行目だけCSSを追加します。

tr{
    height:48px;
    vertical-align: middle;
  }
tr:nth-child(4){
    height: 82px;
  }

最後にデータの見た目をtext-align:rightpaddingを使って整えましょう。

まとめ

今回は表の作り方を学びました。
覚える必要は全くないので、すぐに参考サイトを確認できる状態にしておきましょう。

補足

Code pen

See the Pen
price
by hiro (@hirog)
on CodePen.

See the Pen
price
by hiro (@hirog)
on CodePen.