レスポンシブなサイトを作るときの文字サイズの指定について

wood-cube

画面の大きさによってWebサイトの表示(見た目)を変えるレスポンシブデザインですが、レイアウトの変え方は分かっても文字サイズの変え方は分からないという方も多いと思います。

今回は、レスポンシブデザインのWebサイトで、文字サイズを変える方法について見ていこうと思います。

スポンサーリンク

文字サイズを変える方法

参考にしたのはこのサイト。

スクリーンサイズに合わせてフォントサイズを変更 | Web Design Leaves

上記サイトでは、フォントサイズの変更方法に

  • em
  • rem

を挙げていますが、個人的にemでいいと思います。

なぜなら、リンク先にも書いてあるのですがremはIE6から8に対応していないからです。remの方がフォントサイズの指定は楽だと思いますが・・・。

また、なんとなく今後はremで指定するサイトが増えそうです。まぁ、どっちもやってみて好きな方を使ってください。。

文字サイズは好みの部分が大きい!?

それと、先ほどのサイトを参考にして実際にサイトを作ってみたのですが、その時にそのサイトをスマホで見て「ちょっとp要素の文字小さくないかな?」と思いました。また、h2要素の文字が大きすぎる印象を受けました。

これは、好みによる部分が大きすぎるのでなんとも言えないかもしれませんが、フォントサイズの大きさ指定はほんとに難しいです・・・。

サイトによって、文字が大きすぎたり小さすぎたり、行間が狭すぎたり開きすぎたりまちまちですしね・・・。

document-a

自分が「これはちょうどいい!」と思っていても、人によっては最悪のページだと感じることもあるかもしれないので、ほんとに難しいです。

なぜ、意味に基づくマークアップをする必要があるのか?でも書きましたが、これからは構造化が重視されたサイトや、デバイスだけでなく閲覧者にも最適化されたサイトが勝ち残りそうです。

なぜ、意味に基づくマークアップをする必要があるのか?
Webページに深い意味情報を付加することがHTML5では求められています。しかし、そもそもなぜ「意味情報の付加」が必・・・

さいごに

ちなみにですが、このブログで使っているWordPressテーマのSimplicityは、スマホで表示した時に文字サイズが調度よくて嬉しいです。

昔は、h2が少し大きいと感じていたのですが、それもバランスよく改善されました。

ユーザーの感想をとらえてサイトに反映させていくことは根気のいる作業だと思いますが、頑張ってやっていくべきですね・・・。

WordPressの無料テーマでSTINGERでもなくGushでもなくSimplicityをおすすめする理由
個人が作成しているWordPressの無料テーマで有名どころといえばSTINGER5 Gush2 Princi・・・
スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*