画面サイズの大きなスマートフォンが発売になると、メディアクエリで指定するサイズをどう記述したらいいか悩みませんか？ 今回はビー・オー・スタジオで実践しているフォントの数値を決める算出方と、絶対値と相対値について解説します。
絶対値と相対値、どちらを使っていますか？
あなたの会社のウェブサイトは、フォントサイズを「絶対値」で指定していますか？それとも「相対値」？ ブラウザによってどちらを使うべきなのでしょう。そもそも絶対と相対にはどんな違いがあるのか、表にしてみました。
| ユニット | タイプ | 解説 |
|---|---|---|
| px | 絶対 | 1pxは1 viewport pixel |
| pt | 絶対 | 1ptは1インチの1/72 |
| pc | 絶対 | 1picaは12ptとイコール |
| ％ | 相対 | 親要素のフォントサイズに対する割合 |
| em | 相対 | 親要素のフォントサイズに対する大きさ |
| rem | 相対 | ルート要素を基準としたときの大きさ |
| keyword | 相対 | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | 相対 | ビューポートの幅の1% (1/100) |
| vh | 相対 | ビューポートの高さの1% (1/100) |
| vmin | 相対 | ビューポートの小さい方の1% (1/100) |
| vmax | 相対 | ビューポートの大きい方の1% (1/100) |
少し前だったら、UA (ユーザーエージェント) が閲覧者に最適な拡大縮小機能を提供するため、既定フォントサイズからemや%で「相対値」指定する方法が良いとされていました。
2021年３月現在において明確なルールはないものの、ビー・オー・スタジオのマークアップエンジニアはPC表示の時にはフォントサイズを「px」で書き、モバイル表示には「vw」と「vh」で指定しています。
「vw」で指定する理由
PC表示のフォントサイズを「絶対」指定したまま、スマートフォン表示にも継承してしまうと、余白が出たり画面幅に比べて小さかったりと、最適な見え方でない場合があります。
「vw」と「vh」は、表示画面に対する相対的な数値になるため、デバイスの制約を受けにくいという利点があります。つまりスマートフォンの画面サイズによって拡大、縮小。レスポンシブウェブデザインであれば、%とvwでcssを書くと、非常に効率よく作業が進められます。ただし注意点もあり、PC用の記述を別で書く必要があります。
レスポンシブウェブは、コーダーによってそれぞれ書き方がありますが、ビー・オー・スタジオでは「vw」と「vh」を以下の考え方に則ってフォントのサイズを決めています。
例えばスマートフォンのデザインデータが、幅375pxで考えられていた場合。
375px / 100vw = 3.75px
1vw / 3.75px = 0.2666vw = 1px
この設定で、フォントサイズを15pxに見せるには
15px * 0.2666vw = 3.999vw
と指定します。
またスマートフォンの最小幅と考えられている320pxで、上記のフォントサイズ 3.999vwを指定した画面を閲覧すると、12.777px の大きさで表示されます。
まだ「vw」のサイズ感がなんとなくつかめてないようなら、
1px = 0.2666vw
を覚えておくと便利です。pxだったら大きさがイメージできますよね。サイトの見え方の参考にしてください。
高さ「vh」の考え方
「vw」と対になる「vh」について、ビー・オー・スタジオでは状況に応じ、フレキシブルに考えています。設定しない理由は、モバイル端末の場合、ブラウザ側のユーザーエージェントで高さを等配分にしてくれます。UIに指定するときには、「10vh」から「要素の高さ」を引いた数値をcssに加えます。
ビー・オー・スタジオではモバイルファーストでマークアップするために、最初に段取りを決めておきます。デザインデータが上がってきてまず取り組むことは、UI設計からはじめます。ハンバーガーメニューを実装するのなら、そこを起点に高さと幅を指定。スマートフォンのフレームが決まってから、PCのコーディングに取り掛かります。