CSSでテキストを斜めに傾ける方法 (transformのrotateで回転させる)

CSSでテキストを斜めに傾ける方法 (transformのrotateで回転させる)
関連キーワード
デザイン

Webサイトのデザインをする際に、テキストを斜めにしたいというケースがあります。

CSSだけで簡単にテキストを斜めに傾けることができるんですが、いつも書き方を忘れてしまうので、備忘録がてら記事にまとめておきます。

CSSのtransform:rotateでテキストを傾ける

テキストを斜めに傾けるという手法をどんな時に使うかというと、例えばこの記事で紹介している「記事一覧の最新記事にだけ新着マークをつける」というケースで「NEW」というテキストを傾けて表示させてます。

関連記事『CSSで新着記事に新着マークを付ける方法』のサムネイル画像
CSSで新着記事に新着マークを付ける方法
続きを読む

こんな時に今回紹介するテキストを斜めに傾ける方法が活用できますよ。

テキストを傾けるCSSのソース

HTMLはなんでも良いんですけども、例えばこんな感じ。先ほど紹介した記事と同じように「NEW」というテキストを斜めに傾けてみましょう。

<div class="pickup">NEW</div>

CSSは下記の1行を足すだけです。ベンダープレフィクスはもう要らないと思います。

.pickup {
  transform: rotate(-45deg);
}

transform: rotate」というのがテキストを傾けるための記述です。

-45deg」という数字で傾き具合を調整するんですが、正の値なら時計回り、負の値なら反時計回りです。

傾く方向も分からなくなったら適当な値を入れてトライアンドエラーしてみてください。

引き続き先ほど紹介した記事の例ですが、新着記事の左上に「NEW」というマークをつけるという場合であれば、このように反時計回りに45度傾いてテキストが表示されます。
新着記事に新着マークを付ける

左上の新着マークには三角形の黄色い座布団を敷いてます。この三角形の作り方についてはこちらの記事をご覧ください。

関連記事『CSSだけで三角形を作りたいときに「CSS三角形作成ツール」が便利! | delaymania』のサムネイル画像
CSSだけで三角形を作りたいときに「CSS三角形作成ツール」が便利! | delaymania
続きを読む

最後に

僕もこの記事を書く際にようやく回転方向を理解したくらいあまり使ってませんでした。

たった1行でサクッと実装できますし、アイデア次第ではいろんなところで活用できる技なので、ぜひ皆さんも使ってみてくださいね。