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

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

ただいまの
回答率

90.53%

  • CSS

    7275questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 531

suizya2

score 17

前提・実現したいこと

レスポンシブデザインのサイトで文字サイズが画面サイズに合わせて滑らかに変動するようビューポートを活用して文字サイズを指定したい

発生している問題・エラーメッセージ

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

<div class="test" > テスト</div> 
body{ font-size: 14px;}
.test {
  font-size: 100%;}
  // 400px~1000pxの間では徐々に大きく
  @media screen and (min-width: 400px) {
        .test { font-size: calc(80%+20*(100vw-400px)/600);}
  }
  // 1,000px以上は、14pxに
  @media screen and (min-width: 1000px) {
        .test { font-size: 100%);}
  }

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

HTML5
CSS3

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/22 13:09

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

    キャンセル

  • 2017/02/22 13:23

    新しくファイル(いろんな設定や読み込みをおこなっていないもの)
    を作ってやったら問題なくできました。
    ・・・当該部分の記述ではなく、他の記述が悪い影響を
    与えて大小できなくなっていることが発覚しました
    いろいろ読み込んでいるので原因を探すのは難しそうです。

    お教えいただきありがとうございました!
    至らない質問でご迷惑おかけしました・・・。
    お教え頂いたことは今後に活かそうと思います

    キャンセル

  • 2017/02/22 13:27

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

    キャンセル

+1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/22 11:50

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

    キャンセル

  • 2017/02/22 13:23

    当該部分の記述ではなく、他の記述が悪い影響を
    与えて大小できなくなっていることが発覚しました
    いろいろ読み込んでいるので原因を探すのは難しそうです。

    お教えいただきありがとうございました!
    至らない質問でご迷惑おかけしました・・・。

    キャンセル

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

  • CSS

    7275questions

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