Bootstrapで五十音表

## はじめに
 [bootstrap4](https://getbootstrap.jp "bootstrap4")で五十音表の索引を作成しました。
再利用するかもしれないので、記事として残しておきます。

## 完成品
![スクリーンショット 2020-09-20 8.10.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571854/301a497a-299f-f675-e9f3-7d7c446838ea.png)

## コード

``` html
<div class="d-table text-nowrap" style="border-collapse: separate; border-spacing: 2pt;">
        <div class="d-table-row">
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">その他</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">わ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ら</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">や</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ま</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">は</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">な</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">た</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">さ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">か</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">あ</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">り</button></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">み</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ひ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">に</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ち</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">し</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">き</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">い</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button" disabled>を</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">る</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ゆ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">む</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ふ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ぬ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">つ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">す</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">く</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">う</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">れ</button></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">め</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">へ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ね</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">て</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">せ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">け</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">え</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ん</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ろ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">よ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">も</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ほ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">の</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">と</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">そ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">こ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">お</button></div>
        </div>
    </div>
```

上のコードでは省きましたが、
実際に使用するときは、各ボタンにidを設定するなどして、
jsから操作できるようにします。

最初のdivに`.container`を追加するとレスポンシブになります。
でも大きい画面で見ると五十音表が広がりすぎて、むしろ押しにくい気がするので悩みどころ。

## 解説

解説というより、
なるべくbootstrap4を使ってラクするためのメモです。

### display: table
div要素などをテーブルのように扱うためのスタイルです。
bootstrap4ではclassに`.d-table`, `.d-table-row`, `.d-table-cell`を設定します。
cssだけで実装する場合は`display: table`, `display: table-row`, `display: table-cell`がそれぞれ対応します。

### セルのマージン
display: tableは、そのままではセル間にマージンがないため、
`border-collapse: separate; `
`border-spacing: 2pt;`
で、2ptのマージンを入れています。

### セル
``` html
<div class="d-table-cell border">
    <button class="btn btn-link btn-block" type="button">あ</button>
</div>
```
セルにはオンマウスで下線がつく`.btn-link`を指定したボタン要素を使いました。
paddingやhoverなどをcssで自分で設定する手間が省けます。
ただ、btn-linkにはボーダーがないため、親のdiv要素に`.border`でボーターをいれています。

``` html
<button class="btn btn-link btn-block" type="button" disabled>を</button>
```

「を」などの該当する検索対象がないものは、`disabled`にしています。


### 折り返し設定
最初のdiv要素に`.text-nowrap`を設定することで、セル内で文字が折り返さないようにしています。
ブラウザのサイズが小さいときに下図のように「その他」が折り返してしまうの防いでいます。
ただし表が画面に収まらなくなってしまいます。

![スクリーンショット 2020-09-20 9.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571854/de8a34df-3419-a745-b42e-d30522566217.png)


## おわりに

紆余曲折したせいで
divタグのdisplayをtableにしたものを使っているけど、
普通にtableタグを使えばよかったかも＞＜