可変フォントサイズ

1. JS を読み込ませる
2. 可変させたい文字に class resize_fz を付与

• 参考
  • 【JavaScript】レイアウトの中で文字サイズを画面幅に応じて可変にする - 素肌にサスペンダー

function resize() {
  var resizeText = document.getElementsByClassName('resize_fz');
  for (let i = 0; i < resizeText.length; i++) {
    var body = document.getElementsByTagName('body')[0];
    var wrapper = resizeText[i].clientWidth / body.clientWidth;
    var fontSizeVw = wrapper / resizeText[i].innerHTML.length;
    // ▼ letter-spacingを0.1emに指定していた場合、1.1をかける
    // var fontSizeVw = wrapper / (resizeText[i].innerHTML.length; * 1.1);
    resizeText[i].style.fontSize = fontSizeVw * 100 + 'vw' ;
  }
}
// 初期
window.onload = function(){
  resize();
}
// リサイズした時
window.onresize = function(){
  resize();
}

• レイアウト崩れ予防のために、以下を設定した方がよいとのこと

.resize_fz {
    letter-spacing: -0.01em; /* たまにカラム落ちすることがあるので保険をかける */
}

• 全角半角によって解釈が異なることがあった