CSSで縦書き

css

2021-01-24

縦書き

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

  • 縦書きの基本

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

    親{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;

     

-css

関連記事

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

cssで作るいろいろなグラデーション

鮮やかなグラデーションを取り入れたサイトをよく見ます。 様々なタイプのグラデーション記述方法をまとめてみました! グラデーションの種類 基本 グラデーションはbackgroundで指定します。先に書い …

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

テキストに縁や影をつける

cssでテキストに縁や影をつけます。