PCとそれ以外のデバイスでフォントサイズを変えたい(メディアクエリの使用)

スマホを購入して自分のサイトを閲覧したら…

見にくすぎわろた。自分のスマホで、自分のサイトを閲覧する前までは「縦が見にくいなら、横を向ければいいじゃない」と考えていました。ただ、横向きにすると、フォントサイズが大きくなり、さらに見づらくなってしまう。加えて、自分が考えていたほど、拡大・縮小が自在にできる訳ではない。

tableの見づらさも気になる問題。大きなtableをゲーム攻略ページで多用していることもあり、tableのfont-sizeも考え直したい。文字が大きくてテーブル内に改行があるよりも、文字は見にくいけど改行がないほうが見やすい感じはする。

このサイトは"デスクトップファースト"ですけど、スマホ閲覧時のフォントサイズだけでも変更しておいたほうがいいと考えたのが、メディアクエリ(@madia)に取り組むきっかけでした。できることはしっかりやっていかないと。

PCは現状維持の16pxで、それ以外のデバイスでは14pxに設定したいと考えています。

スマートフォンの最適なfont-size

PCの基準になるfont-sizeは16px。じゃあ、スマホは?

16pxが一番多いのかー。しかも、ペコプラさんによると、PCとスマホでフォントサイズを変えているサイトは13/30。う～ん…意外な結果ですね…。まぁ、とりあえず、勉強がてらに挑戦してみようと思います。

レスポンシブのfont-size

自分が調べた限りだと、プロの人たちが推奨しているfont-sizeの単位は"rem"がほとんど。というか、"html"自体にCSSの設定ができることを今初めて知ったんですけど。

個人的には、bodyに絶対値である"px"を設定して、あとは"em"でコントロールするほうが、細かい調整はしづらいものの、直感的に分かりやすく、簡単だと思うんだけどなぁ。

注意点として「em」は要素のフォントサイズを基準にするため、階層が下がるとその要素はその親要素のフォントサイズを基準にしてしまいます。

(中略)

そんな時、CSS3ではもっと便利な「rem」という指定が使用出来ます。「rem」 は常にhtml 要素のフォントサイズを基準にするのでhtml要素でfont-sizeを62.5%にしておけば、階層が深くなってもフォントサイズが狂うことはありません。

謎の数字、{font-size: 62.5%;}ってなに？｜株式会社しずおかオンライン

なるほど。ただ、素人が慣れない複雑なことをやると、大抵予期せぬトラブルが起きるんですよ。階層ごとにfont-sizeを変えるような複雑デザインにはしない(できない)し、不便だと感じない限りは、引き続き"em"を使用することにします。まぁ、純粋に書き直しがめんどくさいという説もありますけどね。

メディアクエリ(@madia)のお勉強

書きかたよりも、ブレイクポイントを決めるほうが難しそうですけど、今回の場合は「PCとそれ以外のデバイスでフォントサイズを変える」という単純な分岐です。

ブレイクポイントの設定

最初は、1024pxでの分岐になるんだろうな、と考えていました。ただ、ブレイクポイントのまとめ記事を参考にしつつ、タブレットの存在と、1024pxディスプレイの少なさを考慮して、

1. ～767px…14px
2. 768px～1024px…15px
3. 1025px～…16px

の3つに分けます。少し複雑ですけど、フォントサイズを変えるだけだし、意図しない挙動が起きたりはしないはずですよね…多分…。

メディアクエリは、新たなCSSファイルを作らず、既存のCSSファイルに書き込みます。

CSSのソース

@media screen and (min-width:1025px)  {
body  {
    font-size: 16px;
  }
}

@media screen and (min-width:768px) and (max-width:1024px)  {
  body  {
    font-size: 15px;
  }
}

@media screen and (max-width:767px)  {
  body  {
    font-size: 14px;
  }
}

既存のfont-size

bodyに設定していたfont-sizeは削除。

以上と以下

• min-width…最小の幅→～以上の幅
• max-width…最大の幅→～以下の幅

ややこしいわ。

デスクトップファースト

スマホではなく、PCの設定から順に書いています。

メディアクエリが機能しているか確認する方法

ブラウザの端をドラックし、幅を変えるだけで、反映されているかどうかを確認できます。分かりづらかったら、極端な数値(例えば50pxや1pxなど)を入れると分かりやすい。

tableのフォント

tableのfont-sizeは、メディアクエリを使わず、共通で0.8emに設定。いくらなんでも0.8emは小さすぎるだろうと思いつつ、試しに設定してみました。当面は、これで様子を見ます。さっそく、テーブルの再調整もしなければ。