Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8600

【初心者向け】フォントサイズの指定は10pxより小さくはならない

$
0
0

どうも7noteです。フォントサイズの指定は10pxより小さくしないようにしましょう。

WEBサイトを作成するときにfont-sizeでフォントの大きさを指定できますが、
フォントサイズは10pxより小さくならないように気をつけましょう!

なぜフォントサイズは10px以下にしてはいけないのか?

結論:いけないわけではないが、対応していないブラウザが多いので指定しても効かない。

たとえばGoogleChromeでfont-size:5px;と指定しても、効きません。
最も小さいサイズは10pxになります。

sample.gif

ではなぜブラウザで小さい文字に対応していないのか。
webサイトに訪問した人が読めるようにしましょうという意味で最も小さいものが10pxになっています。

PC表示であれば16px前後。スマホであれば14px前後を目安にデザインを作成するのが一般的です。その中でも小さい文字は10pxまでで作成するようにしましょう。

どうしても小さい文字を入れたい時の対応策

①cssで要素を縮小する

.mini-size{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);}

scale()で倍率を指定することができます。上の場合であれば、0.5倍、つまり半分のサイズになります。10pxを指定しているところにscale(0.5)を指定すれば、見た目的には5pxで表示しているのと同じことになります。

②画像にする

小さい文字でも画像にいしてしまえば表示することができます。

まとめ

これらのように小さい文字を表示する方法はありますが、結局は「訪問者が使いやすい、見やすいサイトになっているか」が重要だと思います。
注意書きであまり見せたくないからといって小さな文字にするのは、見る人からすれば親切じゃないなと思うと思います。

小さくても11px〜12pxくらいがいいかなと思います。(※個人的な意見)

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ


Viewing all articles
Browse latest Browse all 8600


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>