UI/UX#UI/UX#デザインこんにちは。アイレットデザイン事業部のwebデザイナーの黒木です。UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。今回は、様々なfont-sizeの指定方法が存在しているので改めてまとめ直してみました。指定方法によってフォントサイズがどのように変化するのか、また指定方法のメリット・デメリットを記述していきます。}}【デメリット】emと同じく、ブラウザデフォルトサイズ設定によって、可変して欲しくない部分でも文字の大きさが変わってしまう%【メリット】em、remと同じく相対的な数値のため、レスポンシブに向いている【デメリット】emと同じように親要素を基準としているため、同じ数値を指定してもサイトの中で大きさが変わる計算が複雑になるフォントサイズの数値が複雑になるvw【メリット】ブラウザ横幅によってフォントサイズが変わるため、レスポンシブに向いている【デメリット】max-widthを指定したときレイアウト自体はmax-widthで止まるが、フォントサイズだけは大きくなり続けてしまうheightを指定している場合もmax-widthの時と同じく、フォントサイズだけ大きくなり続けてしまうスマホを横向きにした時ブラウザ横幅が大きくなりフォントサイズも大きくなるが、スマホの画面に比べると大きくなりすぎてしまうvh調べてみたところvwと同じくくりでメリット・デメリットが書かれていることが多かったが、ブラウザ縦幅基準なのでレスポンシブにも向いてなくメリットが見つからなかった小数点についてフォントサイズを細かく設定するために小数点を使用するのは推奨しません。サイトを表示するブラウザによって小数点以下を切り上げるものもあれば切り捨てるものもあるためです。1pxほどの差しか生まれませんが、その差で改行位置が変わったりしてしまう可能性もありますので注意してください。24px);上記の例だと24px未満になることはなく、画面幅に合わせて3vwに基づきサイズが大きくなる調べてみてfont-sizeの単位について様々なフォントサイズ指定方法がありますが、レスポンシブデザインのコーディングをする際にPC版のフォントサイズがSP版のフォントサイズの何倍と決まっている時はremを使うことに意味があると思いました。remの場合ブラウザデフォルトサイズ設定にも対応できるためユーザーにも優しく、アクセシビリティの観点から見ても効果的な単位だと思います。文字の大きさを可変させたくない時(ボタンの文字の中にあるテキストなど)はpxが無難だと思います。加えてスマホの普及率が高い今、ページを拡大する際はブラウザのデフォルトの文字サイズを変更するのではなく、ピンチアウトでページの拡大処理をすることが多くなっていると思います。その方法であればpxを使用していても文字の拡大が可能になるうえに周りの要素も同様に拡大します。pxを使用しているから必ずしも文字が大きくならないというわけではありません。その点をふまえると先ほど挙げた特定の場合を除いては直感的にわかりやすいpxを使うのがいいのかなと個人的に思いました。CSS関数についてCSS関数に関してはこれまで使用する機会がなかったのですが、今回調べてみてレスポンシブデザインのコーディングをするにはとても役に立つ方法だと思いました。自分自身が今まで作ってきたWebサイトにおいて、SP幅では改行位置などに違和感がなくてもタブレット幅にしたところ改行位置が不自然になったり、タブレットの画面幅に比べて文字が小さいことがあり、その都度ブレイクポイントを1つ増やして対応を行なっていました。その手間をCSS関数を使用することでかなり軽減することができるのではないかと思いました。IEに効かないというデメリットはありますが、今後IE対応必須のWebサイトは2022年6月のIEのサポート終了に伴って減少していくので配慮の必要がなくなると思います。デメリットも少なくなるであろうCSS関数を今後積極的に使用していきたいです。アイレットではエンジニア、デザイナーを募集しています。詳しくは採用情報のページをご覧ください。デザイン事業部が書いた記事twitterfacebookはてなブックマークpocketお客様のご要望に柔軟に対応いたします。お気軽にご相談ください。cloudpackは、アイレット株式会社が提供するクラウド支援サービスです。問い合わせまでトータルサポート!お問い合わせはこちらアイレットでは、様々な職種で一緒に働ける仲間を募集しています。インフラエンジニア、開発エンジニア、クリエイティブ職、営業職など、様々な職種で一緒に働ける仲間を募集しています。アイレット公式サイト採用情報をご覧ください。プライバシーポリシークラウド導入のご相談、お見積り、サービスについてのご質問などお気軽にお問い合わせください。