インライン画像と文字を揃えたい時のHTML作法

今時のテキストは、文中に絵文字を入力できるので、たいていのマーク類は多くのemoji種類から選べるが、ない時は画像をインラインで挿入するしかない。簡単そうだが、cssで随分に微調整しなくてはならず、面倒なので、レガシーcssに含めて、自己標準化してしまおう、ってはなし。

マージンで上下を調整

ずれるのは上下なので、調整できるCSSは「margin」「vertical-align」だ。この2つを使うのは、時にそのテキストを四角くボーダーで囲んだりする場合があるからで、ただの単純なテキストならどちらか1つでいい。

HTMLでする場合

<p>
日曜日は
<spam style="margin:0 3px; vertical-align : 2px;">
<img src="images/icons/ittuu.png"
width="12px" 
height="12px" 
alt="一方通行マーク" 
style="margin-bottom:2px;" />
公園通り
</spam>
区間車両通行止め
</p>

CSSにする場合

<!-- inline-img というclassを使うと想定した場合 -->
p img.inline-img {
margin:0 3px; vertical-align : 2px;
}
vertical-alignは囲んだ場合のみ

margin」ひとつで調整できるが、上の作例では「vertical-align」が入っている。マークをボーダーで囲まなくてはならない注文があったのでvertical…を含めたが、本来は不要。

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
主に広告デザインを中心に、企画・出版・編集・印刷、Web制作をしていますが、最近は記事そのものや、ブログ、動画などのコンテンツ配信にも力をいれています。インターネットの時代はコンテンツプロバイダになるのがとても重要。自分自身もランニングアートなど、自分自身がコンテンツになるように心がけています。