【プログラミング学習備忘録①】HTML/CSSで文章を縦書きにする方法

こんにちは。まつもとです＾＾　（@matsumoto_54111）

今日は模写をする中で新しく学んだ、HTML/CSSで文章を縦書きにする方法を書いていきます。私自身も後々見返せるよう、備忘録としてできるだけ簡潔にまとめようと思います。

• writing-mode: vertical-rl;　縦書き / 右から左に行を並べる。日本語の縦書きの指定方法はこちら。
• writing-mode: vertical-lr;　縦書き / 左から右に行を並べる。
• writing-mode: horizontal-tb;　横書き / 上から下に行を並べる。（初期値）

なお、”IE用の縦書き / 右から左に行を並べる”ための値は、「tb-rl;」を使う。
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;
}

上記の方法で、次のように表示されます。

最後まで読んでいただきありがとうございました！
【プログラミング学習備忘録】では、日々学んだことを簡潔にまとめて書いていこうと思います。

また、【プログラミング学習日記】では、私のプログラミング学習の方法や進捗状況について書いています。

もしご興味がありましたが、他の記事もお読みいただけると幸いです。

皆さま今日もお疲れ様でした！＾＾