CSSで縦書き

PR　当ページのリンクには広告が含まれています。

縦書き

• 文章を縦書きにして右から左へ流す。

• 縦書きの基本

  文章を縦書きにして右から左へ流す。

  親{text-align:right;
  display: inline-block;}
  子{writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;/*IE用*/
  text-align: left;
  display: inline-block;

   

• 1月11日

• 数字の回転

  二桁の数字など英数字を縦中横にしたいときはこちら。数字をspanで囲んでクラスを付与します。

  例
  <p class="tate"><span class="tate-chu-yoko">1</span>月<span class="tate-chu-yoko">11</span>日</p>
  
  css
  .tate-chu-yoko{text-combine-upright: all;
  -webkit-text-combine: horizontal;/*Safari */
  -ms-text-combine-horizontal: all;/*IE用*/}

   

• CSSで英数字、すべて縦書きにしたい。
  アルファベットABCDE
  数字12345

• 英数字、すべて縦書きにしたいときはこちら。IE, Edgeは対応していません。

  text-orientation: upright;

   

• センター揃えに
  したい

• センター揃えにしたい

  親要素をtext-align:center;に変更します。

  親{text-align:center;
  display: inline-block;}
  子{writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;/*IE用*/
  text-align: left;
  display: inline-block;

   

• 縦書きを横書きに戻したい

• 縦書きを横書きに戻したい

  PCでは縦書き、スマホでは横書きにしたい場合など。

  writing-mode:horizontal-tb;
  -ms-writing-mode:tb-rl;/*IE用*/
  text-align: left;