2

More than 5 years have passed since last update.

@AsagiriDesign(Atsushi Asagiri)

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

Last updated at 2019-04-13Posted at 2019-04-13

writing-mode: vertical-rl; これを入れるだけで縦書きになります。
横スクロールで読書の視線を再現しています
1文字目はインデントで字下げしたのも書籍を意識しています。

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

  &:not(.title):first-letter {
   padding-top: 1.1em;

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

実装コード

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

2

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

2