CSS | 長文の文章を縦書き表示、右寄せ、初期位置など
CSSで文章を右からの縦書き表示にする方法の紹介です。
文章を縦書き表示にする
CSSの「writing-mode」を使って右から文章を縦書き表示にする動作サンプルとサンプルコードです。
See the Pen test by yochans (@yochans) on CodePen.
<div id="text-box">
<div id="text">
<h2>吾輩は猫である</h2>
<p>吾輩は猫である。名前はまだない。</p>
<p>どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
<p>しかしその当時は何という考えもなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ち付いて書生の顔を見たのがいわゆる人間というものの見始めであろう。</p>
</div>
</div>#text-box{
height: 100vh;
overflow-y: hidden;
/* text-align: right; */
/* text-align: center; */
}
#text{
padding: 20px;
writing-mode: vertical-rl;
text-align: left;
display: inline-block;
}縦書き表示の中央寄せ・右寄せ
縦書きに変換した文章の中央寄せや右寄せが必要な場合はコメントアウトしている「text-align: center;」「text-align: right;」を有効にします。
長文になる場合の初期位置と横スクロール
文章量が多い場合に要素やウィンドウ・画面のサイズ以上となる場合、上記のサンプルのままでは開始位置が文章の後半部分となってしまいます。
スクロール状態の初期位置を変更する為に以下のJavaScriptコードを追加することで、ページが読み込まれた際に一番最初の部分から表示する状態にします。
document.getElementById("text-box").scrollLeft = 10000;※scrollRight関数は存在せず、「scrollRight=0」という指定方法ができませんのではありませんの「scrollLeft」で大きな数値を与えています。（単位はpx）
実装結果は以下のようになります。
See the Pen Vertical in write mode by yochans (@yochans) on CodePen.
タッチ操作可能なモバイル端末では、「overflow-scrolling」がデフォルトでスワイプ可能になっているようですのでこのままでスワイプによる横スクロールが可能そうです。
PCのマウス操作では、別途スクロールボタンやドラッグによるスクロールを実装するか、スクロールバーという事になります。
モバイル端末でのページ移動を減らした長文小説や詩集なんかに活用できそうですね。