プログラミングを効率化することで、かなりの速度で仕事を熟すことができるようになった、ユゲタです。
しかし、自分のコーディングルールが半年サイクルでどんどん更新されてしまうので、半年以上前のコーディングしたプログラムが陳腐化してしまう悩みに苛まされています。
先日、フロントエンジニアの方と一緒に仕事をした時に、かなり明確に画面設計書を作ってくれて非常に仕事がスムーズに進んでいたんですが、
その方は、文字サイズを異常なまでに小さくするという特徴があり、一番小さいフォントサイズを「6.5px」と小数点で指定するようになっていました。
ブラウザのフォントサイズの限界
WEBサイトの開発をすすめる時に、重要になるのが、マルチブラウザ対応ですが、開発効率をアップさせるために、ほとんどのWEBエンジニアは、特定のブラウザでの一括検証をして、一定期間ごとに、他のブラウザをチェックするという方法で効率よく開発しています。
そして、僕の周囲のエンジニアはほぼGoogleChromeで検証している人が多く、最近増えてきたChromeのバグ問題に頭を悩ませている人も多いようです。
（僕もですが・・・）
そして、以前フロントエンジニアから指定されたフォントサイズ6.5という指定をすると、GoogleChromeブラウザでは、なかなか小さいサイズが表示されず、
色々調べてみると、どうやら、フォントサイズ10px以下は表示ができない仕様になっているようです。
他のブラウザはこの時は調べなかったんですが、確かにそれ異常小さくても読みづらい為、対応しなくてもいいのではないかと思われるんですが、
読めない文字でもデザインとして表示したいというフロントデザイナーの要望に答えて、「何とかできないか？」と言われたので「できるよ」と返してあげました。
フォントサイズを極限まで小さくする方法
やり方は極めて簡単で、フォントサイズ6.5pxであれば、以下のように書きます。
.small-font-65{
font-size:10px;
transform:scale(0.65);
}
そうです、スケール機能を使って、縮小させるだけなんですね。
でもちゃんと表示されています。
感激！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-size</title>
</head>
<body>
<style>
.fs{
border:1px solid black;
}
.font-size14{
font-size:14px;
}
.font-size10{
font-size:10px;
}
.font-size65{
font-size:6.5px;
}
.font-size65-2{
font-size:10px;
transform:scale(0.65);
transform-origin:center left;
}
</style>
<h3>font-size:14px;</h3>
<div class="fs font-size14">これはフォントサイズ14px設定です。</div>
<h3>font-size:10px;</h3>
<div class="fs font-size10">これはフォントサイズ10px設定です。</div>
<h3>font-size:6.5px;</h3>
<div class="fs font-size65">これはフォントサイズ6.5px設定です。</div>
<h3>font-size:6.5px;対応版</h3>
<div class="fs font-size65-2">これはフォントサイズ6.5px設定です。</div>
</body>
</html>
注意点としては、scaleを設定すると、transform-originを設定してあげないと、思いも寄らない位置に表示することになるのと、
縮小しても、元サイズの領域は維持されているので、marginなどを使ってうまくコントロールする必要が結構あります。
フォントサイズのエンジニア知識
どうやら、最近では、フォントサイズで"px"を使用せずに、"em"や"rem"を使う事が推奨されているようです。
でも、唯一無二のサイズ指定である"px"を信じてやまなかった下駄は、これまで"px"一本で過ごしてきました。
デザイナーが指定するサイズを的確に表示できるので何の問題もないだろうと思っていたんですが、エンジニアがそんな思考では前向きエンジニアであるとは言えないので、ちゃんと学習してみました。
フォントサイズで指定できる値は、以下のようなものがあるようです。
1. px : 1ピクセルを1として表示
2. % : 親要素サイズの割合
3. em : %と同じ
4. rem : ページ全体サイズの割合
5. pt : 1/72インチで約0.35mmを1ポイントとして表示
* 以下はフォント以外でも指定できるサイズ
6. ex : 指定されているフォントサイズの*倍で表示できる
7. vw : viewportのwidthの割合
8. vh : viewportのheightの割合
9. mozmm : Mozilla専用で1mmを正確に表示しようとする値
10. cm : センチメートル指定
11. vmin : vh,vwの最小値の設定
12. vmax : vh,vwの最大値の設定
13. pc : パイカ値
14. ch : "0"を横幅1chとして使用する
15. cm : センチメートル
16: mm : ミリメートル
17. q : 4分の1ミリメートル
18. in : インチ
おいおい・・・どんだけあんねん！！！
気ぃ狂うわ！！！
とりあえず、内容と特性だけわかっていればいいでしょう（苦笑）
参考 :
https://ferret-plus.com/8041
文字が小さいとSEOに不利？
Googleのサーチコンソールをセットしていると、モバイルの問題点として、リンク同士が近接しているという報告を受けることがあります。
https://search.google.com/search-console/
モバイルでリンクが近接していると、誤ってタッチする可能性があるので、適当な感覚（指の大きさぐらい？）ぐらいは離れて設置されている必要があることを考えると、
「文字サイズが小さすぎて、文字が読めない」という指摘ももしかしたらあるかもしれませんね。
そうなるともしかすると、SEOのランキングにも影響がしてくる可能性もあるかも・・・（ないかも）
0 件のコメント:
コメントを投稿