このワイヤーの特徴
表の途中でも、何の列かが分かる
行の多い表をスクロールすると、列の見出しが画面の外に出て、「対応」「要相談」が何についての答えか分からなくなります。列の見出しを枠の上に固定し、どこまで読み進めても見出しが見えるようにしています。
横に動かしても、どの行かが分かる
横にスクロールすると、先頭の列が画面の外に出て、どの行を見ているかが分からなくなります。先頭の列も左に固定し、縦横どちらに動かしても行と列の見出しが残るようにしています。
固定した見出しに、下の行が透けない
固定した見出しに背景がないと、スクロールした行の文字が重なって読めなくなります。見出しに背景色を付け、左上のマスをいちばん前面に置いています。
キーボードでも、表の中をスクロールできる
枠の中でスクロールする表は、マウスやタッチでは動かせても、キーボードでは動かせないことがあります。スクロールする枠に tabindex=”0″ とラベルを付け、キーボードで選んで動かせるようにしています。
制作時のよくある失敗
横スクロールの枠の中で、見出しが固定されない
表を横スクロールの枠に入れると、見出しはページ全体のスクロールに対して固定されず、枠と一緒に流れていきます。
枠の高さを決めて枠の中でスクロールさせるか、枠を使わずにページ全体で固定するかを決めます。
固定した見出しが、サイトのヘッダーの下に隠れる
サイトのヘッダーが画面の上に残る作りで、表の見出しを画面の最上部に固定すると、ヘッダーの下に隠れます。
ページ全体で固定する場合は、表の見出しの位置をヘッダーの高さに合わせます。
見出しに背景がなく、文字が重なる
背景のない見出しを固定すると、スクロールした行の文字が透けて重なります。
見出しに背景色を付けます。
枠の高さが画面いっぱいで、ページを動かせない
SPで枠の高さを画面と同じにすると、枠の中だけが動き、ページ全体をスクロールできなくなることがあります。
枠の高さを画面より低くし、枠の外に指を置ける余白を残します。
行が少ない表まで、固定する
1画面に収まる表で見出しを固定しても、効果はほとんどありません。
固定は、行が多く見出しが画面の外に出る表に絞ります。
よくある質問
行がいくつあれば、見出しを固定したほうがよいですか?
決まった数はありませんが、スクロールして見出しが画面の外に出るかどうかで判断するのが分かりやすいと考えられます。
目安として、行が15〜20を超える表では、固定すると読みやすくなることが多いです。
枠の中でスクロールさせるのと、ページ全体で固定するのは、どちらがよいですか?
横にも長い表は、枠の中でスクロールさせると、列の見出しと先頭の列の両方を固定できます。
横に収まる表なら、枠を使わずページ全体で固定すると、スクロールが二重にならず操作しやすいと考えられます。
SPでは、見出し固定とカード化のどちらがよいですか?
SPでも行どうしを見比べるなら見出し固定、1件ずつ読むことが多いならカード化が向くと考えられます。
対応エリアや数値の一覧のように見比べる表は、見出し固定が合います。
