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

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

新規登録して質問してみよう
ただいま回答率
85.51%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

8278閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

1クリップ

投稿2015/09/21 17:14

レスポンシブのサイトのフォント指定を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/

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

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

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

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

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

guest

回答1

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で指定したブレイクポイントがブラウザによって違うっぽい!?

css

1/* メディアクエリをrem指定する場合 */ 2body { 3 font-size: 62.5%; 4 line-height: 1.4; 5}

メディアクエリをpxとかで指定する場合は素直にhtmlタグでフォントサイズを調整してしまい、コンテンツをrem指定にするのがカンタンです

css

1/* メディアクエリをpxなどで指定 */ 2html { 3 font-size: 62.5%; 4 line-height: 1.4; 5}
フォントサイズの指定

レスポンシブ対応の場合 rem に対応していないブラウザがある可能性を考慮してpx指定を一緒にするのが良いかと思います。

css

1#wrapper { 2 font-size: 16px; 3 font-size: 1.6rem; 4}
デバイス別のフォントとサイズ

個人的にはむしろモバイルの方が大きめのフォントサイズになるように心がけています。
リンクを失念しましたが、ちょい前に読んだ海外のblogでコンバージョンを上げたりサイト滞在時間を伸ばしたかったらフォントサイズを大きくしなさいとあったものの影響と結構年配の方がタブレットやスマートフォン使ってて文字が見にくいという声を聴く機会が多かったからです。

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

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

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

投稿2015/09/22 03:00

編集2015/09/22 23:28
KiKiKi_KiKi

総合スコア594

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

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

退会済みユーザー

退会済みユーザー

2015/09/22 14:45

ありがとうございます。 下記のようにされているということですね。 ルート body { font-size: 62.5%; line-height: 1.4; } PC、スマホ、タブレット共通 #wrapper { font-size: 16px; font-size: 1.6rem; } ルートはhtmlタグでなくても良いのですね。 また、ラッパーがない場合は、ヘッダー、フッター、メインタグにそれぞれ下記を適応すればよいのですね。 header,footer,main { font-size: 16px; font-size: 1.6rem; } するとPC上では16pxになるはずなのですね。
退会済みユーザー

退会済みユーザー

2015/09/22 16:05

その後bodyにfont-size: 62.5%;を入れたところ全体的にものすごい大きいフォントになってしまいました。 htmlだとなりません。 bodyにfont-size: 62.5%;を入れてもルートとして認識するのでしょうか?
KiKiKi_KiKi

2015/09/22 23: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/24 15: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%; }
KiKiKi_KiKi

2015/09/24 16: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
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問