1,037 views
この記事は最終更新から 1951日 が経過しています。
1. やりたいこと
iPad Proなど、最近のタブレット端末はとっても解像度が高い。
このような端末の場合…
パソコン画面に表示するつもりで作った WEBページをタブレットで表示すると
文字が小さすぎて見づらいことがある。
また、スマホの場合は画面サイズがいろいろで、
端末によって見え方を統一したい場合に文字の大きさが問題になる。
よって…
画面幅に対して文字サイズを一定にしたい
場合がある。
2. 基本
文字サイズを vw で指定すればよい。
因みに vwとは？
remのように文字サイズや余白、マージンなどで使用できるサイズの単位である。
画面幅いっぱいが 100vw
画面幅の1/100の大きさが 1vw である。
1) 例：画面幅の 1/10の文字サイズで描画する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00093 demo1</title>
<style>
p{
font-size: 10vw; /* 画面幅の10/100 */
}
</style>
</head>
<body>
<p>
あいうえお
</p>
</body>
</html>
https://www.dogrow.net/hp/sample/00093/demo1.html
間違えないように！
親ブロック要素の幅が基準ではない！
ウィンドウ幅が基準だ！
https://www.dogrow.net/hp/sample/00093/demo2.html
3. 応用
後日追記
4. 所感
・vwをサポートしていないブラウザで閲覧される可能性が高い WEBページの場合、vwの使用を控えなければならない。
x. 謝辞
有用な情報をありがとうございます。m(_ _)m
https://qiita.com/katsunory/items/3bede89cee8e2ded8426
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-05-08: 0回 2026-05-07: 1回 2026-05-06: 1回 2026-05-05: 0回 2026-05-04: 0回 2026-05-03: 1回 2026-05-02: 1回