position sticky と ScrollHint

サイト制作の技術的な話題ばかりを書くのはどうかなぁ?と思いますが、新しい発見をするとついつい書きたくなってしまうのはエンジニア的?な性なのかもしれません。

当サイトは「WordPressテーマTCD」のMASSIVEというテンプレートを採用しています。
その仕様変更で、スマホ表示で表(テーブル)が横スライドするように変わっているのに気づいたのは、つい最近のことです。

表を、幅の狭いモバイル端末で見やすく表示するにはどうするべきか?本当に悩ましいところです。
その一つの解決法が、表をスライドさせること。
しかし、ユーザーにスライドできることを視覚的に示さなければ気づかずスルーされる恐れがありますし、行・列見出しを固定したりする工夫がないと、かえって見づらくなってしまいます。

列見出しを固定するには、 th に position sticky を指定すればOK。
stickyなんてプロパティ、初めてお目にかかりました。パララックスや固定ヘッダー/フッター/サイドバーなんかでも用いられるようですね。
(position sticky の使い方は割愛します)

スマホで微細なズレが生じる場合は、position -webkit-sticky

position: -webkit-sticky; は、一部のWebKitベースのブラウザ(主にSafariや一部のバージョンのChrome)において、position: sticky; と同様の動作をするプロパティです。これを使用することで、特にiOSデバイスなどで発生する一部の position: sticky; の挙動に関する問題を解消できることがあります。

スクロールできることを視覚的に示す方法は、ScrollHint というjsプラグインがありました。
(ScrollHintの使い方も割愛しますw)

早速、当サイトのRECRUITページ等の表に設定しました。

こんな感じ↓↓
※PCブラウザ(Google Chrome,Microsoft Edge)でご覧の方はデベロッパーツール([F12]キー)でスマホ表示にしてご覧ください。

【マッスルPROJECT】
フィットネスジム補助 フィットネスジムの入会費(全額)、月額会費の補助として5千円(定額)を支給します。
プロテイン・サプリ補助 プロテイン・サプリ購入費用を補助します。(上限:5千円/月)
筋トレ手当 ジムでのトレーニング1日につき、筋トレ手当を支給します。(上限:1万円/月)


正直言うとスクロールさせない方が一番見やすいのですが、表の列見出し固定とScrollHintがちょっとテクニカルでカッコイイかなぁと思うので、当面はこれで行きます。

関連記事

最近の記事 おすすめ記事
  1. タイタンパーによる突き固め作業

  2. はじめてのまくらぎ交換に挑戦

  3. 社員旅行へ行ってきました

  1. 登録されている記事はございません。
O-TAKA GROUP
伊藤建設株式会社(エリーヌホーム)
https://www.eliane-home.net/
Screenshot of www.eliane-home.net
TOP
TOP