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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

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

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

完成イメージ

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

▼▼▼

テーブルデザインコピペOK

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

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

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

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

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

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

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

レスポンシブでは、4列収まりきらないので、横スクロールできるように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;
}

まとめ

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

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

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

コメントを残す

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