こんにちは。福岡のホームページ制作会社、シンス株式会社の芦刈です。

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！」という条件の場合、使うことができそうです。

スマホ・タブレットにも対応したホームページの制作ならシンス株式会社まで。