見出しの要素幅に応じて、文字サイズを変える。

ウィンドウ幅を変えると見出しの要素幅が代わり、それに応じて文字サイズを拡大・縮小させる。

デモページを表示

CSS

補足

• 文字サイズを可変させる見出しに variable-font-size クラスをつける。
• 見出しの最小要素幅 min-width と、その時の文字サイズを指定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ウィンドウのロード時とリサイズ時に、見出し要素の幅を取得し、最小幅との比率を求め、その比率を文字サイズに乗じて、style 属性で文字サイズを変更している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• variable-font-size クラスのついた見出しが jQuery の処理対象になる。