小画像と文字の位置関係

画像と日本語の文字の下端を合わせるには

img {vertical-align:text-bottom;}

vertical-align による高さ合わせ

何も指定しないと、この位置になる。「黶龠鬥」は文字の範囲をいっぱいに使用した字として使っている。

黶龠鬥鬥黶龠

小さい字だとわかりにくいので2倍の大きさにすると、文字よりも画像が少し上に位置していることがわかる。

黶龠鬥鬥黶龠

英字との関係をみるとその理由がわかる。

黶龠鬥dbyapqudbyapq

英字と組み合わせると下があって見える。pqyのような下に突き出る部分まで日本語の文字は使用しているのである。このacexなどの文字の下の線が上下の配置の基準になっている。これをbaselineとよぶ。

これはスタイルシートで、vertical-align:baselineなどにより、変更することができる。

黶龠鬥鬥黶龠dbyapqudbyapq top

黶龠鬥鬥黶龠dbyapqudbyapq text-top

黶龠鬥鬥黶龠dbyapqudbyapq middle

黶龠鬥鬥黶龠dbyapqudbyapq baseline

黶龠鬥鬥黶龠dbyapqudbyapq text-bottom

黶龠鬥鬥黶龠dbyapqudbyapq bottom

middleも英字だと真ん中に見えるが、日本の文字では字の方が少し上に見える。

日本語で文字の下の線が画像の下に合うというためには、baselineでなく、text-bottomと指定するのがよい。

その他の指定

その他このような指定もある。

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq sub

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq super

%はline-heightを基準に画像の下端を合わせる。0%が baseline のようである。

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq 100%

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq 50%

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq 0%

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq -50%

黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq -100%

IEの問題

IEのバージョン5.0ではこの通りに行きません。次のようになります。

IEではどう見えるか

IEの2005年5月現在最新バージョンは6ですがまだ調査中。


ウェブページ(Sep.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2005 改訂