CommentOut

【CSS】文字サイズを画面幅に応じて自動調整する 【CSS】文字サイズを画面幅に応じて自動調整する

【CSS】文字サイズを画面幅に応じて自動調整する

公開日:  最終更新日:

レスポンシブ対応で面倒なことの一つに”文字サイズの調整”があります。
キャッチコピーをかっこよく1行で表示したいのに、少し画面幅を変えるとエリアをはみ出してしまって、改行されてしまうことないですか?
もしくは少し小さめに作っていると、フルHDや2Kディスプレイで表示すると余白が大きくなって、かっこ悪くなってしまったりしますよね。

さらにそれを防ぐために、細かくメディアクエリを設定するのも大変面倒です。

「あ~文字サイズが自動調整されたら良いのに」って思いませんか?
font-sizeの自動調整はできま~す!

CSSで文字サイズの自動調整する時、font-sizeにもvwなどが使える

実はfont-sizeにもwidthなどで使用する”vw”を使用することができます。
なので、画面幅を基準にfont-sizeを決めてしまえば良いのです。

以下のサンプルを見てください。

See the Pen Untitled by Uilou (@uilou754) on CodePen.

見た目は何の変哲もないのですが、画面幅を変えると画面幅に応じて、文字サイズが変わるようになっています。

// 1文字が画面幅の1%
.font--1vw { font-size: 1vw; }
// 1文字が画面幅の2%
.font--2vw { font-size: 2vw; }
// 1文字が画面幅の3%
.font--3vw { font-size: 3vw; }
// 1文字が画面幅の4%
.font--4vw { font-size: 4vw; }
// 1文字が画面幅の5%
.font--5vw { font-size: 5vw; }

100vwが画面幅と同じ幅、1vwが画面幅の1%となっています。

文字サイズには計算フィールドを使うことも可能

文字サイズに計算フィールドを使うことも可能で、vwと組み合わせて使うことで、以下のような自動伸縮する文字を作ることが可能です。

See the Pen font-sizeの自動調整02 by Uilou (@uilou754) on CodePen.

.font--4word { font-size: calc(100vw / 4); }
.font--8word { font-size: calc(100vw / 8); }
.font--12word { font-size: calc(100vw / 12); }
.font--16word { font-size: calc(100vw / 16); }
.font--20word { font-size: calc(100vw / 20); }

画面幅を示す100vwに対して、文字数で割っています。

CSSによる文字サイズの自動調整が難しい点

ただ、vwって画面幅を基準としていて、親要素基準じゃないんですよね。
文字を画面いっぱいに表示する機会ってそんなに多くなくて、ほとんどはdiv要素などで囲って、その中に収めると思います。
しかし、そうなるとvwが使えなくて、だからと言って、計算フィールドに100% / 4とか入れてもうまくいかないんですよね。

どうにかならないものか・・・

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。