[css裏技] ブラウザのフォントサイズには表示限界がある?!

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

プログラミングを効率化することで、かなりの速度で仕事を熟すことができるようになった下駄です。
 

しかし、自分のコーディングルールが半年サイクルでどんどん更新されてしまうので、半年以上前のコーディングしたプログラムが陳腐化してしまう悩みに苛まされています。
 

先日、フロントエンジニアの方と一緒に仕事をした時に、かなり明確に画面設計書を作ってくれて非常に仕事がスムーズに進んでいたんですが、
その方は、文字サイズを異常なまでに小さくするという特徴があり、一番小さいフォントサイズを「6.5px」と小数点で指定するようになっていました。

ブラウザのフォントサイズの限界

WEBサイトの開発をすすめる時に、重要になるのが、マルチブラウザ対応ですが、開発効率をアップさせるために、ほとんどのWEBエンジニアは、特定のブラウザでの一括検証をして、一定期間ごとに、他のブラウザをチェックするという方法で効率よく開発しています。
 

そして、僕の周囲のエンジニアはほぼGoogleChromeで検証している人が多く、最近増えてきたChromeのバグ問題に頭を悩ませている人も多いようです。
(僕もですが・・・)
 

そして、以前フロントエンジニアから指定されたフォントサイズ6.5という指定をすると、GoogleChromeブラウザでは、なかなか小さいサイズが表示されず、
 

色々調べてみると、どうやら、フォントサイズ10px以下は表示ができない仕様になっているようです。
 

他のブラウザはこの時は調べなかったんですが、確かにそれ異常小さくても読みづらい為、対応しなくてもいいのではないかと思われるんですが、
 

読めない文字でもデザインとして表示したいというフロントデザイナーの要望に答えて、「何とかできないか?」と言われたので「できるよ」と返してあげました。

フォントサイズを極限まで小さくする方法

やり方は極めて簡単で、フォントサイズ6.5pxであれば、以下のように書きます。
 

 

そうです、スケール機能を使って、縮小させるだけなんですね。
 

でもちゃんと表示されています。
 

感激!!!
 


 

注意点としては、scaleを設定すると、transform-originを設定してあげないと、思いも寄らない位置に表示することになるのと、
縮小しても、元サイズの領域は維持されているので、marginなどを使ってうまくコントロールする必要が結構あります。

フォントサイズのエンジニア知識

どうやら、最近では、フォントサイズで”px”を使用せずに、”em”や”rem”を使う事が推奨されているようです。
 

でも、唯一無二のサイズ指定である”px”を信じてやまなかった下駄は、これまで”px”一本で過ごしてきました。
 

デザイナーが指定するサイズを的確に表示できるので何の問題もないだろうと思っていたんですが、
 

エンジニアがそんな思考では前向きエンジニアであるとは言えないので、ちゃんと学習してみました。
 

フォントサイズで指定できる値は、以下のようなものがあるようです。
 

 

おいおい・・・どんだけあんねん!!!
 

気ぃ狂うわ!!!
 

とりあえず、内容と特性だけわかっていればいいでしょう(苦笑)
 

参考 : https://ferret-plus.com/8041

文字が小さいとSEOに不利?

Googleのサーチコンソールをセットしていると、モバイルの問題点として、リンク同士が近接しているという報告を受けることがあります。
 

https://search.google.com/search-console/
 

モバイルでリンクが近接していると、誤ってタッチする可能性があるので、適当な感覚(指の大きさぐらい?)ぐらいは離れて設置されている必要があることを考えると、
 

「文字サイズが小さすぎて、文字が読めない」という指摘ももしかしたらあるかもしれませんね。
 

そうなるともしかすると、SEOのランキングにも影響がしてくる可能性もあるかも・・・(ないかも)

Leave a Reply

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