CSSで縦書き

2021-01-24

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

縦書き

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

  • 縦書きの基本

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

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

     

  • 111

  • 数字の回転

    二桁の数字など英数字を縦中横にしたいときはこちら。数字を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;

     

広告スポンサーリンク