2022-06-15

テイフェス出演者リストがスマホからでも見やすくなりました

テイフェス出演者リストのデザインを修正して、スマホやタブレットからでも見やすく調整しました。また同時に見出し列(出演者名と作品名/キャラ名を記載した列)を固定し、横スクロールをしても見出し列が見えたままになるようにしました。

PCではこれでほぼ問題はないのですが、スマホで見ると微妙にセルがずれます。ただこれはもうyukkun20の技術力では直りそうにないのでお許しください。

<<以下ひとりごと>>

これまでスマホ等では全く表の体裁をなしていなかったのですが、それはWPtouchのカスタムCSSで、モバイルテーマにおいてはテーブルの要素をすべてdisplay:blockでブロック化していたのが原因です。これをすると、表をスマホ等で閲覧した場合、左上のセルから始まり左から右、上から下のセルの順に一列に並べて表示できるため、小さめの表を見やすく表示するには向いています。ただ大きめの表を表示しようとすると極めて縦に長い表になるため、視認性が下がります。

そのためこのページではカスタムCSSをはずそうとしたのですが、あいにく特定のページでのみカスタムCSSを解除する方法が分かりませんでした(これが分かれば前述の微妙なセルのズレも直せると思うのだが…また後日きちんと調べよう)

仕方なくWPtouchのカスタムCSSよりも優先順位の高い、TablepressのカスタムCSSで、対応するプロパティにデフォルトの値を設定することで、事実上打ち消すことにしました。

各プロパティのデフォルト値は以下の通りです。

  • table:table
  • tbody:table-row-group
  • tr:table-row
  • th:table-cell
  • td:table-cell

トラックバック URL

コメント & トラックバック

無理して毎日コメントをするのをやめたのですが それでも多い方だなと思う
やっぱり日常化してしまうと落ち着かないんですよね

コメントしていただけるだけでありがたいです( ^ω^ )

コメントフィード

コメント

皆さまのコメントが励みになっています。ありがとうございます。