Written by Kasumi

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

CSSのfont-styeプロパティで文字(テキスト)にitalicを付与したが効かない。

どうやらフォントの種類がitalicに対応してない模様。

italic以外で文字を斜めに出来る方法を知りたい。

本記事ではこのような悩みを解決します。

font-styleプロパティitalic以外で傾きを付けるCSSプロパティ

.text {
  transform: skewX(-5deg);//傾き角度
}

italic以外で文字に傾きを付けるにはtransformプロパティを使います。

skewX()関数を値に入れ、引数に角度degを指定します。

以上の方法で文字に傾斜を入れる事ができ、italic仕様に出来ます。

まとめ

italicが使えたとしてもフォントの種類によってはデザインと傾斜角度が変わる場合が多々あります。

そんな時transformプロパティを使えば好きなように角度を調節できるので便利です。

以上で解説を終わります。

目次

関連記事

Illustrator プログラミング

【イラストレーター】SVGの書き出しがズレたり・崩れたりして綺麗に書き出しできない【簡単解決】

2021.04.07
4527
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
5581
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
598
PHP プログラミング

【簡単PHP】連想配列からkey(キー)のみ取得、もしくは値のみ配列で再取得する方法

2022.03.22
3167