【CSS】全画面いっぱいの横スクロールで、右端をスクロール開始位置にする方法

2020 /11 /04 ｜2026 /01 /05

切り絵百鬼夜行絵巻の特設サイトを作っていました。

そこで、横に長い絵巻画像をサイトに貼り付けていたのですが、ページを表示させると、一番左側（絵巻の最後の部分）が表示されてしまっていました。

こう。

でも、絵巻は右から左に進むので、ページ表示されたら、画像右側の冒頭部分が出て欲しかったんですね。

この問題は以下のCSS１行で解決しました。

これは本来、右から左に書くヘブライ語やアラビア語のテキストなどで使われるCSSのようですが、こんな感じで、画像の開始位置を右端にする場合にもトリッキーに使えることがわかりました。

やったね！

参考