情報/文字フォントのベースラインとHTMLのimg(イメージタグ)の関係

前記事の【情報/文字フォント(書体)と各種ライン】で触れたベースラインは、ご覧のようなブラウザのHTML文章中に画像を入れる際(d016_icon3(T) ←例えばこんな感じ)にも関連があります。
d019_1
▲ベースラインの位置。

今回はそのことと、CSS(カスケーディングスタイルシート、通称スタイルシート)によるそれの調整について書きます。
(HTMLとそのタグやCSSに関する全般的なことは他サイト様にゆずり、文字フォントのベースラインがらみの部分のみさわりだけ触れます)

 

H

TML文書中に画像を入れる時、ベーシックな方法としてHTMLタグの<img>を利用します。
例えば当サイトのバナーを利用した↓このようなソースなら、

abcdefghijklmnopqrstuvwxyz<img src=”http://kane-to.com/wp-content/uploads/2015/03/kane-to_banner0.gif” />かねト商店バナー(200x40px)

↓このように表示されます。

abcdefghijklmnopqrstuvwxyzかねト商店バナー(200x40px)

もう一つ、もっと天地が小さい画像では、↓このようになります(ソースは省略)

abcdefghijklmnopqrstuvwxyzかねト商店バナー(88x31px)

さらにマニュアルやヘルプ文書でありがちですがアイコン程度の大きさを文書に内に入れ込むと、冒頭でも挙げたように↓こちら

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※お使いのブラウザの設定等それぞれの環境により見え方がまちまちなので、私の環境のスクリーンショットを貼ります。
d020_0
▲書体はWindowsの「メイリオ」、サイズは16px程度です。

もうお分かりかも知れませんが、imgタグの属性やCSSのプロパティで特に何も指定しないと文字フォントのベースラインと画像の下辺が揃います。

 

C

SSによって、この画像の天地の位置を調整することが可能です。
前述のツールアイコンのように文書中にその文字フォントと同等の大きさの画像を入れ込みたいときに(完璧ではありませんが)便利で、vertical-alignプロパティを使います。
先の↓、
abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)
これに対して、

.note_icon {
vertical-align: -2px;
}

このようなCSSを適用すると画像が2px下がり↓こうなります(0pxでベースラインの位置)

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※これも見る側の環境によって変わるので、私の環境のスクリーンショットを貼っておきます。
d020_1
▲同じく書体はWindowsの「メイリオ」、サイズは16px程度です。

しかしこのCSSでの微調整は、前述のとおり見る側の環境によって位置やサイズが変わるので絶対的なものではありません。
ある程度そういうものだと妥協するか、容量(読み込み時間)が増え且つ検索にヒットしにくくなりますが上のスクリーンショットのように文字フォントも含めて画像にするのが良いでしょう。

 
ちなみにvertical-alignにはmiddleというプロパティがありこれを利用し、

.note_icon {
vertical-align: middle;
}

とすれば美しくセンター揃えに出来そうですが、実はこれは前記事にも出てきたエックスハイトに対しての天地センターなので、(「-」(ハイフン)と同じように)画像は和文フォントに対しては基本下がってしまいます。
d019_3
▲和文フォントは(書体にもよりますが)基本キャップハイトの大きさなので。

asobi_pic