CSS でレスポンシブフォントを作成する
- CSS でビューポート値を使用してレスポンシブフォントを作成する
- CSS でメディアクエリを使用してレスポンシブフォントを作成する
-
CSS で
calc()関数を使用してレスポンシブフォントを作成する -
CSS で
clamp()関数を使用してレスポンシブフォントを作成する
この記事では、CSS を使用した場合にのみレスポンシブフォントを実装する方法について説明しています。最新の CSS と CSS3 が、さまざまな画面サイズのデバイス間でフォントを読みやすくする方法をいくつか紹介します。
CSS でビューポート値を使用してレスポンシブフォントを作成する
フォントをレスポンシブにする最も簡単な方法の 1つは、ビューポートのサイズまたはブラウザのウィンドウサイズに応じてフォントのサイズを変更することです。レスポンシブ Web ページを作成するのに非常に役立つ CSS によって提供される、ブラウザウィンドウの軸に関連するさまざまなビューポートユニットがあります。一部のビューポート単位は、vw、vh、vmin、および vmax です。これらのユニットの情報は、CSS ユニットから取得できます。レスポンシブフォントを作成するために、em、px、または pt の代わりにこれらのビューポート単位を使用できます。
たとえば、h1、h2、および p タグをそれぞれ作成します。これらのタグの間に任意のテキストを書き込んでください。CSS で、h1、h2、および p タグの font-size プロパティをそれぞれ 5.9vw、3.0vh、および 2vmin に設定します。
ブラウザのサイズを変更すると、ブラウザのビューポートが変更され、それに応じてテキストのフォントサイズも変更されます。このようにして、フォントサイズのビューポート単位を使用して、CSS でレスポンシブフォントを作成できます。
サンプルコード：
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
CSS でメディアクエリを使用してレスポンシブフォントを作成する
メディアクエリを使用して、CSS でレスポンシブフォントを作成できます。メディアクエリを利用して、デバイスの特定の高さ/幅でフォントサイズを変更することもできます。@media キーワードを使用してメディアクエリを記述します。
たとえば、font-size プロパティを 3em に設定します。次に、max-width:320px の条件でメディアクエリを記述します。次に、font-size プロパティを 2em に設定します。
サンプルコード：
body{
font-size: 3em;
}
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
ここで、上記のコードを実装し、画面サイズが 320px 未満のデバイスで実行すると、フォントサイズが小さくなります。高さが 320px 未満のデバイスの場合、フォントは 2em に設定されます。また、画面サイズが 320px より大きいデバイスのフォントは 3em になります。
この方法のデメリットは、特定のサイズのデバイスでデザインが壊れ始めた場合に、メディアクエリを追加する必要がある場合があることです。
CSS で calc() 関数を使用してレスポンシブフォントを作成する
最近のほとんどのブラウザは CSS の calc() メソッドをサポートしているため、レスポンシブコードの記述が簡単になります。さらに、この方法はより効果的であり、コードを乱雑にすることなくタスクを実行します。calc() 関数を使用して、フォントサイズをレスポンシブにすることができます。関数の結果は、プロパティの値です。
たとえば、body タグの font-size プロパティを calc() 関数に設定します。関数内に、0.75em + 1vw と記述します。
サンプルコード：
body {
font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
画面サイズが異なるデバイスで 1vw の値が変わると、フォントサイズも異なります。したがって、CSS でレスポンシブフォントを作成できます。
CSS で clamp() 関数を使用してレスポンシブフォントを作成する
clamp() 関数は、最大値と最小値の間の値をクランプします。この関数は、引数として 3つのパラメーターを取ります。最初のパラメーターは最小値、2 番目のパラメーターは優先値、最後のパラメーターは最大許容値です。clamp() 関数を使用して、length、angle、percentage、number などの任意のプロパティを設定できます。この関数を使用して、CSS でレスポンシブフォントを作成できます。
サンプルコード：
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
上記の例では、値 2rem が最小許容フォントサイズです。同様に、次の値 10vw はデフォルトのフォントサイズであり、最後の値 5rem は最大許容フォントサイズです。ここで、真ん中の値は、vw、ch、または vh のように相対的であり、px や pt のように絶対的ではないことに注意する必要があります。
