フォントサイズを変更する

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

inputタグのtype=”range”とJavaScriptを使ってフォントサイズを変更する処理について。

JavaScriptでフォントサイズを変更する

コードは以下になります。

<p>テキストサイズ<span id="size">18px</span></p>
<input type="range" min="12" max="36" value="18" class="c-textRange js-range">


<p class="js-sizeChange">aaa</p>
<p class="js-sizeChange">bbb</p>
<p class="js-sizeChange">ccc</p>

/* コンポーネント */
.c-textRange {
  width: 320px;
  height: 4px;
  border-radius: 9999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  accent-color: #0051ff;
}
.c-textRange::-webkit-slider-runnable-track {
  accent-color: #0051ff;
  height: 4px;
  border-radius: 9999px;
}
.c-textRange::-moz-range-track {
  accent-color: #0051ff;
  height: 4px;
  border-radius: 9999px;

}


/* ツマミ：Chrome, Safari, Edge用 */
.c-textRange::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #0051ff;
  accent-color: #0051ff;
  appearance: none;
  -webkit-appearance: none;
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}

/* ツマミ：Firefox用 */
.c-textRange::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #0051ff;
  accent-color: #0051ff;

}
document.addEventListener('DOMContentLoaded', function () {

  const fontSizeSlider = document.querySelector('.js-range');
  const fontSizeDisplay = document.getElementById('size');

  function updateFontSize() {
    const size = fontSizeSlider.value;
    fontSizeDisplay.textContent = `${size}px`;
    document.querySelectorAll('.js-sizeChange').forEach(el => {
      el.style.fontSize = `${size}px`;
    });
  }

  // レンジのスライダー
  function updateSliderBackground() {
    const value = fontSizeSlider.value;
    const min = fontSizeSlider.min;
    const max = fontSizeSlider.max;
    const percentage = ((value - min) / (max - min)) * 100;
    fontSizeSlider.style.background = `linear-gradient(90deg, #0051ff ${percentage}%, #ddd ${percentage}%)`;
  }

  fontSizeSlider.addEventListener('input', updateFontSize);
  fontSizeSlider.addEventListener('input', updateSliderBackground);

  updateSliderBackground();
});

See the Pen フォントサイズ range by kuma0605 (@kuma0605) on CodePen.

rangeのスライダーを動かすと、それに応じて現在のフォントサイズのテキストと、現在のフォントサイズと連動したテキストの見た目（フォントサイズ）が変化します。

<input type=”range”>はレンジ入力欄を設置するのに使います。

<input type="range" min="12" max="36" value="18">

valueが値の指定、minが最小値、maxが最大値です。

CSSではデフォルトのスタイルを解除するために、appearance: none;を指定します。各ブラウザごとに見た目の部分が異なるため、::-moz-range-thumbや::-webkit-slider-thumb、::-webkit-slider-runnable-trackなどつけてスタイルを整えます。

JavaScriptでは、以下の部分で要素を取得します。

  const fontSizeSlider = document.querySelector('.js-range');
  const fontSizeDisplay = document.getElementById('size');

以下の部分で、フォントサイズの現在の値を取得し、textContentでテキストの文字列を取得して出力します。

const size = fontSizeSlider.value;
fontSizeDisplay.textContent = `${size}px`;

js-sizeChangeを持つすべての要素に対して、HTMLのstyle属性にフォントサイズを指定します。

document.querySelectorAll('.js-sizeChange').forEach(el => {
   el.style.fontSize = `${size}px`;
});

以下の部分で、inputのrangeスライダーの値によってスライダーのバーの背景色を更新しています。

  // レンジのスライダー
  function updateSliderBackground() {
    const value = fontSizeSlider.value;
    const min = fontSizeSlider.min;
    const max = fontSizeSlider.max;
    const percentage = ((value - min) / (max - min)) * 100;
    fontSizeSlider.style.background = `linear-gradient(90deg, #0051ff ${percentage}%, #ddd ${percentage}%)`;
  }

rangeスライダーのバーの背景色（青と灰色の部分）は、linear-gradientでグラデーションで作ります。linear-gradient(90deg, #0051ff 30%, #ddd 70%）みたいな感じです。%の数字の部分をJSで動的に変更するイメージです。

ここまで読んでくださりありがとうございました。

JavaScript

この記事を書いた人

くまだ

記事一覧