Bootstrapで五十音表

はじめに

bootstrap4で五十音表の索引を作成しました。
再利用するかもしれないので、記事として残しておきます。

完成品

コード

<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のマージンを入れています。

セル

<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でボーターをいれています。

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

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

折り返し設定

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

おわりに

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