タグ

2022年10月4日のブックマーク (1件)

  • 料金表・比較表などのテーブルをスマホ対応するデザイン事例 | 野良人(のらんど)

    この記事ではサイトに商品スペック比較や料金表などのテーブルをつくる際、スマホでも崩れず見やすく表示する方法を様々なサイトの実例から学んでみたいと思います。 具体的なコードではなく、PC/スマホで表(テーブル)をどのようにデザインすべきか、という設計段階のヒントを探ります。 テーブルをスクロール 西瀬戸自動車道 CSS側で一括で対応できて、実装の工数が少ないのが良い点です。表が沢山ある既存サイトをスマホ対応する時などは便利。 横にスクロールできることをユーザーに気付かせる必要がある(スクロールバーを目立たせるなど)。 「横にスクロールできます」等の注意書きあるサイトもよく見ますが、書かないと分からないUIというのはあまり良いとは言えないのではという気はします。気付かれないよりマシですが。 テーブルの先頭を固定してスクロール トヨタ Amazon 上記例のスクロールをさらに工夫したパターンで、

    料金表・比較表などのテーブルをスマホ対応するデザイン事例 | 野良人(のらんど)