テキストと⇧⇨⇩などの特殊文字との相対位置を調整する方法についての忘備録。
HTML 特殊文字コードで⇧⇨⇩などを表示すると、前後のスペースがばらばらになってしまう。文字列がすでに <span></span> の中にある場合、CSS で調整することができない。
⇧上のほうへ ｜ ⇨右のほうへ ｜ ⇩下のほうへ
これを回避するため、特殊文字を画像で作成する。しかし、そのままだと画像をどういじっても縦位置が微妙に揃わない。
上のほうへ ｜ 右のほうへ
｜ 
下のほうへ
定石に従い、次のようにして調整する。
HTML
<img class="adj" src="images/arrow-up.png" alt="" />上のほうへ
<img class="adj" src="images/arrow-rt.png" alt="" />右のほうへ
<img class="adj" src="images/arrow-dn.png" alt="" />下のほうへ
CSS
.adj {
position: relative;
vertical-align: -1px;（または top: 1px）
}
RESULT
上のほうへ ｜ 右のほうへ ｜ 下のほうへ
ウェブサイトにおいてはコンテンツがもっとも大切だが、デザインにも気を配らなくては。