スポンサード リンク
writing-modeプロパティ
webでは通常、横書きですが、writing-modeプロパティを使えば、日本語の小説のように縦書きで表示することができます使い方(書式)
セレクタ { writing-mode: 値; }
writing-modeプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | する |
プロパティの値 | 説明 |
lr-tb | 文章を横書きで表示 |
tb-rl | 文章を縦書きで表示 |
実際の指定方法
p.hoge { writing-mode: lr-tb; } /* 横書きの文章 */
p.hoge2 { writing-mode: tb-rl; } /* 縦書きの文章 */
.hogebox { width: 300px; border: solid 1px #FF6600; } /* box外枠 */
html部分
<div class="hogebox"> <p class="hoge">横書き、通常の表示</p> <p class="hoge2">縦書き文章</p> </div>
実際の表示
横書き、通常の表示
縦書き文章