この記事の目的

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

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

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

を共有します!!

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

Bootstrapの場合

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

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

<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のフルースクリーンの時はこうなる

そして、携帯画面も崩さずに、こうなります。

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

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

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

いろんな試行錯誤を経て、テーブルをやめて、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>

具体的に、ふるースクリーンはこうなります。

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

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

PC版

携帯版

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

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

理解したこと

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

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

TailwindCSSの場合

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

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

携帯と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の良さは、テンプレートが多い同時に、幅広い自由度があることに気づきました。

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

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

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

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

まとめ

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

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

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

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

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

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

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

プロダクトはこちら：

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

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