[CSS]感想文リンクの一覧ページをレスポンシブ化

演劇感想文リンクの劇団一覧ページを、見やすいテーブルに一覧化しました。(当社比((笑))

■Bootstrapを利用して、DATATABLESのPluginを利用。

目標としたのはレスポンシブ化をより簡単に行う為、ネット検索の結果以下のサイトにぶつかりました。英語ですが、やりたいことはかなり出来そうです。早速、サンプルを作ってみたところ、うまいこと動きそうです。

まずは、ほぼそのままのレイアウトを利用して、一覧ページを作成しました。

（しかし、上のページの内容をほとんど理解していませんorz)

元々英語圏のひとを想定しているツールであり、日本語を利用している身として苦労がありました。五十音順のソートです。

このサイトでは、登録時に個別に劇団の名称のふりがなをデータとして登録して、その順番で並べているのですが、このDATATABLESツールは、あくまでも、表内にあるデータ項目の順番でしか並べ替えされません。

英語圏ならまだしも、日本語としては、劇団名をそのままでソートすると漢字等のよみがなが思い通りになりませんでした。結果として、左端にふりがなをいれる列を作り、その内容を<dsiplay = hidden>とすることで対応しました。

…かなり無理やりな解決方法です。もう少しスマートな方法をご存知の方いたら、是非助けて下さい。

また、同じくソート順に利用するつもりで、その劇団の公演数を入れようとしたのですが、ソートは数字としてではなく文字列としてソートされてしまうことが判明。やむなく、０埋めの数字にしました。セメテモノかっこつけで、BootstrapのBatchで色を付けてみましたたが、なんかいまいちですね。