50音のボタンを並べるCSSを考える

公開

検索システム実装の案件で、ひらがな50音のボタンを並べる必要がありました。子どもの頃によく見る、右上から縦にあ・い・う・え・お...と並んでいる表のようなデザインです。 50音を並べたボタンの表示例

今回はIE8にも対応しなければならなかったため、いろいろ考えた結果、あ行・か行といった行毎にリストを作り、floatを利用して並べました。

<ul class="list-syllabary-ja">
<li><span class="linename">あ行</span>
<ul>
<li><a href="#">あ</a></li>
<li><a href="#">い</a></li>
<li><a href="#">う</a></li>
<li><a href="#">え</a></li>
<li><a href="#">お</a></li>
</ul>
</li>
<li><span class="linename">か行</span>
<ul>
<li><a href="#">か</a></li>
<li><a href="#">き</a></li>
<li><a href="#">く</a></li>
<li><a href="#">け</a></li>
<li><a href="#">こ</a></li>
</ul>
</li>
<!-- 以下略 -->

もし最新のCSS仕様が使える場合どのような実装になるかな、と考えてみました。ぱっと思いつくのはやはりCSS Flexible Box Layout Moduleです。

試してみたところ、下記3行で対応できることが分かりました。

.list-syllabary-ja{
    display: flex;
    flex-flow: row wrap;
    writing-mode: vertical-rl;
}

HTMLは、下記のようにあ〜わまで単純にリストに並べるだけです。

<ul class="list-syllabary-ja">
<li><a href="#">あ</a></li>
<li><a href="#">い</a></li>
<li><a href="#">う</a></li>
<li><a href="#">え</a></li>
<li><a href="#">お</a></li>
<li><a href="#">か</a></li>
<li><a href="#">き</a></li>
<li><a href="#">く</a></li>
<li><a href="#">け</a></li>
<li><a href="#">こ</a></li>
<!-- 以下略 -->

今日（2015年1月22日）現在では、Vendor Prefixを使うことで、IE・Chrome・Safariの各最新版で問題なく表示されました。

See the Pen Japanese Syllabary by Hideki Abe (@hideki-a) on CodePen.

余談ですが、calc()の中でSassの変数を使いたい場合は、インターポーレーションを使えば良いようですね。margin: 0 0 calc(1em - #{$item-margin});のような記述です。