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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2005閲覧

ビューポートを用いた文字サイズ指定

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/02/22 01:56

編集2017/02/22 02:24

###前提・実現したいこと
レスポンシブデザインのサイトで文字サイズが画面サイズに合わせて滑らかに変動するようビューポートを活用して文字サイズを指定したい
###発生している問題・エラーメッセージ

下記のコードを使って400px~1000pxの画面サイズで表示させて デベロッパーツールで確認すると font-size: calc(70%)が当範囲で一貫して適用されてしまいます。 (ウィンドウの大きさに関わらず当範囲では70%になってしまいます・・・) おそらくcalc内に問題があるのだと思いますが なにがいけないのかわかりません・・・ご教示願います。

html

1<div class="test" > テスト</div>

css

1body{ font-size: 14px;} 2.test { 3 font-size: 100%;} 4 // 400px~1000pxの間では徐々に大きく 5 @media screen and (min-width: 400px) { 6 .test { font-size: calc(80%+20*(100vw-400px)/600)} 7 } 8 // 1,000px以上は、14px9 @media screen and (min-width: 1000px) { 10 .test { font-size: 100%)} 11 }

###補足情報(言語/FW/ツール等のバージョンなど)
HTML5
CSS3

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

記述が間違っています。
こういったエラーはGoogleChromeのデベロッパーツールなどで、css style部を見ると
黄色い三角マークでプロパティーエラーと表示されます。
正しくは

font-size: calc(80% + 20 * (100vw - 400px) / 600);

演算子の前後に半角スペースを入れるとエラーが無くなります。

投稿2017/02/22 03:31

shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/02/22 04:09

ご回答ありがとうございます! 半角入れてみたら確かに‐の色がかわりました! しかし…お教え頂いた修正文コピペしてみましたが 変化ありませんでした・・・ GoogleChromeのデベロッパーツールを用いているのですが 黄色い三角のマークは出ず計算結果はfont-size: calc(70%);となって表示されるままです。 新しいファイル作成して今一度ためしてみます!
退会済みユーザー

退会済みユーザー

2017/02/22 04:23

新しくファイル(いろんな設定や読み込みをおこなっていないもの) を作ってやったら問題なくできました。 ・・・当該部分の記述ではなく、他の記述が悪い影響を 与えて大小できなくなっていることが発覚しました いろいろ読み込んでいるので原因を探すのは難しそうです。 お教えいただきありがとうございました! 至らない質問でご迷惑おかけしました・・・。 お教え頂いたことは今後に活かそうと思います
shaak

2017/02/22 04:27

解決してよかったです! 私の環境では半角スペースを入れないとプロパティエラーが起きていました。 calcってたまに予想外の動きをするので悩まされますよね・・
guest

0

投稿2017/02/22 02:41

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/02/22 02:50

ご回答ありがとうございます! 当該サイト参考に記述したものなのですが なぜか再現できないのです、、、 記述された文章をコピーしてつかってもみましたが そもそも @media screen and あたりの記述が正確でないためか 再現性はえられませんでした、 以前まぐれでできたことがあったので(データ紛失) 必ずどこか直せば実現できる文章であるとはおもうのですが それがどこなのか・・・・・思い出せず頭を抱えています。
退会済みユーザー

退会済みユーザー

2017/02/22 04:23

当該部分の記述ではなく、他の記述が悪い影響を 与えて大小できなくなっていることが発覚しました いろいろ読み込んでいるので原因を探すのは難しそうです。 お教えいただきありがとうございました! 至らない質問でご迷惑おかけしました・・・。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問