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
-

関連記事

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …

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

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

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

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

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

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

CSSで影をつける

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