Acenumber Technical Issues

現在一般的なレスポンシブWebデザインでは、 基本的にパソコン画面と同様のHTMLソースをスマホ画面でも表示させます。 其の際、スタイルシートを駆使しますが、 一般的に縦長画面で閲覧されるスマホ画面では工夫が必要になります。

画面縦長変化に於ける工夫

パソコン画面で横に広く表示させていたコンテンツも スマホ画面では縦長にならざるを得ないため、 例えば横に並列して並べていたコンテンツを故意にカラム落ちさせ、 縦表示させるテクニックはごくごく基本的な手法です。

処がコンテンツによっては其の基本的な手法が適切でない場合もあります。 其の様なケースではスマホ画面の場合にはタブ切り替えは屡々採用されるテクニックです。 ネットで検索しても有用な情報が多く見付けられます。 例えばQiitaにも2017年8月6日付けで以下の情報が寄せられています。

jQueryとCSSでシンプルなタブ切り替え

記載されるコードは散見される同様な情報が上手くまとめられたように、 簡便さに加え汎用性も考慮され書かれています。 基本的には切り替えボタン用のタブを構成するタグと、切り替えられるコンテンツを表示させるタグが同数用意され、 初期に表示される以外のコンテンツを含むタグには非表示属性、 display: none; がスタイルシートで付与されており、 クリックされたタブと同じ、先頭から数えた数のコンテンツタグ以外に非表示属性が与えられるように jQuery で処理される、当該機能の定番的な構成が取られています。

TABLEタグの場合

処でレスポンシブWebデザインで扱い難いデータに表組み（tableタグ）があります。 一般的にパソコンの広い画面では一覧性に富み、 表組みも全体を表示させられる余裕がありますが…

スマートフォンに於けるWebサイト表示では PC表示に比べて一般的に表示領域が狭くなります。 スマートフォンでは縦に構えて閲覧される場合が多ければ特に横幅は制限が生じるものです。 此の為、一覧性が劣れば工夫が表示にも必要になります。

問題点の検出と本記事の目論見

例えば図に見られる様にリンクリストをカテゴリ毎にまとめ 上部にタブを設え該当するリンクリストのタブがタップされた場合に リンクリストの表示を切り替えるのはしばしば見られる手法でしょう。 図ではデフォルトでオレンジ色のリンクリストAがアクティブとなって表示されており、 他の緑色のリンクリストB、薄紫色のリンクリストCは非表示となっています。

処で、其々のリンクリストカテゴリ内のリンクが増えれば、 此れ又、縦に長くなってスクロール必須の一覧性の劣る事態が生じますから、 下の図の如く其々のリンクリスト下部に示した様な其々のカテゴリに応じた ページングを表示するのも良く用いられる処でしょう。

此れを何も考えず其々のリンクリスト上のページングリンクをタップすると どのカテゴリのリンクリスト上あったとしても 新しく開かれるページはデフォルト状態であり、 上の図で言えばリンクリストB上のページング、リンクリストC上のページングから遷移して開かれるページでは リンクリストAが表示されてしまうでしょう。 閲覧者の身になればリンクリストB上のページングから遷移したページでは 開かれるタブはリンクリストBでなければ困惑してしまいます。 此れではユーザービリティ上、大きな問題を抱えていると言わざるを得ません。

其処で此の問題を解決する為に…