CSS3を使用してテキストの垂直配置を実現する方法

最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパティを使用しました。

Writing-mode は元々 IE でサポートされていたプロパティでしたが、後にこの新しいプロパティが CSS3 に追加されたため、IE と他のブラウザの構文は異なります。

1.0 CSS3 標準

writing-mode:horizontal-tb; //デフォルト: 水平方向、上から下 writing-mode:vertical-rl; //垂直方向、右から左 writing-mode:vertical-lr; //垂直方向、左から右

デモ

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>CSS テキストの垂直配置</title>
        <スタイル タイプ="text/css">
            div{
                境界線: 1px 実線の水色;
                パディング: 5px;
            }
            .縦書きテキスト{
                -webkit-writing-mode: 垂直方向;
                書き込みモード: 垂直方向;
            }
        </スタイル>
    </head>
    <本文>
        <div class="vertical-text">
            1. テキストは縦に並べられています<br />
            2. テキストは縦に並べます</div>
    </本文>
</html>

2.0 インターネットエクスプローラ

歴史的な理由により、IE におけるこのプロパティの値は特に複雑です。

詳細については、公式ドキュメントを参照してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/ライティングモード/

3.0 いくつかのアプリケーション

3.1 垂直方向の中央揃え

このプロパティを使用すると、text-align:center と組み合わせて垂直方向の中央揃えを実現したり、margin: auto を使用したりできます。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>CSS3 画像の垂直中央</title>
        <スタイル タイプ="text/css">
            div{
                境界線: 1px 実線の水色;
                パディング: 5px;
                高さ: 500px;
            }
            .垂直画像{
                -webkit-writing-mode: 垂直方向;
                -ms-書き込みモード: bt-rl;
                書き込みモード: 垂直方向;
                テキスト配置: 中央;
            }
        </スタイル>
    </head>
    <本文>
        <div class="vertical-img">
             <画像 src="1.jpg"/>
        </div>
    </本文>
</html>

3.2 テキスト沈み込み効果

テキストの writing-mode を設定し、それを text-indent と組み合わせて、テキストがクリックされたときに沈む効果を実現できます。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>テキスト沈み込み効果</title>
        <スタイル タイプ="text/css">
            .btn{
                幅: 50px;
                高さ: 50px;
                行の高さ: 50px;
                色: 白;
                テキスト配置: 中央;
                フォントサイズ: 16px;;
                表示: インラインブロック;
                境界線の半径: 50%;
                背景: グレー;
                カーソル: ポインタ;
            }
            .btn:アクティブ{
                テキストインデント: 2px;
            }
            .縦書きテキスト{
                 書き込みモード: tb-rl;
                -webkit-writing-mode: 垂直方向;      
                書き込みモード: 垂直方向;
                *書込みモード: tb-rl;
            }
        </スタイル>
    </head>
    <本文>
        <span>赤い封筒を受け取るにはクリックしてください</span>
        <p class="vertical-text btn">開く</p>
    </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Docker Compose ワンクリック ELK デプロイ方式の実装

>>: JavaScript配列の重複排除のいくつかの方法についての詳細な説明