ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com

受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ

[lesser28]

全くわからん。むしろなぜこれでスクロールを示唆できていると思えたし。どうしても表のまま見せざるを得ないときは単純に上部に「この表はスクロールできます」って表示させればいいんじゃないの？

[iww]

スクロールバーが見えてるだけじゃダメなのか。 つらい時代だな

[kijtra]

「スクロールできます」てテキスト出せばいいやん

[rryu]

端まで行ったら消えるようにできるなら影を付けるより小さな矢印を出すほうが良い気がする。

[hosiken]

何もしないよりも確実に良いと思いし応用利くと思う。影よりも白にフェードさせるほうがよくあるUIで良いと思うけど。ブコメは意外と否定的だなあ

[securecat]

このグラデを以てスクロールを示唆するのは難しいと思う

[emj1025]

スマートフォン table

[idr_zz]

グラデで続きを感じさせるっていいですね！ 続きを読むボタンでも見かける表現。 ユーザーにスクロールを予測させるCSSの書き方について | https://t.co/Wc4bTs9IiX

[oki448jp]

横スクロールを示唆するテーブル用のスタイル

[hisasann]

まだスクロールできる感

[torounit]

なるほど。応用範囲がありそう

[mountainar]

]

[hirorock]

tableの影でスクロールを予測させるという話 マテリアルデザインとしては無しだけど用途として必要な時もありそう…かな

[wdr_s]

発想としては面白いけど、フラットデザインの思想とは合致しない感じで。

[auient]

役に立つかもと思ったけど、スクロールバーの再発明だな本質的に

[kabacsharp]

なるほどっ

[asyst]

なるほど

[imaginaration]

これはこれで気持ち悪い。。横幅が狭くなったら見た目変えた方がいいのでは…？

[kabochatori]

よく分からんけどスクロールバーはダメなのか？

[ysk_lucky-star]

これはこれで正解の1つとしてあってもいいんじゃないかな。いいと思う

[hylom]

テーブルは幅の狭い環境では諦めて別のスタイルの表示に切り替えるべきではないかと思っている

[sucelie]

求めてたやつだ！

[yoshikidz]

横か

[wadackel]

よさ

[tohokuaiki]

テーブルのスクロール。うーん、このインターフェースがスクローラブルであると気づくのか？という気はする。

[lotus_tribal]

テーブルのレスポンシブ対応について。とてもいいと思う！

[Olein]

１つの良い方法として

[steelydylan]

今度対応が必要になったらやってみよう。