テーブルデザインのコーディングパーツ①【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでレスポンシブ対応のテーブルデザインのコーディングをする方法が知りたい
Webサイト制作案件でよく見かけるテーブルパーツのサンプルコードが見たい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものを整理して再利用できるようにしたものです。

同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです！！

完成イメージ
テーブルデザインのサンプルコード
- HTML
- CSS
まとめ

完成イメージ

今回紹介するコードで実現できるテーブルデザインはこちら！

▼▼▼

1行目の段はヘッダーセルとして分かりやすいように背景色を変えているのが特徴です。

tableタグを使わず全てdivでHTMLは組んでいます。

ポイントとなるのはdiplay:flexです。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

テーブルデザインのサンプルコード

こちら、CodePenで作った見本です！

レスポンシブでは、４列収まりきらないので、横スクロールできるようにCSSで調整しています。

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

See the Pen 表① by 石森裕也 (@yuyaphotograph) on CodePen.

HTML

こちら、今回のカードデザインのHTML構造です！

テーブルブロックの数を増やしたい場合は、「Table-Item」の塊を増やしてあげればOK！

HTML

<div class="Table">
  <div class="Table-Item">
    <div class="Table-Item-Head"></div>
    <ul class="Table-Item-List">
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
    </ul>
  </div>
  <div class="Table-Item">
    <div class="Table-Item-Head">見出し</div>
    <ul class="Table-Item-List">
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
    </ul>
  </div>
  <div class="Table-Item">
    <div class="Table-Item-Head">見出し</div>
    <ul class="Table-Item-List">
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
    </ul>
  </div>
  <div class="Table-Item">
    <div class="Table-Item-Head">見出し</div>
    <ul class="Table-Item-List">
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
      <li class="Table-Item-List-Item">内容</li>
    </ul>
  </div>
</div>

CSS

こちらスタイリングです！

文字サイズや、ボーダーの色などはよしなに変更してお使いください。

CSS

.Table {
  border: 1px solid #333;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  width: 100%;
  display: flex;
}
@media screen and (max-width: 480px) {
  .Table {
    margin-top: 64px;
    width: 348px;
    overflow-x: auto;
  }
}
.Table-Item {
  width: 25%;
}
@media screen and (max-width: 480px) {
  .Table-Item {
    width: 50%;
    flex: 0 0 auto;
  }
}
.Table-Item:nth-child(n+2) {
  border-left: 2px solid #333;
}
.Table-Item-Head {
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  text-align: center;
  letter-spacing: 0.075em;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .Table-Item-Head {
    font-size: 14px;
  }
}
.Table-Item-List-Item {
  border-top: 1px solid #333;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.075em;
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .Table-Item-List-Item {
    font-size: 14px;
  }
}
.Table-Item-List-Item:nth-child(odd) {
  background: #fff;
}
.Table-Item-List-Item:nth-child(even) {
  background: #ddffdd;
}
.Table-Item-List-Item:nth-child(3),
.Table-Item-List-Item:nth-child(5),
.Table-Item-List-Item:nth-child(7) {
  border-top: 2px solid #333;
}

まとめ

以上、実務でよく使われるテーブルデザインのコーディングのサンプルコード①を紹介しました。

コーポレートサイトの制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！