CSS | テキストのフォントサイズをレスポンシブに対応して可変させる方法

CSS テキスト,CSS

CSS | テキストのフォントサイズをレスポンシブに対応して可変させる方法

CSSだけでテキストのフォントサイズをレスポンシブに対応して可変させる方法を紹介しています。

テキストをレスポンシブに対応する方法

テキストにVWを指定してレスポンシブに対応する動作サンプルとサンプルコードです。

動作サンプルでは表示しているブラウザのサイズを変更してレスポンシブに対応している事が確認できると思います。（PCの場合）

See the Pen CSS | Rounded corners Images by yochans (@yochans) on CodePen.

ビューポートの幅いっぱいのコンテンツ部分であれば、フォントサイズにvｗを指定する事で簡単にレスポンシブのフォントサイズに対応する事が可能です。

ビューポートの幅はPCであればブラウザの表示領域、モバイルは画面幅と考えて問題ありません。

  • 1VWあたりビューポートの幅の1％になります
  • 親要素に依存しないので横幅の最大値が設定されているコンテンツ内には不向き
  • marginを計算に含みます
  • paddingは計算に含まれません
<p class="resp">Responsive Text</p>
.resp {
	margin: 0;
	font-size: 10vw;
}

PCサイトで複数カラムがある場合など、表示するコンテンツの横幅に最大値が設定されているケースでは、上記のサンプルコードだけでは不十分となるケースがあります。

例えば、コンテンツ領域の最大値に達しており、更にビューポート幅が伸びた場合にテキストが大きくなりすぎてはみ出したりします。

その場合、clamp()を利用して可変するフォントサイズの最小値と最大値を指定しておきます。

特には最大値をコンテンツ幅の最大値に収まるように設定しておきます。

.resp {
	margin: 0;
	font-size: clamp(18px, 5vw, 30px);
}

また、モバイル端末など縦横の向きを変更した場合の対応についてはvhやvmin、vmaxを利用する必要があるかもしれません。

CSS テキスト,CSS

Posted by Yousuke.U