HTML Academy · レッスン

複数行入力のためのTextarea

Q: 「複数行入力のためのTextarea」で何を学びますか？

textarea要素で複数行のテキストを収集します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

textarea要素で複数行のテキストを収集します

「複数行入力のためのTextarea」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

textarea要素

<textarea>要素は、複数行のテキスト入力を受け付けます。

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="Enter your message here..."
></textarea>
<!-- textarea is NOT a void element -- it has a closing tag -->
<!-- Default content goes between the tags, not in a value attribute -->

rowsとcols属性

rowsとcolsは、最初に表示されるサイズを設定します。

<!-- rows: height in lines (default: 2) -->
<!-- cols: width in characters (default: 20) -->
<textarea rows="6" cols="50">...</textarea>

<!-- Better: use CSS for sizing -->
<textarea style="width: 100%; height: 150px; resize: vertical;">

デフォルトの内容を設定する

デフォルトのテキストは、開始タグと終了タグの間に記述します。

<textarea name="bio">
Hello! I am a developer who loves HTML.
</textarea>
<!-- Note: whitespace inside textarea IS rendered -->
<!-- The newline after the opening tag will appear in the textarea -->
<!-- Avoid whitespace between tags if you don't want it -->

CSSでresizeを設定する

CSSのresizeプロパティを使用して、ユーザーによるサイズ変更を制御します。

textarea {
  resize: vertical;    /* allow only vertical resize */
  /* resize: horizontal -- only horizontal */
  /* resize: both      -- both directions (default) */
  /* resize: none      -- prevent resizing */

  width: 100%;
  min-height: 120px;
  max-height: 400px;
  padding: 0.5rem;
  box-sizing: border-box;
}

自動的に拡張するtextarea

JavaScriptを使用して、ユーザーの入力に合わせてtextareaを拡張します。

<textarea id="auto-grow" rows="3" style="overflow: hidden;"></textarea>

<script>
const ta = document.getElementById('auto-grow');
ta.addEventListener('input', () => {
  ta.style.height = 'auto';
  ta.style.height = ta.scrollHeight + 'px';
});
</script>

maxlengthとminlength

textareaに入力できるテキストの長さを制限します。

<label for="bio">Bio (max 500 characters)</label>
<textarea
  id="bio"
  name="bio"
  maxlength="500"
  minlength="10"
  rows="4"
></textarea>

<!-- Live character count: -->
<small id="char-count">0/500</small>
<script>
document.getElementById('bio').addEventListener('input', function() {
  document.getElementById('char-count').textContent =
    this.value.length + '/500';
});
</script>

spellcheck属性

spellcheck属性は、スペルチェックを制御します。

<!-- Enable (default for textarea) -->
<textarea spellcheck="true">...</textarea>

<!-- Disable (for code editors, technical input) -->
<textarea spellcheck="false">...</textarea>

wrap属性

wrap属性は、行の折り返しを送信する方法を制御します。

<!-- wrap="soft" (default): text wraps visually but newlines not added -->
<textarea wrap="soft">...</textarea>

<!-- wrap="hard": newlines inserted at wrap points when submitted -->
<!-- Requires cols to be set -->
<textarea wrap="hard" cols="40">...</textarea>

readonlyとdisabled

textareaを編集できない状態にします。

<!-- readonly: visible, selectable, submitted -->
<textarea readonly>This is read-only text.</textarea>

<!-- disabled: cannot interact, not submitted -->
<textarea disabled>Disabled textarea.</textarea>

textareaのアクセシビリティ

textareaのアクセシビリティに関する注意点です。

for/idを使用して、必ず<label>と関連付けます
aria-describedbyを使用して、ヘルプテキストや文字数カウンターを関連付けます
ライブリージョンを使用して、文字数制限の変更をスクリーンリーダーに通知します

<label for="comment">Comment</label>
<textarea id="comment" aria-describedby="comment-hint"></textarea>
<p id="comment-hint">Maximum 200 characters.</p>

textareaのスタイル設定

よく使われるtextareaのスタイル設定です。

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-family: inherit;    /* match surrounding font */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
textarea:focus {
  outline: none;
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0,112,243,0.2);
}

クイックチェック

textareaにあらかじめ入力されたテキストを設定するには、どうすればよいですか？

まとめ：textarea

textareaの基本事項です。

終了タグを持つ複数行のテキスト入力です
デフォルトの内容は開始タグと終了タグの間に記述します（value属性ではありません）
rowsとcolsで初期サイズを設定します。CSSの使用が推奨されます
maxlengthとminlengthで長さを制御します
CSSのresize: verticalでサイズ変更を制御します
自動拡張するには、inputイベントでheight: scrollHeightを設定します

よくある質問

「複数行入力のためのTextarea」レッスンは無料ですか？

はい。「複数行入力のためのTextarea」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「複数行入力のためのTextarea」で何を学びますか？

textarea要素で複数行のテキストを収集しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「複数行入力のためのTextarea」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る