2025年7月20日(日)
[CSS] <style>の文字サイズを変更 #HTML5&CSS3&JavaScript

　スマホでは、<select>の文字サイズは、CSSで普通にスタイルを設定しても、反映されません。

--
<select style="font-size:12pt;"> 
--



　文字サイズを設定する先に、枠線サイズを設定することで、反映されるようになります。枠線無しで構いません。裏技です。

--
<select style="border:none; font-size:6vmin;"> 
--



　上記の例では、スマホ用に、文字サイズを一定の大きさにしています。

--
⬛︎スマホ短辺360px表示

12pt = 4.44vmin


⬛︎スマホ短辺375px表示

10.5pt = 14px = 3.73vmin

11pt = 14.7px = 3.91vmin

11.5pt = 15.3px = 4.08vmin

12pt = 16px = 4.27vmin


⬛︎スマホ短辺393px表示（iPhone16）

12pt = 4.07vmin

18pt = 6.11vmin


⬛︎スマホ短辺400px表示
※自分は、これが黄金率であり、将来統一されるべきと考えています。

12pt = 16px = 4vmin

18pt = 24px = 6vmin
--



　ガレコレのWebシステムでは、まだデバイスの初期設定で表示させていますが、短辺400px表示を想定しています。現在のスマホでは、短辺375pxが標準ですが、ピクセル数が大きくなる傾向なので、先取りしています。

　なお、スマホとパソコンで、文字サイズを両立させるために、下記のように、CSSを設定しています。

--
<style>

select {
  border-style:none;
}

.size12 {
  font-size:min(12pt,4vmin);
}

.size18 {
  font-size:min(18pt,6vmin);
}

</style>
--



　実際には、文字サイズを明示する必要がない場合、相対で記述しています。

--
class="size18"

style="font-size:1.5em;"
--