BootstrapとTailwind CSSでいい感じのレスポンシブテーブルを作った件

## この記事の目的

CSS大好き人間として、bootstrapとTailwindCSSを使ってみて、
一言って言えば、便利!!! 

今回はPC版のコードを書いてから、レスポンシブしなきゃーとなり、
自分が少しやってみて、

:::note info
体験したこと、
BootstrapとTailwindcssで理解したこと、
気づいたこと
:::

を共有します!!

あわよくば、同じくCSS好きが現れたらうれしいです。

## Bootstrapの場合

`Table`の良さはこのままコピペで使えましたが、こちらがプロダクトは入力情報が多く、
携帯表示の時に、200文字ほどにある情報が、全て右側にぎゅっと詰めていました。

どういうことかっていうと、まず、公式のコードはこちら：

https://getbootstrap.jp/docs/5.0/content/tables/

```
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
```
いつものCSSと変わらず、とても読みやすくなります。
PCのフルースクリーンの時はこうなる
![スクリーンショット 2023-09-21 0.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/ec5ba13b-3963-3c33-7a99-7cee2bac2b53.png)

そして、携帯画面も崩さずに、こうなります。
![スクリーンショット 2023-09-21 0.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/4cbd39d8-b88c-6798-488b-0034f601a5d8.png)

一見いい感じでしたが、どこの項目が長文を入れると、携帯版になると非常に読みにくくなります。
イメージとしては、、、右の欄がめちゃくちゃ短いところで、300文字がずっと改行していくことになります。

![IMG_6961.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/dd8a4a2c-a54d-d977-8cf6-9f23117312ee.jpeg)

長い、とても長い、携帯だったらめっちゃスクロールさせます ^^;;;

それだったら、フルースクリーンの時にはテーブルのままで、携帯の時だけ、横並びできるといいねーと考えました。
このようなイメージ：

![IMG_6960.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/81ff745f-8b52-9818-45e0-834d35aced56.jpeg)

いろんな試行錯誤を経て、テーブルをやめて、`col`と`CSS`で解決策に辿り着きました。

`col`というのがあります。colはcolumnの略で、カラムなので、カラムが何個あるのか？

col-1 1つ
col-2 2つ
col-3 3つ
。。。

うん、簡単。

公式のサンプルコードはこちら。

