この記事の目的
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/