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 Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

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

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

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …

CSSで影をつける

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

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

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

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。