縦書きCSSで文庫本っぽいUIを作る
-
writing-mode: vertical-rl;これを入れるだけで縦書きになります。 - 横スクロールで読書の視線を再現しています
- 1文字目はインデントで字下げしたのも書籍を意識しています。
↓ タイトルを除く、pタグの１文字目は上余白を空ける
&:not(.title):first-letter {
padding-top: 1.1em;
- あとは適宜文字詰めや余白などを調整していく。
実装コード
See the Pen ザ縦書き by Asagiri (@agdg) on CodePen.
Author And Source
この問題について(縦書きCSSで文庫本っぽいUIを作る), 我々は、より多くの情報をここで見つけました https://qiita.com/AsagiriDesign/items/6d99f84d4b067a2cbeac著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .