【初心者向け】CSSでいい感じのテーブルを作る

CSSを使っていい感じのテーブルを作ります。
※htmlはpug、cssはsassで記載します。

# 天板を作る
はじめに天板を作ります。
とりあえず板を一枚用意します。

```table.pug
.table
  .tenban
```

```sass
.tenban
  width: 300px
  height: 300px
  border: 1px solid #999
  margin: 30px auto
```
![step1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/7eac09d0-d76e-e4e8-7819-e81833ef626f.png)

板の角度を変えてそれっぽい感じにします。

```sass
.tenban
  width: 300px
  height: 300px
  border: 1px solid #999
  margin: 30px auto

  // 追加
  transform: skew(5deg, 2deg) rotateX(75deg) rotateZ(35deg)
```
![step2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/2bf65015-ee50-c8bb-c9ec-1924e18c642c.png)

これでは板というより紙なので、板に厚みをもたせましょう。

```table.pug
.table
  .tenban

    // - 追加
    .fuchi.temae
    .fuchi.migi
```

```sass
.tenban

  width: 300px
  height: 300px
  border: 1px solid #999
  margin: 30px auto
  transform: skew(5deg, 2deg) rotateX(75deg) rotateZ(35deg) 

  // 以下追加
  .fuchi
    position: absolute
    border: 1px solid #999

    &.temae
      width: 100%
      height: 35px
      top: 100%
      left: 10px
      background-color: #fff
      transform: skew(33.5deg, 0)

    &.migi
      width: 23px
      height: 102%
      top: 13px
      left: 100%
      background-color: #eee
      transform: skew(0, 56.7deg)
```
![step3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/92348902-2ad0-8bd3-6e10-f2c88f518f3c.png)

# 脚を作る
脚を作ります。

```table.pug
.table
  .tenban
    .fuchi.temae
    .fuchi.migi
    .ashi.oku
    .ashi.hidari
    .ashi.temae
    .ashi.migi
```
脚は位置を`position: absolute`で決める関係で、`.tenban`の子要素にしておきます。

```sass
.ashi
  background-color: white
  width: 30px
  height: 500px
  border: 1px solid #999
  position: absolute
  transform: skew(34deg, 0) translate(34px, 200px)
  z-index: -1

  &.oku
    bottom: -40px
    left: 0

  &.hidari
    top: 100px
    left: 0

  &.temae
    top: 100px
    right: 0

  &.migi
    bottom: -40px
    right: 0
```
![step4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/8bd407a4-f1ea-d170-728f-5591a2f01a7d.png)

こんなペラペラの脚ではテーブルを支えられないので太く(見えるように)しましょう。

```sass
.ashi

  // 略

  &:before
    background-color: #eee
    border: 1px solid #999
    content: ''
    display: block
    width: 100%
    height: 100%
    position: absolute
    top: -19px
    left: 100%
    transform: skew(0deg, -56deg)

  // 以下略
```
![step5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/a226d427-7474-5c4b-e5ef-56a337b8d33a.png)

だいぶテーブルっぽさが出てきました。
天板が透けているので色を塗りましょう。

```sass
.tenban

  // 略

  &:before
    content: ''
    display: block
    width: 100%
    height: 100%
    background-color: white
    position: absolute
    top: 0
    left: 0
```
![step6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/1a019267-225d-c8e5-90a3-2d4cb05640fd.png)

脚を天板の子要素にしているため、`z-index`で天板を脚より上に重ねることができません。
そのため疑似要素を上に重ねることで天板を脚の上に載せることを実現しています。

# 影をつける
真っ白い空間に真っ白いテーブルでは味気ないので、影をつけてみます。

```sass
.tenban

  // 略

  &:after
    content: ''
    display: block
    width: 100%
    height: 100%
    background-color: #000
    position: absolute
    top: 113%
    left: 141%
    z-index: -2
    filter: blur(30px)
    opacity: 0.3

.ashi

  // 略

  &:after
    background-color: #000
    content: ''
    display: block
    width: 100%
    height: 50%
    position: absolute
    top: 55%
    left: 115px
    transform: rotateZ(48deg) skew(0deg, 42deg)
    filter: blur(30px)
    opacity: 0.3
    z-index: -2

  // 以下略
```
![step7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/c610aa6f-c76e-d642-e921-f1ab9b9910d8.png)

# 完成
あとは色々微調整をして完成です。

## 完成コード

```table.pug
  .table
    .tenban
      .fuchi.temae
      .fuchi.migi
      .ashi.oku
      .ashi.hidari
      .ashi.temae
      .ashi.migi
```
```table.sass
.tenban
  width: 300px
  height: 300px
  border: 1px solid #999
  margin: 30px auto
  transform: skew(5deg, 2deg) rotateX(75deg) rotateZ(35deg)
  position: relative

  &:before
    content: ''
    display: block
    width: 100%
    height: 100%
    background-color: white
    position: absolute
    top: 0
    left: 0

  &:after
    content: ''
    display: block
    width: 100%
    height: 100%
    background-color: #000
    position: absolute
    top: 113%
    left: 141%
    z-index: -2
    filter: blur(30px)
    opacity: 0.3

  .fuchi
    position: absolute
    border: 1px solid #999

    &.temae
      width: 100%
      height: 35px
      top: 100%
      left: 10px
      background-color: #fff
      transform: skew(33.5deg, 0)

    &.migi
      width: 23px
      height: 102%
      top: 13px
      left: 100%
      background-color: #eee
      transform: skew(0, 56.7deg)


.ashi
  background-color: white
  width: 30px
  height: 500px
  border: 1px solid #999
  position: absolute
  transform: skew(34deg, 0) translate(34px, 200px)
  z-index: -1

  &:before
    background-color: #eee
    border: 1px solid #999
    content: ''
    display: block
    width: 100%
    height: 100%
    position: absolute
    top: -19px
    left: 100%
    transform: skew(0deg, -56deg)

  &:after
    background-color: #000
    content: ''
    display: block
    width: 100%
    height: 50%
    position: absolute
    top: 55%
    left: 115px
    transform: rotateZ(48deg) skew(0deg, 42deg)
    filter: blur(30px)
    opacity: 0.3
    z-index: -2

  &.oku
    background: linear-gradient(#ddd, #fff)
    bottom: -40px
    left: 0

    &:before
    background: linear-gradient(#aaa, #ddd)

  &.hidari
    top: 100px
    left: 0

  &.temae
    top: 100px
    right: 0

  &.migi
    background: linear-gradient(#333, #eee)
    bottom: -40px
    right: 0
    z-index: -3

    &:after
    background: linear-gradient(#ccc, #eee)
```
![step8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185122/cc701dc8-ec66-3102-8609-9154b02154fc.png)

# まとめ
CSS初心者さん向けに`position`, `transform`, `filter`, `background: linear-gradient...`など**テーブルを作る際には必ず出てくるプロパティ**を使って、いい感じにテーブルを作りました。
webサイトで**テーブルが必要になることはよくある**と思いますので、参考になれば幸いです。

# おしまい
…って、**テーブルってそっち！？**

というのがやりたかっただけです:relaxed: