CSS | テキストを縦または横に伸縮させる方法

2022-01-22CSS テキスト,CSS

CSSでテキストそのものを縦長や横長の形状に伸縮させる方法を紹介しています。

テキストを横に伸縮させる

テキストを横に伸ばすCSSのサンプルコードです。

See the Pen CSS | Responsive Text by yochans (@yochans) on CodePen.

テキストはpタグで作成、class名には「.text」を付与しています。

<p  class="text">Responsive Text</p>

テキストを横に拡縮するには「transform」プロパティで「scaleX()」を指定します。

「scaleX()」はデフォルト値が「1」となり、それより小さい値、大きい値を指定する事ができます。

.text {
	text-align: center;
	font-size: 40px;
	color: #4169e1;
	transform: scaleX(1.5);
}

テキストを縦に伸縮させる

テキストを縦に伸ばすCSSのサンプルコードです。

See the Pen CSS | Expansion and Contraction Text 01 by yochans (@yochans) on CodePen.

テキストはpタグで作成、class名には「.text」を付与しています。

<p  class="text">Responsive Text</p>

テキストを縦に拡縮するには「transform」プロパティで「scaleY()」を指定します。

「scaleY()」はデフォルト値が「1」となり、それより小さい値、大きい値を指定する事ができます。

.text {
	text-align: center;
	font-size: 40px;
	color: #4169e1;
	transform: scaleY(1.5);
}