こんにちは。まつもとです^^ (@matsumoto_54111)
今日は模写をする中で新しく学んだ、HTML/CSSで文章を縦書きにする方法を書いていきます。私自身も後々見返せるよう、備忘録としてできるだけ簡潔にまとめようと思います。
HTML/CSSで文章を縦書きにする方法
- cssでwriting-modeプロパティを使う
writing-modeプロパティの値の種類
- writing-mode: vertical-rl; 縦書き / 右から左に行を並べる。日本語の縦書きの指定方法はこちら。
- writing-mode: vertical-lr; 縦書き / 左から右に行を並べる。
- writing-mode: horizontal-tb; 横書き / 上から下に行を並べる。(初期値)
なお、”IE用の縦書き / 右から左に行を並べる”ための値は、「tb-rl;」を使う。
CSSにはベンダープレフィックスを付けて記入する。詳しい書き方は以下の通り。
HTML/CSSの書き方(縦書き/ 右から左に行を並べる場合)
HTML
<div class=”sample”>
<p>
行①<br>
行②<br>
行③<br>
</p>
</div>
CSS
.sample p {
-ms-writing-mode: tb-rl; /*IE用の指定*/
-webkit-writing-mode: vertical-rl; /*chrome用の指定*/
-o-writing-mode: vertical-rl; /*opera用の指定*/
writing-mode: vertical-rl;
}
上記の方法で、次のように表示されます。

最後まで読んでいただきありがとうございました!
【プログラミング学習備忘録】では、日々学んだことを簡潔にまとめて書いていこうと思います。
また、【プログラミング学習日記】では、私のプログラミング学習の方法や進捗状況について書いています。
もしご興味がありましたが、他の記事もお読みいただけると幸いです。
皆さま今日もお疲れ様でした!^^