今日はカテゴリ表示。
いろいろやり方があるんですが、まだこれとは決めてません。
他の店舗のスマホページを拝見させていただいたところ、サムネイル付き表示とテキスト表示どちらもありました。
うちの場合はPCで使っているイラストを使いたいってことで、イラストの下にテキストにしてみました。
最初BootstrapのCardを使ってみたのですが、スマホ表示にすると3列が1列になってしまう…。。たぶんブレイクポイントの変更でどうにかなりそうだったんですが、そこの部分はあまり触りたくなかったので違う方法を検索。
tablesを使うと列固定のままいけるっぽかったのでtablesを使いました。
<table class="table table-bordered">
<tbody>
<tr>
<td><div class="text-center">
<img src="img/01bag.png" class="img-fluid" alt="バッグ"><br>バッグ
</div></td>
<td><div class="text-center">
<img src="img/02poach.png" class="img-fluid" alt="ポーチ"><br>ポーチ</td>
<td><div class="text-center">
<img src="img/03fasshon.png" class="img-fluid" alt="ファッション"><br>ファッション</td>
</tr>
以下ダミーです。
デフォルトでやると枠に余白が入るのでbootstrapのCSSでtablsのtr、tdの余白を削除しました。つめすぎな気もするけど、あとで調整。
なんかテキストが味気ないっていうか…
とりあえず第一候補でおいてみて、他の店舗を参考に最終決定したいと思います。
