【解放区在住氷翠 緑の閃光】氷翠のお気楽日記

文字の大きさ

2017-08-24 21:07

HTML+CSS > 開発

日々、勉強をしています氷翠です。

WEBのデザインをするとき、最初に考えているのが、基本の文字の大きさ。
スタイルシートで言うところの「font-size」です。
昔からあるのだけど、あまり気にしていなかったw

パソコンのブラウザでは、文字サイズは標準で16pxという設定になっているかと思います。
もちろん、これは使っているブラウザによって違っているかもしれません。

まず、スタイルシートで使える単位ですが、基本的には「px(ピクセル)」を使っているかと思います。
その他に「pt(ポイント)」「%(パーセント)」「em」…といったものがありますが、CSS3では「vw」とか「vh」とかが登場しています。

その画面の大きさ全体の横幅が「100vw」、画面の縦の幅が「100vh」という感じ。%とどう違うのか?
%はとある要素の中でいけるところまでが100%。別に画面全体が…というわけではないわけです。

そういった違いを理解していないと、なかなか単位は難しいものです。

ということで、HTMLタグ、bodyタグの中で基本になる文字の大きさを設定しますが、氷翠は計算によって出てきた答えを設定してみます。
つまり、画面の大きさによって変化する。

例えば、キャリアのベースが「iPhone7」横幅は375px。これを100vwということになります。基本的には16pxにしたいので、比例の式で表現してみます。
375px : 100vw = 16px : Xvw;
つまり、画面の大きさによって基本文字サイズが変化するので、画面に対してどのくらいのサイズなのか?
という式です。
そこで出て来る答えが…

1600 ÷ 375 = 「4.2666……」という答えです。

font-size: 4.2667vw;

これでスマートフォンの大きさが変化しても同じ比率で表示されるというものです。

ここからスマートフォン用のWEBサイトを作り始めていきます。

もちろん、この状態でパソコンで確認、タブレットで確認したら、大変なことになります。
えぇ、巨大な文字で……

これはあくまでもスマートフォンを中心とした考えなので。

コメントを残す

メールアドレスが公開されることはありません。