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

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

ただいまの
回答率

90.02%

レスポンシブのサイトのフォント指定

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 6,359
退会済みユーザー

退会済みユーザー

レスポンシブのサイトのフォント指定をremで行おうと思っているのですが、できればフォントサイズは100%など、端末に合わせたほうが良いとも聞くのですが、現場ではどのようにやっていますか?



例 PCの場合は下記で問題なさそうな気がします。
下記の設定で、ルート(基準を10PXにする)
html{ font-size: 62.5% } /*初期値16pxの62.5%でルートが10px*/

下記で全体を16pxにする。(PCの場合)
#wrapper {
  font-size: 1.6rem;
}


スマートフォン、タブレット端末はいくつにしますか?すべての端末を下記のみで補いますか?
html{ font-size: 62.5% } /*初期値16pxの62.5%でルートが10px*/

下記で全体を16pxにする。(PCの場合)
#wrapper {
  font-size: 1.6rem;
}


それとも下記の推奨サイズにするために、二つはメディアクエリーで小さいフォントにしますか?

一般的なデバイス別の推奨フォントサイズを纏めていますので参考にして頂けたら幸いです。

▽スマートフォン
    12px〜14px
▽タブレット端末
    14px以上
▽デスクトップ
    16px以上

下記を参考
http://gahakudesign.com/responsive-font/
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

大きな会社勤めではないので、自分のやり方になります。
レスポンシブ対応の場合、PC・スマートフォンどちらとも、font-size: 62.5%で1rem = 10px 基準にして設定しています。
※ htmlタグにfont-sizeの指定があると、remでブレイクポイントを指定する場合Safariでブレイクポイントがhtmlにつけたfon-sizeの影響を受けて他のブラウザと切り替わるポイントが変わってしまうので要注意です。
メディアクエリをremで指定する場合はbodyで設定したほうが安全かもしれません。
ただし、この場合コンテンツのフォントサイズはremで指定すると大きさがズレてしましますのでem指定などにしなければならなくなります。
参照: Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい!?
/* メディアクエリをrem指定する場合 */
body {
  font-size: 62.5%;
  line-height: 1.4;
}
メディアクエリをpxとかで指定する場合は素直にhtmlタグでフォントサイズを調整してしまい、コンテンツをrem指定にするのがカンタンです
/* メディアクエリをpxなどで指定 */
html {
  font-size: 62.5%;
  line-height: 1.4;
}

 フォントサイズの指定
レスポンシブ対応の場合 rem に対応していないブラウザがある可能性を考慮してpx指定を一緒にするのが良いかと思います。
#wrapper {
  font-size: 16px;
  font-size: 1.6rem;
}
 デバイス別のフォントとサイズ
個人的にはむしろモバイルの方が大きめのフォントサイズになるように心がけています。
リンクを失念しましたが、ちょい前に読んだ海外のblogでコンバージョンを上げたりサイト滞在時間を伸ばしたかったらフォントサイズを大きくしなさいとあったものの影響と結構年配の方がタブレットやスマートフォン使ってて文字が見にくいという声を聴く機会が多かったからです。

基本的にPC・スマートフォン・タブレット デフォルトは同じフォントサイズにしています。
最近は1.6remにする事が多いです。
その上で、使う最小のフォントサイズを
・PCは 英文なら1rem・日本語なら1.1remまで
・スマートフォン・タブレットは 1.2remまで
 リンクテキストならできれば1.4remまで
といった感じすることが多いです。
もっとも最近のモバイルファーストにして作る際は、スマートフォンに合わせてPCも最小フォントサイズ1.2remで統一しちゃってます。

全体をというよりは、特にタイトルなどPCで大きい文字がスマートフォンだと改行されすぎて読みづらいと言うことが多発するようであれば、タイトルをそれに関わる要素のフォントサイズを調整するということが多いです。

小さめの文字でおしゃれ感を出したいのか、blogのような読ませるベースで読みやすさを優先したいのかかとか、サイトのターゲット層は?とかに合わせてサイトの目的ごとにルールを作るのが良いかと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/23 08:25

    webpageさま
    説明が不十分ですみません。remはroot + emなので、htmlタグの値を基準にします。
    bodyにつけた方がの例はメディアクエリをrem指定にする場合の時です。
    この時はfont-sizeはem基本的に指定で設定することになります。
    メディアクエリをremで指定しないのであれば
    html {
    font-size: 62.5%;
    line-height: 1.4;
    }
    としてコンテンツをrem+px指定にするのがカンタンです。

    キャンセル

  • 2015/09/25 00:01

    お返事ありがとうございます。

    >bodyにつけた方がの例はメディアクエリをrem指定にする場合の時です。
    この時はfont-sizeはem基本的に指定で設定することになります。


    大元は下記のようにし
    html {
    font-size: 62.5%;
    line-height: 1.4;
    }

    メディアクエリで記載するCSSだけ、下記のようにすれば良いという事でしょうか。
    @media screen and (max-width: 320px) {
    body {
    font-size: 62.5%;
    }

    キャンセル

  • 2015/09/25 01:41

    webpageさん
    混乱させてしまったようでスミマセン。
    bodyでfont-sizeのベースを指定したほうが安全なのは下記のような場合です。
    ```css
    body {
    font-size: 62.5%;
    }
    /* ↓ メディアクエリでremを使っている場合 htmlにフォントサイズを指定すると... */
    @media screen and (max-width: 32rem) {

    }
    ```
    参考:
    px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス
    http://coliss.com/articles/build-websites/operation/work/schema-ui-framework.html

    キャンセル

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

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる