質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

calc()で算出したフォントサイズがEdgeでおかしなことに…

LibertyBell3
LibertyBell3

総合スコア1084

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0グッド

0クリップ

14144閲覧

投稿2016/10/12 15:44

検証用でHTMLにベタ書きですが、以下のように。

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6<style> 7html { 8 color:#000; 9 line-height:150%; 10 font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif; 11 font-size:calc(87.5% + 0.25vw); 12} 13 14p { 15 display:inline-block; 16 background-color:#f60; 17 padding:20px; 18 color:#fff; 19 font-size:2em; 20 font-weight:bold; 21 border-radius:8px; 22} 23</style> 24</head> 25 26<body> 27<p>この文字がすごいことに</p> 28</body> 29</html>

をMS Edgeで見ると、
並べてみました
上のようになり、Firefox/Chrome/Operaで見ると、下のようになります。
フォントサイズは、87.5%で14px相当を基本に、0.25vwで2px相当足して、
16pxがベースフォントサイズになるようにしていて、
この文字部分は2emにしてあるので、おおよそ32px相当になってくれれば、
意図したサイズなので、下の方が正解となるのですが…
Edgeだと、0.25vwの部分だけ反映されているようで、
その証拠に、ブラウザサイズを変更すると、上の画像より、小さくなって
くれるんですね(画像はいずれもフルスクリーンでキャプチャ)。

ちなみに、Windows10にしてから、IETesterでIE9以降のテストが
出来なくなっているので、未確認…

コリスさんの紹介記事
calcはIE9以降で対応しているはずなので、上記サイトと同じことを
やっているのですが、計算式がだめなのでしょうか?それとも、Edgeのバグ?
可能な方であれば、IE9-11でどうなっているか、教えていただけると幸いです。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

IE9-11でもMS Edgeと同じ表示でした。
この問題については、IE(MS Edge)のバグだと思います。

以下のような対応はいかがでしょうか。

<代替案>

html

1html { 2 color:#000; 3 line-height:150%; 4 font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif; 5 font-size:62.5%; 6} 7 8body { 9 font-size:calc(1.4em + 0.25vw); /* =14px + 0.25vw*/ 10}

ちなみに
0.25vw = 2px なのは、viewport(表示領域)が800pxのときのみです。

Windows10にしてから、IETesterでIE9以降のテストが 出来なくなっているので、未確認…

https://121ware.com/qasearch/1007/app/servlet/relatedqa?QID=017902
こちらで確認できないでしょうか?

投稿2016/10/13 02:18

takumaro_web

総合スコア301

LibertyBell3, kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

LibertyBell3

2016/10/13 05:01

ご回答、ありがとうございます。 提案の通りで、意図したサイズになりますね。 IE9-11/Edge では、calc(% + vw)の形式では正常な計算が出来ないってこと なんでしょうね。(vhもかな?) 2px相当なのは…は、先の紹介ページにもあるので、承知しておりました。 省いてしまいすみません。 それより、お恥ずかしいのが、Windows10にIE11が入っていたことに 気づいていなかったこと(笑)。穴があったら入りたい…
takumaro_web

2016/10/13 05:10

>IE9-11/Edge では、calc(% + vw)の形式では正常な計算が出来ないってこと なんでしょうね。(vhもかな?) おそらくそうだと思います。 海外でも結構困ってる方が多いみたいでした。 <参考までに> https://www.sitepoint.com/community/t/font-size-calc-100-0-3vw-not-working-in-ie/218960 https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/ http://stackoverflow.com/questions/25241762/calc-not-working-ie-11 >Windows10にIE11が入っていたことに気づいていなかったこと(笑)。 意外に知らない方も多いかもしれないです!
LibertyBell3

2016/10/13 05:56

一番上のサイトはたどり着いていましたが、英語が…(笑) って、cootheadさんという方が、正解を書いていますね!! 読解力の無さに、また恥ずかしくなりました(笑)。 とにかく、非常に助かりました。ありがとうございます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。