三角形や不等号、記号の向きを変える コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

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

▲の向きを変える

▲を右向きにする

▲を右向きにしますと、
となります
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によってどのように要素が配置されるかを例示します。

transformプロパティ

transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
LINEで送る
Pocket

タイトルとURLをコピーしました