テキストエリアの高さを入力内容に合わせて自動調整する方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードをUTF-8に設定する -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に合わせて表示する -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ブラウザのタブに表示するページタイトル -->
  <title>高さが自動調整されるテキストエリア</title>
  <!-- テキストエリアのデザインを定義したCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- テキストエリア全体：横幅を制御する親要素 -->
  <div class="textarea-auto-expand_container">

    <!-- 入力欄の項目名：for属性とtextareaのidを一致させる -->
    <label class="textarea-auto-expand_label" for="textarea-auto-expand-input">
      お問い合わせ内容
    </label>

    <!-- 高さが自動調整されるテキストエリア -->
    <!-- idはJavaScriptで入力欄を取得するために使用する -->
    <!-- placeholderは入力前に表示する案内文 -->
    <textarea class="textarea-auto-expand_input" id="textarea-auto-expand-input" placeholder="お問い合わせ内容を入力してください。"></textarea>

  </div>

  <!-- 入力内容に合わせて高さを調整するJavaScriptを読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
   テキストエリア全体
========================================= */

.textarea-auto-expand_container {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 600px; /* 最大横幅。大きくすると入力欄全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右は自動調整して中央に配置する */
  box-sizing: border-box; /* 横幅の計算に余白と枠線を含める */
}

/* =========================================
   テキストエリアのラベル
========================================= */

.textarea-auto-expand_label {
  display: block; /* ラベルを独立した行に表示する */
  margin-bottom: 10px; /* ラベルと入力欄の間隔。大きくすると間隔が広がる */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* ラベルの文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* ラベルの文字の太さ */
}

/* =========================================
   高さが自動調整されるテキストエリア
========================================= */

.textarea-auto-expand_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに表示する */
  min-height: 120px; /* 最小の高さ。大きくすると入力欄が縦に広がる */
  padding: 16px; /* 内側の余白。大きくすると文字と枠線の間隔が広がる */
  border: 2px solid #dbe5f1; /* 枠線。2pxを大きくすると線が太くなる */
  border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
  background: #ffffff; /* 入力欄の背景色 */
  color: #111827; /* 入力文字の色 */
  font-size: 16px; /* 入力文字のサイズ */
  line-height: 1.8; /* 行の高さ。大きくすると行間が広がる */
  resize: none; /* ドラッグ操作による手動のサイズ変更を無効にする */
  overflow: hidden; /* 入力欄内部のスクロールバーを非表示にする */
  box-sizing: border-box; /* 横幅と高さの計算に余白と枠線を含める */
  outline: none; /* ブラウザ標準のフォーカス枠を非表示にする */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 枠線と影の変化時間。大きくすると変化が遅くなる */
}

/* =========================================
   プレースホルダー
========================================= */

.textarea-auto-expand_input::placeholder {
  color: #94a3b8; /* 入力前に表示する案内文字の色 */
}

/* =========================================
   フォーカス時のデザイン
========================================= */

.textarea-auto-expand_input:focus {
  border-color: #2563eb; /* 入力欄を選択したときの枠線色 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); /* 外側の青い影。3pxを大きくすると影が広がる */
}

/* =========================================
   スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では入力欄の内側余白を小さくする */
  .textarea-auto-expand_input {
    padding: 14px; /* 内側の余白。大きくすると文字と枠線の間隔が広がる */
  }

}

/* =========================================
   テキストエリアの高さを自動調整
========================================= */

(function() {

  // 高さを自動調整するテキストエリアをidで取得する
  const textarea = document.getElementById("textarea-auto-expand-input");

  // 入力内容に合わせてテキストエリアの高さを変更する
  function resizeTextarea() {

    // 高さを一度リセットし、文章を削除した際にも縮小できるようにする
    textarea.style.height = "auto";

    // 入力内容全体に必要な高さをscrollHeightで取得する
    const contentHeight = textarea.scrollHeight;

    // CSSに設定された最小の高さを取得する
    const minHeight = parseFloat(getComputedStyle(textarea).minHeight);

    // 入力内容の高さと最小の高さを比較し、大きい方を採用する
    // pxを付けてテキストエリアの高さに反映する
    textarea.style.height = Math.max(contentHeight, minHeight) + "px";

  }

  // 文字の入力・改行・削除が行われるたびに高さを再計算する
  textarea.addEventListener("input", resizeTextarea);

  // ページを開いたときにも高さを調整する
  resizeTextarea();

})();