2024年11月20日(水)
[CSS]font-size／［HTML 翻訳］translate #HTML5&CSS3&JavaScript

　スマホ・タブレット・パソコンのすべてに対して、Webページの『文字サイズ』を考慮しないと、見づらいものとなります。

　最近のブラウザでは、ページおよび文字だけの拡大縮小ができるため、これらを踏まえた上で、画面設計しなければなりません。

　ガレコレのトップページの看板は、『イラスト』や『動画』ではなく、あえて『文字』にしてCSSだけで修飾しています。JavaScriptを併用して、3つのバーナーのように完全無変化や、もっと派手な動作もできますが、シンプルな範囲で提示させてもらっています。



　文字サイズは、font-size:*;で指定します。単位は、かなり多くあり、絶対単位と相対単位の2種類に分類できます。最小値・最大値も指定できます。



　まずは、ガレコレのトップページの文字看板を見てみましょう。P.S.現在、下記の記述とは異なっています。プログラミングが落ち着いたら、ここにリンクをお知らせしますね。

--
<div style="
margin:0.4em 0em 0em; 
font-family:monospace; 
font-size:clamp(36pt,21vmin,72pt); 
white-space:nowrap;" 
translate="no">
ガレコレ
</div>


<div style="
margin:0.8em 0em; 
font-size:clamp(16pt,8vmin,28pt); 
text-shadow:2px 1px 3px; 
white-space:nowrap;" 
translate="no">
Garage Collection
</div>
--



【単位】

　よく使う長さの単位として、px pt em remに加えて、スマホ用にvw vminを覚えておくと良いでしょう。

・絶対単位
px ピクセル
pt ポイント
pc パイカ（1文字)

　1pc = 12pt = 16px

in インチ
　1ヤード = 3フィート
　1フィート = 12インチ
cm センチ
mm ミリ 1mm = 3.78px
q 級 1q = 0.25mm = 0.95px

1in = 2.54cm = 6pc = 72pt = 96px

・相対単位
rem root要素のフォントサイズ（大文字Mの高さ）
em 要素のフォントサイズ
※font-sizeを指定していない場合
　1rem = 1em = 12pt = 16px

ex 要素の小文字xの高さ
ch 要素の0の幅
vw ビューポート（スクリーン）幅 = 100vw
vh ビューポート高さ = 100vh
vmin ビューポート短辺 = 100vmin
vmax ビューポート長辺 = 100vmax



【最小値・最大値】

min(X,Y) 小さい方を適用
max(X,Y) 大きい方を適用
clamp(最小値, 推奨値,最大値)

　では、具体的に「ガレコレ」の文字の設定について見てみましょう。

--
font-size:clamp(36pt,21vmin,72pt);
-- 

　スクリーン短辺が100vminなので、4文字でスクリーン短辺の84％で表示しようとします。スマホの場合、縦でも横でも、これで問題ありません。

　パソコンやタブレットの場合、スクリーン幅が広いので、20vminでは文字サイズが異常になってしまいます。最小値36pt〜最大値72ptとして、適切な文字サイズになるように、制限をかけているのです。



　また、英語の文字には『影』をつけています。

-- CSS —-
text-shadow:2px 1px 3px;
text-shadow:X Y R C;
　X:水平方向の距離
　Y:垂直方向の距離
　R:ぼかし半径
　C:影の色
--
　2px
　→→
　　　↓1px
　　　○ぼかし半径3px
※影の色は省略で、同色。



　なお、最近のブラウザには、『ページ翻訳機能』があります。Safariで「ガレコレ」を翻訳すると「Galecore」になり、英語の部分は文末にピリオド「.」が付いてしまいます。なので、「翻訳しない」と宣言しています。

-- HTMLパラメータ —-
<div translate="no">*</div>
--



P.S. 最新のブラウザにおいて、ページの拡大縮小、および、文字の拡大縮小に、『子猫の手（NeCoNoteシステム）』を完全対応させますね。久しぶりに、プログラミングします。