リンクなどを作る際に▲を右に向けた文字を利用することがあります。ここではその書き方を説明します。
例えば、詳細はこちら ▲ といったものです。
▲の向きを変える
▲を右向きにする
▲
<span style="transform: rotate(90deg) scaleY(0.6) translateX(-3px); font-size: 40px; display: inline-block; ">▲</span>
transformはブロック要素にのみ適用される。そのため、<span style=”transform: rotate(90deg);”>とそのまま指定することはできない。よて、inlineとして機能するボックスとするようdisplay: inline-blockと指定します。
transformの書き方の注意点
transform: rotate(90deg) scaleY(0.6) translateX(-3px);
とまとめて指定する。
transform: rotate(90deg); transform: scaleY(0.6); transform: translateX(-3px);
と、別々に指定できないことに注意。
その他の項目について
- scaleY(0.6) scaleYで1未満の数を指定すると、X方向について縮めることができる。
- translateX(-3px) 前後の文字列の中央に配置するため、Y方向について移動させることができる。上手く表示されないときは使用するとよい。
指定しない場合は以下のようになる。
この文章についての三角形は▲
と若干、上に位置されるが、 translateX(-3px); と指定すると、
この文章についての三角形は▲
となる。
<span style="transform: rotate(90deg) scaleY(0.6) translateX(-3px); font-size: 40px; display: inline-block; ">▲</span>
関連するCSSプロパティについて
displayプロパティ
display ボックスの表示方法 コピペで使えるHTML+CSS
要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。
programming-cafe.com
transformプロパティ
transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
programming-cafe.com