こんにちは、さるまりんです。
今回はCSSの小ネタです。サイト構築やその他いろんなことをやりながら「こんな風にしたらできた〜」というものを記録していきたいと思います。よければお付き合いください。
本題。文字を斜めに傾けて表示する方法です。
文字を入力してたら→とか←とか↑とか↓とかは入力できるんだけど、ちょうどその間、斜め45°みたいなのが表示できないんです。どうしよう。
これをcssで実現する方法をメモっておきます。
ズバリこんな感じです。
以下のスタイルを用意。
/* 右斜め45度 */
span.rotate45 {
display: inline-block;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}そして斜め45°に傾けたい文字をclass="rotate45"を適用した<span></span>で囲むことで対象をを傾けて表示することができます。
↑を<span class="rotate45">↑</span>とすることで、↑を表示することができます。
おお！意外に簡単にできました。
←を<span class="rotate45">↑</span>とすることで、←も表示することができますね。
どちらにも矢印向け放題です。
注意点としてはdisplay:inline-block;にしておかないとこのスタイルは効かないようです。
transform、面白いですね。時間をみつけていろんな実験の結果をまたお伝えさせてください。
読んでくださってありがとうございます。
ではまた！