【コーディング備忘録】CSSで文字を斜めにする方法

最近、CSSで文字に角度をつける方法を学びました。
デザインソフト上で文字を斜めにすることはあっても、コーディングでは意外と機会がなくやってこなかったんですよね。

またいつか役立つかもしれないので忘れないうちに共有しておきます！

font-styleで文字を斜体にする

font-styleだと以下の2種類が使えます。

font-style: italic;

font-style: oblique;

斜体用に調整されたイタリックに対し、オブリークは文字を傾けただけのものを指すそうですが、パッと見た感じ違いがわかりません！

しかし、これだと傾きすぎ…？と微妙な角度の調整がしたくなった場合には次の方法が有効です。

transformで文字を斜体にする

transformを使えば好きな角度で文字を斜めにすることができます。画像にも効くので、余計なものまで傾斜させてしまう事もありますが、その点に気をつけてさえいれば有用なプロパティだと思います。

transform: skewX(○○deg);

イタリックやオブリークよりやや抑えめの傾斜にしてみました。

角度調整＋CSS自動生成ができる便利なサイトも

「希望の角度を狙って数値指定するのが難しい…。」
そんな方に向けて、感覚的にパパっと角度調整できてCSSを自動生成してくれる便利なサイトを紹介しておきます。

CMAN 傾斜文字・斜体文字のCSS作成

便利ツールを駆使してどんどん作業効率を上げていきましょう！
では〜。

▼ Webデザインもコーディングもこれ１冊で学べます！オススメ。