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

wood-cube

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

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

文字サイズを変える方法

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

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

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

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

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

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

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

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

document-a

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

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

https://wayswebhack.com/why-semantic-markup/

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

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

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

https://wayswebhack.com/wp-theme-osusume/