テキストエリア Textarea
複数行のテキスト入力欄。文字数カウントやリサイズハンドル付きも一般的。
ライブデモ
ソースコード
<div class="demo-textarea">
<div class="demo-textarea-group">
<label class="demo-textarea-label" for="demo-ta-comment">コメント</label>
<textarea class="demo-textarea-input" id="demo-ta-comment" rows="4" maxlength="200" placeholder="コメントを入力してください..."></textarea>
<div class="demo-textarea-footer">
<span class="demo-textarea-hint">Markdown対応</span>
<span class="demo-textarea-count"><span class="demo-textarea-current">0</span> / 200</span>
</div>
</div>
<div class="demo-textarea-group">
<label class="demo-textarea-label" for="demo-ta-disabled">無効</label>
<textarea class="demo-textarea-input" id="demo-ta-disabled" rows="2" disabled>編集できません</textarea>
</div>
</div>.demo-textarea { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.demo-textarea-group { display: flex; flex-direction: column; gap: 4px; }
.demo-textarea-label { font-size: 13px; font-weight: 600; color: #333; }
.demo-textarea-input {
padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 8px;
font-size: 14px; font-family: inherit; outline: none; resize: vertical;
transition: border-color 0.2s, box-shadow 0.2s; line-height: 1.6;
}
.demo-textarea-input:focus {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-textarea-input:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; resize: none; }
.demo-textarea-footer { display: flex; justify-content: space-between; align-items: center; }
.demo-textarea-hint { font-size: 12px; color: #6b7280; }
.demo-textarea-count { font-size: 12px; color: #6b7280; }
.demo-textarea-count.near-limit { color: #f59e0b; }
.demo-textarea-count.at-limit { color: #ef4444; font-weight: 600; }(function(){
const ta = document.querySelector('#demo-ta-comment');
const counter = document.querySelector('.demo-textarea-current');
const countWrap = document.querySelector('.demo-textarea-count');
if (!ta || !counter) return;
ta.addEventListener('input', function() {
const len = this.value.length;
const max = parseInt(this.getAttribute('maxlength'));
counter.textContent = len;
countWrap.className = 'demo-textarea-count' + (len >= max ? ' at-limit' : len >= max * 0.8 ? ' near-limit' : '');
});
})();AIプロンプト
Basic
テキストエリアをHTML/CSSで作ってください。ラベル付きの複数行入力欄で、フォーカス時に枠線の色が変わります。
Custom
以下の仕様でテキストエリアを実装してください。 - 文字数カウンター表示（現在の文字数 / 最大文字数） - 最大文字数に近づくと黄色、超過で赤色に変化 - リサイズハンドル付き（垂直方向のみ） - プライマリカラー: #2563eb - プレースホルダーテキスト表示 - Markdown対応のヒントテキスト
Advanced
アクセシビリティ対応のテキストエリアを実装してください。 - aria-describedby で文字数カウンターと連携 - aria-invalid でバリデーション状態を通知 - 自動リサイズ（内容に応じて高さが伸縮） - IME入力中は文字数カウントを一時停止 - Ctrl+Enter で送信のキーボードショートカット - prefers-reduced-motion 対応 - スクリーンリーダーで残り文字数を定期的に通知（aria-live）