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

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

設置方法

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

<script type="text/javascript" src="hoge/fixed_midashi.js"></script>

<!-- body mode -->
<body onLoad="FixedMidashi.create();">
  <table _fixedhead="rows:1; cols:1">
    ...

<!-- div mode -->
<style type="text/css" media="screen">
  div.scroll_div { overflow: auto; }
</style>
<body onLoad="FixedMidashi.create();">
  <div class="scroll_div">
    <table _fixedhead="rows:1; cols:1">
      ...

<!-- 混合 mode -->
<-- div モードの記述に加え、div-auto-size を指定します。-->
<table _fixedhead="rows:1; cols:2; div-auto-size: none;">

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 や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  2. 合成する時のトーン調整レタッチ
  3. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  4. 川沿いの景色 – α6400 – sig…
  5. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  6. LINEで郵便局の荷物追跡や再配達ができる!?
  7. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  8. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…

コメント

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

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

おすすめ記事

雪山フォト – フォトレタッチ

投稿コメント雪山フォトrezakk399 Instagram…

ずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる便利な超高機能。 – フォトレタッチ

投稿コメントずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる…

多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思ったけど結構時間を使った。ただ、面白い。 – フォトレタッチ

投稿コメント多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思った…

秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待。 – フォトレタッチ

投稿コメント秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待…

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

人気記事

  1. 城ドラ 新キャラ「バクダンおやじ」の予告動画が公開。気になるスキルを考察します。
  2. 城ドラ ジャイアントベビー コスト3でチビドラ・エルフ・雪ん子に強し!
  3. River. – from Instagram
  4. 人物の切抜き。人物や生物は、ペンツールが最適。髪の毛はマスクを上手く使うとキレイに抜けます。 – from Instagram
  5. スクエニのアプリゲームが期間限定最大70%OFFセールを実施中!

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP