CSS | イタリック体を使わずにテキストを斜体にする方法

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

CSSでイタリック体（italic type）を使わずにテキストを斜体で表示する方法を紹介しています。

イタリック体を使わずにテキストを斜体にする

イタリック体を使わずにテキストを斜体にする表示サンプルとCSSのサンプルコードになります。

See the Pen CSS | Change the background color of the text by yochans (@yochans) on CodePen.

斜体表示にする対象のテキストにpタグ、class名に「.text」を指定しています。

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

テキストの文字を斜体にするには「transform」プロパティで「skewX()」を指定します。

「skewX()」の指定単位は「deg（角度）」です。
「-10deg」から「-40deg」あたりが視認性を考慮した右側に傾いた文字になります。

同じ量を左側に傾けたい場合は負の値から正の値にします。

.text {
	text-align: center;
	font-size: 50px;
	color: #4169e1;
	transform: skewX(-24deg);
}