KOYO DIGITAL WORKSパーツギャラリー

スクロールテーブル(ユーザーにスクロールを予測させる)

  • Chrome
  • Firefox
  • Edge
  • IE11

横スクロールを表示する

See the Pen scroll_table01 by yukako (@niemer) on CodePen.

見出しは固定表示

See the Pen scroll_table02 by yukako (@niemer) on CodePen.

横スクロールを予測させる

横スクロールは便利ですが、表示サイズによっては区切り良く表示されてしまい、ユーザが横スクロール可能なことを認識できず、表示されていない情報に気づかない恐れがあります。
そこで、スクロール可能な方向にグラデーションを付け、ユーザに横スクロールを予測させます。

See the Pen scroll_table03 by yukako (@niemer) on CodePen.

見出しは固定表示

See the Pen scroll_table04 by yukako (@niemer) on CodePen.

参考サイト:ユーザーにスクロールを予測させるCSSの書き方について

おすすめコンテンツ

WEBデザイナー/フロントエンドエンジニア 正社員募集中 リッチな動きをWebサイトに パーツギャラリー デザインギャラリー 様々な角度からWebサイトをサポート!Webサイト制作
ページの先頭へ