CSS

テーブルの見出しを固定できるjsがとても便利。

テーブルによる表の表示はよく利用します。ただ近年はスマホの対応があるのでこの表示領域はかなり絞られますよね。横スクロールで対応するというのは以前の記事でも書いたのですが、今回はさらに見出しを固定して可読性をあげようと思います。
色々ためしてみたのですが、一番しっくりきたのが「FixedMidashi.js」これの特徴は、一番上の行固定に加え複数行まで固定も可能という事ですね。
自分の備忘録も兼ねて、以下設置方法を書いていきます。

デフォルトのテーブル表

順位 名前 国語 数学 理科 社会 音楽 美術 体育 家庭 情報 合計 平均
1 佐藤 100 98 95 98 100 92 100 90 98 871 97
2 鈴木 98 96 93 96 98 90 98 88 96 853 95
3 高橋 96 94 91 94 96 88 96 86 94 835 93
4 田中 94 92 89 92 94 86 94 84 92 817 91
5 渡辺 92 90 87 90 92 84 92 82 90 799 89
6 伊藤 90 88 85 88 90 82 90 80 88 781 87
7 山本 88 86 83 86 88 80 88 78 86 763 85
8 中村 86 84 81 84 86 78 86 76 84 745 83
9 小林 84 82 79 82 84 76 84 74 82 727 81
10 加藤 82 80 77 80 82 74 82 72 80 709 79
11 吉田 80 78 75 78 80 72 80 70 78 691 77
12 山田 78 76 73 76 78 70 78 68 76 673 75
13 佐々木 76 74 71 74 76 68 76 66 74 655 73
14 山口 74 72 69 72 74 66 74 64 72 637 71
15 松本 72 70 67 70 72 64 72 62 70 619 69
16 井上 70 68 65 68 70 62 70 60 68 601 67
17 斎藤 68 66 63 66 68 60 68 58 66 583 65
18 木村 66 64 61 64 66 58 66 56 64 565 63
19 64 62 59 62 64 56 64 54 62 547 61
20 清水 62 60 57 60 62 54 62 52 60 529 59

テーブルセルの装飾はCSSで対応しています。これでも良いですが、スクロールするとやはり見づらいですよね。

見出しを固定する

順位 名前 国語 数学 理科 社会 音楽 美術 体育 家庭 情報 合計 平均
1 佐藤 100 98 95 98 100 92 100 90 98 871 97
2 鈴木 98 96 93 96 98 90 98 88 96 853 95
3 高橋 96 94 91 94 96 88 96 86 94 835 93
4 田中 94 92 89 92 94 86 94 84 92 817 91
5 渡辺 92 90 87 90 92 84 92 82 90 799 89
6 伊藤 90 88 85 88 90 82 90 80 88 781 87
7 山本 88 86 83 86 88 80 88 78 86 763 85
8 中村 86 84 81 84 86 78 86 76 84 745 83
9 小林 84 82 79 82 84 76 84 74 82 727 81
10 加藤 82 80 77 80 82 74 82 72 80 709 79
11 吉田 80 78 75 78 80 72 80 70 78 691 77
12 山田 78 76 73 76 78 70 78 68 76 673 75
13 佐々木 76 74 71 74 76 68 76 66 74 655 73
14 山口 74 72 69 72 74 66 74 64 72 637 71
15 松本 72 70 67 70 72 64 72 62 70 619 69
16 井上 70 68 65 68 70 62 70 60 68 601 67
17 斎藤 68 66 63 66 68 60 68 58 66 583 65
18 木村 66 64 61 64 66 58 66 56 64 565 63
19 64 62 59 62 64 56 64 54 62 547 61
20 清水 62 60 57 60 62 54 62 52 60 529 59

それぞれスクロールしていただければ分かる通り、縦横に長いテーブル表は見出しを固定してあげた方が可読性が向上しますね。小さいことですが、この辺を気にしてあげると閲覧しているユーザーはもちろん、上司やクライアントにも仕事が丁寧と好印象を与えることが可能ですね。

設置方法

難しいことはなく基本は配布サイトよりスクリプトをダウンロードし、設置方法を見ていただければ簡単です。以下引用となります。

body モードでは、body のスクロールに反応して見出しを固定します。
div モードでは、div のスクロールに反応して見出しを固定します。 また、div のサイズが未指定の場合、body に収まるように div のサイズを調整します。
混合モード “div-auto-size: width” を指定することにより、 div の幅のみ body に収まるようにしています。 これにより、縦方向は body のスクロールに反応し、 横方向は div のスクロールに反応して見出しを固定するようになります。 幅も高さも画面に収まらない table をスマートフォンで表示する場合に 適しています。

引用:FixedMidashi トップページより

ダウンロード先

最後に

ちょっと手間取ったことが1つある。それは固定している箇所がスクロールしたときに微妙にずれるときがありました。jsは得意じゃないけど、挙動をみてみるとスクロールした時にDOMで縦横サイズを指定していたので、たぶんズレる原因はこのあたり。
結果対応したのは、box-sizingをinitialにしてボーダー部分や余白の計算をDOM生成の方に合わせたこと。box-sizing:border-boxにしてるとボーダーなどを含めた計算になるから、このあたりの算出が微妙に異なってズレてるのかも。


 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. 合成する時のトーン調整レタッチ
  2. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  3. Photoshopで対象物の色を変更する簡単な方法。
  4. ヤフオクの商品説明を綺麗に!売上アップのポイント
  5. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  6. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  7. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  8. Googleマイマップでハマった「ズームアウトするとすべてのピン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

光のレタッチ。 – from Instagram

投稿コメント光のレタッチ。lifezakk Instagram…

男性の髪は、女性より難しいな。 – from Instagram

投稿コメント男性の髪は、女性より難しいな。lifezakk Instagram…

桜-レタッチ – from Instagram

投稿コメント桜-レタッチlifezakk Instagram…

髪の毛のリアルな切抜き。 – from Instagram

投稿コメント髪の毛のリアルな切抜き。lifezakk Instagram…

人物の切抜き。人物や生物は、ペンツールが最適。髪の毛はマスクを上手く使うとキレイに抜けます。 – from Instagram

投稿コメント人物の切抜き。人物や生物は、ペンツールが最適。髪の毛はマスクを上手く使うとキレイに抜…

人気記事

  1. LINE ガンダム ウォーズ LINE株式会社が運営する新感覚のガンダムゲーム
  2. ファンタジーの世界。Photoshopでのレタッチ。6時間ぐらいかかった。ゴーレムは、植木鉢-2枚目で作っています。木々は全て素材画像から切抜き配置してる。これの元は、ニーアオートマタです。 – from Instagram
  3. 城ドラ 2017/2/23 キャラ能力バランス調整 まとめ
  4. 高評価レビューの今おすすめアプリ「三国FANTASY 〜RPG x AR〜」
  5. Pythonで作成したボットの実行結果をLINEに通知させる備忘録。LINEスタンプも送れる。

カテゴリー記事一覧

PAGE TOP