box の左端と右端に書いた文字の下端を揃えるにはどうすれば

質問

box の左端と右端に書いた文字の下端を揃えるにはどうすれば
よいでしょうか。

<div style="width:200px;">
<span style="float:left;font-size:80%;">左端</span>
<span style="float:right;font-size:150%;">右端</span>
</div>

float を指定しなければ下端は揃っているのですが、
float をつけると下端ではなく上端が揃います。

回答No.3

naokita · ベストアンサー

NO.1.2 naokita です。お礼拝見済み。
--------------------------
floatするって事は、上揃えになるのは仕様上当然の結果です。
ただ、その代わりにpadding-topでスペースを作れば下線で揃う計算。

例： 50％ と 200％の場合は、padding-top: 3em;となる。
これなら簡単だと思ったのですが。
図で計算すればわかるでしょう（添付画参照）

考え方ですが、
元になる親font-sizeが 14pxだとして
（デフォルトで16pxでも12ptでも良いのですが・・・）、
この行の高さは高い方（大きい方）を基準として、
この場合の高さは、14px×150%=21px
低い方（小さい方）の文字は、14px×80%=11.2px
差し引き、9.8px
低い方の文字上部に9.8pxのpading-topがあれば、
下部の文字を押し下げて必ず下線で揃う。
ところが、
px指定を拡大縮小ズーム出来ないブラウザがあったり
%指定でもブラウザにより表示が違うので、
ここでは、em指定に設計する事。

そうすると、9.8pxをem変換すると、
本来は、9.8px/14px=0.7emとなるはずですが、
この親で既に80%としている為に
ここでの親font-sizeは、14px×80%=11.2pxになる。
ですから、
この11.2pxでの9.8pxの割合は、
9.8px/11.2px=0.875em　　つまり、およそ 0.9em って事です。

詳しくは、こんな感じですが、
計算するよりも大体の感覚で算出し表示確認した方が早いでしょう。
フォントファミリーによっても多少の誤差があるので注意。

お礼

図までつけていただいてありがとうございます。
おかげさまで、計算方法が理解できました。

80% に縮んだサイズが 1em になるので、padding-top の
サイズも元のサイズではなく 80% に縮んだサイズを元に
計算するということですね。

何度もお付き合いいただきありがとうございました。
これでこの質問を終わらせていただきます。

回答No.2

naokita

NO.1 です。お礼拝見済み。　以下、時間があれば色々とお試し下さい。
--------------------------
まず、質問上では　<div style="width:200px;">
と幅固定されていますので、
ブラウザで文字サイズのみを変更された場合にレイアウト崩れに対応する指定ではありませんね・・・
対応したいのなら、width:200px;を pxなどで指定しない事。

ブラウザによって微小の誤差はありますが、
一応は、主要ブラウザ対応でフォントサイズ変更も考慮した記述のはずです。
そのために padding-top が em 指定ですから。

制作時に「例」の font-size: % を変更して公開する場合には、
高い方150%なら、その行のMAXの高さになると考えるので、
低い方の高さを高い方の高さに計算して設定しないといけません。
今回の回答NO.1は、質問内容にあわせて、
150%から80%を差し引いた隙間分を1emに対して0.9emをpadding-topにしてあげたのです。
（本当なら　0.875em と計算になりますが　およそ 0.9em だったので）
意味わかりますか？
つまり、
ご自分で150%や80%を変更するのなら0.9emの部分を1em換算でfont-size変更に合わせて自分で変更してあげなければ隙間が合わずに当然ズレてしまうのです・・・
質問内容が150%と80%のfont-sizeだったので0.9emとしたってだけの事なので、
font-size変更指定する場合には、
この0.9emを制作段階でご自分で計算・換算して算出するように。
そうすれば、ブラウザでフォントサイズのみ変更されてもほぼ同じ下部の位置に表示されます。
----------------------------
例： 50％ と 200％の場合は、padding-top: 3em;となる。

<div style="width:200px; color: blue;">
<p style="float:left;font-size:50%; width: 2.1em; margin:0; padding-top: 3em;">左端</p>
<p style="float:right;font-size:200%; width:70%; margin:0; text-align:right;">右端</p>
<hr style="clear:both">
</div>

このpadding-top:の部分はブラウザで表示確認後に微調整しましょう。
（計算数値よりも見た目で調整って事です。）

※　ついでに他所も少々変更。（あくまで今回は単語２文字表示の場合）
　　他の文字数なら各width:を調整する事。
表示文字数が多い場合には注意。
float:が落ちない範囲に設定。
-------------------------

positionは、ブラウザや文字サイズに耐えられない環境があるので

お礼

重ねての回答ありがとうございます。この質問のきっかけは、font-size を
変えて <span> を並べただけであれば下端が揃うのに float で両サイドに
よせるとなぜ下端ではなく上端が揃ってしまうのだろうということでした。

align や text-align, vertical-align を試してもどうしても下端が
そろいませんでした。しかし、使い方が悪いだけできっと下端を揃える
方法があるはずだと考えました。

そのような方法があれば文字サイズを変更した場合やブラウザの設定で
文字を拡大縮小した場合もきれいに揃うだろうと期待しました。

いただいた回答から残念ながらそのような方法はなさそうです。
それでもう少し教えていただきたいのですが、padding-top で下げる
量はどのように計算するのでしようか。回答していただいた例で
きれいに位置があっているのですが、下げる量をいっぱつで計算できると
とても助かります。

font-size:80% と 150% だと、0.8em と 1.5em の差で 0.7em になり
そうな気がするのですが、0.9em とのこと、この計算方法を教えてい
ただけないでしょうか。
参考URL でも結構です。

よろしくお願いします。

回答No.1

naokita

<div style="width:200px;">
<p style="float:left;font-size:80%; width:2.1em; margin:0; padding-top: 0.9em;">左端</p>
<p style="float:right;font-size:150%; width:2.1em; margin:0; ">右端</p>
<hr style="clear:both">
</div>

表のセルでも vertical-align:bottom; とか色々。

お礼

回答ありがとうございます。
padding-top: 0.9em で位置を下げることでうまくあいました。
しかし、左右の文字の font-size を変えたり、ブラウザのメニューで
文字の大きさを変えると、ずれてしまいます。

vertical-align:bottom のように自動的にあわせることはできない
のでしょうか。

ちなみに前の質問で四隅を position:absolute であわせる
方法を教えてもらいました。同じやり方でできそうです。
ただ、やってみると微妙にずれている感じではあります。