CSS
UI
Design

縦書きCSSで文庫本っぽいUIを作る

VertivcalTextCSS.gif



  • writing-mode: vertical-rl; これを入れるだけで縦書きになります。

  • 横スクロールで読書の視線を再現しています

  • 1文字目はインデントで字下げしたのも書籍を意識しています。

↓ タイトルを除く、pタグの1文字目は上余白を空ける

  &:not(.title):first-letter {

padding-top: 1.1em;


  • あとは適宜文字詰めや余白などを調整していく。


実装コード


See the Pen
ザ縦書き
by Asagiri (@agdg)
on CodePen.