ページや要素の幅に合わせて文字サイズを変更する方法

Question

表題の通りです。
jQueryでそういったプラグインがありますが、下記のようなHTMLにCSSのみでそれを実現することはできますか？

<div class="graph">
	<div>
		<div class="graph-item">
			<h2 class="txt-h2">売上</h2>
			<div class="graph01"></div>
			<div class="graph02">
				<div>¥12,650</div>
				<div>前年</div>
			</div>
		</div>
	</div>

Answer 1

CSSのよく使うfont-sizeの指定方法は以下があると思います。

• px:絶対指定。pxで直接指定する。
• em:相対指定。親要素のフォントサイズの何倍か。
• %:相対指定。親要素のフォントサイズの何パーセントか。
• rem:相対指定。html要素のフォントサイズの何倍か。

.text1{
  font-size: 10px; //px指定
}
.text2{
  font-size: 1.6em; //em指定
}
.text3{
  font-size: 160%; //%指定
}
.text4{
  font-size: 1.6rem; //rem指定
}

ただ、質問者さんがレスポンシブなページでフォントサイズをいい感じに可変させたいなら以下の指定があります。

• vw:相対指定。ビューポートの幅の何パーセントか。
• vh:相対指定。ビューポートの高さの何パーセントか。
• vmin:相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。
• vmax:相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。

.text1{
  font-size: 3vw; //vw指定
}
.text2{
  font-size: 4vh; //vh指定
}
.text3{
  font-size: 5vmin; //vmin指定
}
.text4{
  font-size: 6vmax; //vmax指定
}

ビューポートの説明や設定方法は以下が参考になるかと思います。
参考：viewportとはなにか？

追記

説明をだいぶ簡略化してしまったので、もう少し正しい説明を追加します。(言っていることは上記と一緒)

単位	フルネーム	説明
vw	Viewport Width	ビューポートの幅に対する1/100の単位
vh	Viewport Height	ビューポートの高さに対する1/100の単位
vmin	Viewport Minimum	ビューポートの幅と高さのうち, 小さい方の値に対する1/100の単位
vmax	Viewport Maximum	ビューポートの幅と高さのうち, 大きい方の値に対する1/100の単位

サポートブラウザ

Comments

[ShoheiTai]

恥ずかしながら後者の指定方法は知らなかったです...！勉強になりました！

[退会済みユーザー]

この方法でうまくいきました。Viewportの説明も大変わかりやすかったです。ありがとうございました！

[5o5o_wagon]

お役に立てたようでよかったです。
こちらこそいいおさらいになりました。

Answer 2

ページ幅（画面幅）に合わせて滑らかに拡縮するようにしたいのであれば
文字サイズの単位にvwを使用すると良いかと思います。
ただ、基準となるのは「viewportの幅」なので、
大画面モニタ等で横幅いっぱいに広げたりすると拡大しすぎてしまう、等の弊害も生じます。
画面幅を狭くしすぎた場合も同様です。

従ってvwで文字サイズを指定した場合には、
同時にメディアクエリを併用して、
一定の画面幅を超えたらpx等の固定サイズに変更するなどの
処置をするとよいかと思います。

またvwはAndroid標準ブラウザは4.4以上でないと使えないので、
非対応環境のためのフォールバックでpx・em等の従来からある単位での指定も加えておいた方が良いと思われます。

Answer 3

CSS メディア クエリを使用してレスポンシブにする

CSSのメディアクエリを使用することで、デバイスの状態(解像度など)に応じたサイズ変更が可能になります。

以下の例ではpタグのサイズを変更しています。

p {
  font-size: 20px;
}
@media (min-width: 500px) and (max-width: 600px) {
  p {
    font-size: 10px;
  }
}

Comments

[退会済みユーザー]

この方法でも出来ました！ありがとうございます！