こんばんは、タカアキです。だいぶ秋らしくなってきました。今日、衣替えのため、衣服を部分的に入れ換えました。といっても締め切っている時は、熱気がこもるので、まだ扇風機を回していることが多いです。

さて本題ですが、弊社ホームページの「料金表2～ホームページ料金表」を、修正しました。以前は、表の横スクロール等がうまくいかない状態でしたが、時間がつくれなかったこともあり、放ったらかしでした。横スクロールとともに、画面の右端に予期せぬ余白ができてしまい、フッターの固定メニューもきちんと下端に固定してくれなかったりと、「なんじゃこりゃ～」（ジーパン刑事風。古過ぎる？）という感じでした。

以下の2枚の画像は、修正後の出来上がりの、動作確認をした様子です。

画像-1　横スクロール＋ツールチップの動作の様子

画像-2　scrollhint の画像

（手の絵と、注意を促す文字が、描かれている）

やっと今回、時間ができ、WordPress、HTML、CSS等としばらく格闘した結果、すべて解決することができました。今回行なったことは、以下の通りでした。

1.　表を横スクロールする。

2.　1列目をstickyにより固定する。

3.　Scroll Hint の表示。

4.　？（青色のハテナマーク）のツールチップの表示。

これら全部を同時に、しかも WordPress ＋ Elementor 上で、正常に動作させるという、難易度が相当に高いものでした。ビューポートの幅だとか、z-indexにより各画層をどこにするか…とにかく悩むポイントがたくさんあったのです。そもそも、表が縦方向に巨大過ぎるのも問題なのですが、スマホという限られた画面にこれだけの情報を詰め込もうとすると、2次元（2D）では限界があるのだと思います。

とにかくすべて解決したので、満足感が大きいです。自分に言いたいです。「Good Job!」と。

横スクロール＋1列目固定＋scrollhint＋ツールチップ の修正

横スクロール＋1列目固定＋scrollhint＋ツールチップ　の修正