読みやすいCSSテクニック

文字の大きさ2 ページ2

.

　PC、スマホ、それぞれで合わせてpxで指定すると逆に読みにくくなってしまいますが、PCとスマホでCSSを分けることも可能なので、それも紹介しておこうと思います。

　PCの読みやすいサイズが、フォントにもよりますが15px〜17px、スマホの読みやすいサイズが13px〜15pxくらいだと思います。なのでパソコンから編集していて見やすいように16pxで指定してしまうと、スマホから見たときに文字が大きくて読みにくくなってしまいます。その逆のパターンもあり得ます。

　フォントの太さや大きめ小さめに合わせて読みやすい大きさを探してください。

@media screen and (max-width:767px){
div#desc,#u_result{font-size: 14px;}
}
@media screen and (min-width:768px){
div#desc,#u_result{font-size: 17px;}
}

　これでPCでは17px、スマホでは14pxで表示できます。14、17を変えれば別の大きさにもできます。

　ここはPCから見たら17px、スマホから見たら14pxになるように指定しています。もしそうなっていなければ、お使いの機器やブラウザが非対応の可能性があります。

サンプル集→←文字の大きさ１

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す