```
<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

具体的に、ふるースクリーンはこうなります。
![スクリーンショット 2023-09-21 0.34.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/8e5f8bf1-ef96-8811-1e12-b410f976526f.png)

携帯画面だと、こうなります。

![スクリーンショット 2023-09-21 0.35.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/679bf7cc-5924-3b96-2cfa-ad30fdd007c0.png)

バイネーム(ByName)の場合はこんな感じです。

PC版
![スクリーンショット 2023-09-28 18.02.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/da3220c4-a458-10a9-c996-1f7d5f9f3d31.png)


携帯版
![スクリーンショット 2023-09-28 18.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/27926ced-8ab6-78a6-77e9-5ca746b37cca.png)

狭い画面でも見やすくようになった!!

**何より、テーブルという概念に縛られず、colで欲しい画面を作ることができました！！**
やはりドキュメントを読み込むことが大事です。

### 理解したこと

Bootstrapの良さはテンプレートが豊富で、ほぼコピペしたら使える物が多すぎるほど、多いです。笑

その分縛られる部分も多いです。そういう時は一旦離れて、ドキュメントから自分のイメージにあってそうなコードを探して、自分なりに作り直したり、アレンジしたりすることをお勧めします。


## TailwindCSSの場合

TailwindCSSはBootstrapと似てますが、書き方が微妙に違います。

別件で書いたコードはこのようにやってみました。

1. 携帯とPCをそれぞれの表示を別途で書く
**やり方：**
`<div class="sm:hidden">`と`<div class="hidden sm:block">`を使って、
幅によって、表示するコードを自動反映しています。

```
<div class="container mx-auto mt-8 px-4">
            <h2 class="text-xl font-semibold mb-4">各項目の詳細</h2>
            <!-- 携帯表示用のコード -->
            <div class="sm:hidden">
                    <div class="accordion-item border rounded-lg shadow-md mb-4">
                        <div
                            class="accordion-header px-4 py-3 bg-gray-100 cursor-pointer flex items-center justify-between">
                            <button class="accordion-button" aria-expanded="false">
                                <span class="material-symbols-outlined">
                                    expand_circle_down
                                </span>
                            </button>
                        </div>
                        <div class="accordion-content px-4 py-3">
                            <table class="table-auto w-full">
                                <tbody class="accordion container">
                                    @foreach (結果のデータを抽出)
                                        <div class="accordion-header cursor-pointer">
                                            <div class="flex items-center justify-between">
                                                <div>{{ データを表示 }}</div>
                                                <div class="text-right">
                                                    <div>
                                                            点数:{{点数表示}}／5.0
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-button">
                                                <span class="material-symbols-outlined">
                                                    expand_circle_down
                                                </span>
                                            </div>
                                        </div>
                        </div>
                        <div class="accordion-content accordion-hidden text-gray-800">
                            @if ($array[$index] > 3)
                                {{ランク表示}}
                            @endif
                        </div>
                @endforeach
                </tbody>
                </table>
            </div>
        </div>
        @endforeach
        </div>

        <!-- PC表示用のコード -->
        <div class="hidden sm:block">
            @foreach ($attribution as $index => $name)
                <tr>
                    <td colspan="3" class="border-t border-gray-200"></td>
                </tr>
                <div class="accordion-item border rounded-lg shadow-md mb-4">
                    <div
                        class="accordion-header px-4 py-3 bg-gray-100 cursor-pointer flex items-center justify-between">
                        <button class="accordion-button" aria-expanded="false">
                            <span class="material-symbols-outlined">
                                expand_circle_down
                            </span>
                        </button>
                    </div>

                     <!--PC版はテーブルの構造を使って、結果を表示させています。-->
                    <div class="accordion-content px-4 py-3">
                        <table class="table-auto w-full">
                            <thead>
                                <tr>
                                    <th class="table-header">日付</th>
                                    <th class="table-header">点数</th>
                                    <th class="table-header">詳細</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($result as $resultIndex => $array)
                                    <tr>
                                        <td colspan="3" class="border-t border-gray-200"></td>
                                    </tr>
                                    <tr>
                                        <td class="table-cell w-2/12">{{ 日付 }}</td>
                                        <td class="table-cell w-1/12">{{ 点数 }}／5.0</td>
                                        <td class="table-cell w-9/12">
                                            <div class="accordion-content-detail">
                                                @if ($array[$index] > 3)
                                                    {{ランク表示}}
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endforeach
        </div>
```

### 理解したこと

TailwindCSSの良さは、テンプレートが多い同時に、幅広い自由度があることに気づきました。

今回は元々テーブルを辞めたいと思った時に、<INS>「幅によって、PC版と携帯版が違う表示できたらいいなー」</INS>という発想から、それぞれのコードを作ってみました。

結果はイメージ通りの画像をすぐ作れましたので、TailwindCSSの便利さを感じずにいられませんでした。

この理屈だと、幅によって、全く違う構造にすることができるので、<INS>**携帯とPC版で、全く違う表示にすることもすぐできちゃいます。</INS>**

そういう意味では便利です ^^

## まとめ

実は先にTailwindCSSを作って、その後、Bootstrapも同じ手法で試してみましたが、なぜかダメでした。
（単純に自分の理解が足りないだけかもしれないですが。。。）

そういった意味では、自分の中に、イメージを持っていて、<INS>**しっかり作りたいものがあれば、TailwindCSSがいいかもです。**</INS>

その反対に、自分の周りがCSS好きな人があまりいないので、、、Bootstrapで便利で綺麗と考える方が圧倒的に多いので、	<INS>**丸投げしたい方はBootstrapがいいかもしれないです!!**</INS>

## 最後に、ちょっと広告させてください

私がマーケとして、ちょっとUIをかじる程度で関わっているバイネームですが、レスポンシブテーブルの改善を重ね、色々読みやすくなっていく（はず！）。

そんな一つのツールを通して、より自己開示しやすい、生きやすい世の中にできればなーと願います。

そんなプロダクトはまだ生まれてホヤホヤで、いろんな改善点ありますが、ぜひ使ってみてくださいね ^^

プロダクトはこちら：

https://byn.jp/

コーポレートサイトはこちら：

https://byn.co.jp/

そして、わたしのフライヤーはこれです ^^
https://byn.jp/flyer/ebfca40c-d718-4d02-8a14-dfd93cb3d716/