プログラミング学習備忘録

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

こんにちは。まつもとです^^ (@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;
}

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

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

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

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

皆さま今日もお疲れ様でした!^^