サイトを右上から表示させたい。

Question

WEBページの最初に表示される部分の場所を変えたいです。

WEBページが、ブラウザのウィンドウより大きい時、普通、Webブラウザはページの左上の部分を最初に表示させると思います。
そして、右側や、下側のはみ出た部分をみたければ、スクロールする、と言う感じだと思います。

現在縦書きの文章が続くようなサイトを作っています。
縦書きでは日本語は右から左に読むため、一番右にタイトルが来て、文章が左に進み、一番左で文章が終わる、という形になります。
なので、タイトルや文章の始まりが書いてあるサイトの右上の部分を最初に表示させ、そこからスクロールで左側を読んでいける感じにしたいです。

jsfiddleでの例
↑のリンクをみると、文章の最後が最初に表示されてしまう、というのがよくわかると思います....

どのように実装できるのでしょうか？
CSS、JavaScript、JQueryでの実装を考えています。

ネットでも調べたのですが、検索キーワードが悪いのか所望の情報は得られませんでした。

Answer 1

JavaScriptを用いた解法だとちょっと重かったり右端までちゃんと言ってくれなかったりおかしいところがあり、一方で縦書きを長く横に伸ばすサイトなどたくさんあるので、もっと簡単な実装があるのではないか、と調べたり色々試しました。

結果として、「body要素に直接"writing-mode:vertical-rl"」をつけると、何もしなくても一番右側を最初に表示をしてくれるようになりました。(今まではbodyの内部の他の要素で縦書きを指示していた。)

ちょっとサイトの構造設計を変える必要がありますが、今回の場合はこれで大体うまく行くと思います。

回答してくださった方々ありがとうございました。

改善版jsfiddleサンプル

Answer 2

ドキュメントの幅が画面幅より大きい場合、一番右端にスクロールさせればいいということですよね。

window.onload = function() {
  scrollTo(document.body.clientWidth, 0);
}

---

コメントより

ただ、文章量をもう少し増やしたところ、右端に行ってくれないようになってしまいました。

(真ん中あたりで止まる。)

なら、スクロール量を整数の最大値に設定したらどうでしょう。スクロール可能な最大値より大きい値を設定すると可能な最大値でスクロールされます。

window.onload = function() {
  scrollTo(Number.MAX_SAFE_INTEGER, 0);
}

動作確認サンプル

Comments

[aoies]

回答ありがとうございます。
確かにその方法論だなと思いました。
ただ、文章量をもう少し増やしたところ、右端に行ってくれないようになってしまいました。
(真ん中あたりで止まる。)
要素のクリックを起点とかにするとちゃんと右端に行くので、読み込みがちゃんと終わっていないうちにbodyの長さの計算をしているのかな、と思うのですが。JavaScript特にあまり触れてきていなかったのでもうちょっと私も調べてみます。

(参考)https://codepen.io/aoies99/pen/QWwyLXQ

Answer 3

縦書きCSSって結構前から普及していた気が・・・

参考：https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

<ul class="">
<li class=""><a href="#" class="">あいうえお</a></li>
<li class=""><a href="#" class="">かきくけこ</a></li>
<li class=""><a href="#" class="">さしすせそ</a></li>
<li class=""><a href="#" class="">たちつてと</a></li>
<li class=""><a href="#" class="">なにぬねの</a></li>
</ul>

<style>
ul{
writing-mode: vertical-rl;
}
</style>

Comments

[aoies]

すみません、実現したいのは縦書きにするところではないです。
縦書きで作ったサイトがブラウザで開いた時、左上(縦書きの文章の最後の部分)から表示されるのを右上から表示されるように直したい、というところです。
横に長くて、はみ出ているサイトを表示する時に、通常ブラウザは、左の端からの部分を最初に表示して、右側はスクロールしたら見える、という感じだと思います。でも縦書きで文章が長く続いて、横に伸びたサイトを作った場合、文章は右上から読みたいので、最初に表示されるのは、右上の部分であって欲しく、そこからスクロールすると左も見えてくる、と言う感じに実装したいです。

わかりにくくてすみません。
ちょっと質問を直しますね。

[sunglass]

こんな感じですかね。
https://teratail.com/questions/159174