No.3ベストアンサー
- 回答日時:
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
- 回答日時:
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:の部分はブラウザで表示確認後に微調整しましょう。
(計算数値よりも見た目で調整って事です。)
※ ついでに他所も少々変更。(あくまで今回は単語2文字表示の場合)
他の文字数なら各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
- 回答日時:
<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 であわせる
方法を教えてもらいました。同じやり方でできそうです。
ただ、やってみると微妙にずれている感じではあります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- PHP アンドロイドスマホでのphp echoの文字サイズ 1 2023/05/13 15:15
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
W3Cのソースコードの検証サービ...
-
CSS、width100%でもできる余白
-
widthやheightの数値に単位(px...
-
CSSで3分割した背景画像を配置...
-
z-indexで上になっている要素だ...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
div内に外部のurlを表示させたい
-
CSS上での計算を行うためのルー...
-
form input テキストを上下中央...
-
CSSでborderの長さを指定、また...
-
<li>の黒い点を消したい。
-
FC2ショッピングカート 写真の...
-
border-style:solidで文字がずれる
-
CSSでborderの指定を解除する記...
-
CSSがなぜかfont-sizeだけ効か...
-
WEBサイト作成:初心者です...
-
画像リンクの下に文字を付けた...
-
CSSと<dl><dd>で間隔をあけて1...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報