三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS

三角の▲、不等号の>といった記号や文字の表示の方向を変えます。見出しや、文の初めなどに配置して文章にアクセントを加えることができます。

▲の向きを変える

▲を右向きにする

style属性で記述

<span>▲を右向きにしますと、</span>
<span style="display: inline-block; transform: rotate(90deg);">▲</span>
<span>となります</span>

transformはボックスにのみ適用される。そのため、<span style=”transform: rotate(90deg);”>とすることはできない。よて、inlineとして機能するボックスとするようdisplay: inline-blockと指定します。

▲を左向きにする

style属性で記述

<span>▲を左向きにしますと、</div>
<span style="display: inline-block; transform: rotate(-90deg);">▲</span>
<span>となります</span>

同様に指定します。角度を-90degに指定します。

>の向きを変える

>を下向きにする

style属性で記述

<span>>を下向きにしますと、</span>
<span style="display: inline-block; transform: rotate(90deg);">></span>
<span>となります</span>

同様にdisplayをinline-blockと指定します。

>を上向きにする

style属性で記述

<span>>を上向きにしますと、</span>
<span style="display: inline-block; transform: rotate(-90deg);">></span>
<span>となります</span>

見出し::before文字の向きを変える

三角見出しを変更しました

<h6 class="h6-before">三角見出しを変更しました</h6>

h6.h6-before{
  margin:5px;
  border:0px;
  padding:0px;
  font-size:20px;
}
h6.h6-before ::before{
  display: inline-block;
  content: "▲"; 
  margin-right:5px; 
  transform: rotate(90deg);
}

手順のまとめ

• 文字の回転
  • transformはブロックレベル要素に限るため、display:inline-blockとすして、ブロックボックスであるが、インラインとして扱われる要素にする。
  • divを用いた上で、display:inline-blockとしてもよい。

関連する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