Webサイトのデザインをする際に、テキストを斜めにしたいというケースがあります。
CSSだけで簡単にテキストを斜めに傾けることができるんですが、いつも書き方を忘れてしまうので、備忘録がてら記事にまとめておきます。
CSSのtransform:rotateでテキストを傾ける
テキストを斜めに傾けるという手法をどんな時に使うかというと、例えばこの記事で紹介している「記事一覧の最新記事にだけ新着マークをつける」というケースで「NEW」というテキストを傾けて表示させてます。
こんな時に今回紹介するテキストを斜めに傾ける方法が活用できますよ。
テキストを傾けるCSSのソース
HTMLはなんでも良いんですけども、例えばこんな感じ。先ほど紹介した記事と同じように「NEW」というテキストを斜めに傾けてみましょう。
<div class="pickup">NEW</div>
CSSは下記の1行を足すだけです。ベンダープレフィクスはもう要らないと思います。
.pickup {
transform: rotate(-45deg);
}
「transform: rotate」というのがテキストを傾けるための記述です。
「-45deg」という数字で傾き具合を調整するんですが、正の値なら時計回り、負の値なら反時計回りです。
傾く方向も分からなくなったら適当な値を入れてトライアンドエラーしてみてください。
引き続き先ほど紹介した記事の例ですが、新着記事の左上に「NEW」というマークをつけるという場合であれば、このように反時計回りに45度傾いてテキストが表示されます。
左上の新着マークには三角形の黄色い座布団を敷いてます。この三角形の作り方についてはこちらの記事をご覧ください。
最後に
僕もこの記事を書く際にようやく回転方向を理解したくらいあまり使ってませんでした。
たった1行でサクッと実装できますし、アイデア次第ではいろんなところで活用できる技なので、ぜひ皆さんも使ってみてくださいね。