BLOG

  • Facebook
  • Twitter

CSSでテーブル表の一部を固定してスクロールする方法

芦刈光彦

芦刈光彦

こんにちは、福岡のホームページ制作会社アイドットデザインの芦刈です。

HTMLで組んだテーブル表で、行(横軸)を固定してスクロール方法と、列(縦軸)を固定してスクロールする方法をご紹介します。

特に難しい技術は必要なく、CSSプロパティの「position: sticky;」を使用して実装することができます。

行(横軸)を固定してスクロールする

縦にスクロールしてください。 上部の「見出し」だけ固定され、他の要素だけスクロールしていることが確認できます。

↓ HTMLコード

HTMLのテーブルタグは至ってシンプルな記述をしています。 固定したいタグに「fixed01」クラスを付与します。

↓ CSSコード(SCSSでの記法)

「.fixed01」に指定しているプロパティに注目してください。

「position: sticky;」は「指定された場所までいくと固定」される仕様となっています。
画面上部で固定したいので「top: 0;」で場所を指定しています。

一応このプロパティだけで動作しますが、追記で「&:before」を追加します。
これは固定している要素に枠線を配置しています。

何故かというと「.fixed01」に指定している枠線は、固定されずにスクロールされてしまうので、スクロールされている要素が後ろでチラっと見えてしまうからです。

これを隠すために「&:before」を追加しています。

列(縦軸)を固定してスクロールする

横にスクロールしてみてください。
左側にある「見出し」と書かれた要素だけ、固定されていることが確認できたと思います。

↓ HTMLコード

先程の行(横軸)と同様、シンプルなテーブルタグで組んでいます。
固定させたい要素に「fixed01」クラスを付与します。

↓ CSSコード(SCSSでの記法)

「.fixed01」に「position: sticky;」を指定し、画面の左側で要素を固定したいので「left: 0;」を指定しています。

ここでも後ろでスクロールしている要素を隠すため、「&:before」で固定している要素に枠線を追加しています。

行(縦軸)と列(縦軸)どちらも固定する

上側と左側の両方を固定しています。

↓ HTMLコード

左上に来る要素にだけ「fixed01」クラスを付与して、残りの固定したい要素には「fixed02」クラスを付けます。

↓ CSSコード(SCSSでの記法)

「.fixed01」と「.fixed02」のCSSプロパティは今まで紹介したものとほぼ同じですが、左上基準で固定するようにしていますので、ポジションは「top: 0;」と「left: 0;」を指定してください。
「.fixed01」がスクロールしたときに隠れないように「z-index: 2;」を指定しています。

特定の列(横軸)を途中で固定する

左にスクロールしてください。「固定」と書かれている要素が途中で固定されます。

↓ HTMLコード

左側で固定する要素に「fixed01」を付与して、途中で固定したい要素に「fixed02」を付与します。

↓ CSSコード(SCSSでの記法)

ここもCSSのプロパティはほぼ同じです。

異なる点はポジションの指定をしているところで、一番左側に固定する要素には「left: 0;」。途中で固定する要素には「left: 199px;」を付与しています。

「left: 199px;」は中途半端な数字ですが、「left: 200px;」にしてしまうと、枠線が隣り合わせになってしまうので、ここでは「left: 199px;」を指定しています。

まとめ

いかがでしょうか。

「position: sticky;」を使えば、簡単に固定スクロールすることができましたね。
しかしこのプロパティは「IE」では動作しないので注意が必要です。
また「Safari」でもバグが発生するようです。

今のところ「Chrome」と「FireFox」では問題なく動作しますので、制作するホームページが「ChromeとFireFoxで表示確認できればOK!」という条件の場合、使うことができそうです。

スマホ・タブレットにも対応したホームページの制作ならアイドットデザインまで。

〈 この記事を書いた人 〉

芦刈光彦

Webディレクター芦刈光彦

社内では、Web制作のディレクション、フロントエンドを担当しています。
音楽と登山が好きです。ずっと福岡に住んでます。どうぞお気軽に。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

Webマーケティングのお役立ち情報を発信しています!