1. コピーボタンとは？
ボタンをクリックすると、テキストやAIプロンプト、 URLなどをクリップボードへコピーできる機能です。
AIプロンプトサイトやツールサイトで最もよく使われる機能の一つです。
2. HTMLの基本構造
<textarea id="text">
ここに文章
</textarea>
<button onclick="copyText()">
📋 コピー
</button>
3. JavaScriptでコピーする
function copyText(){
const text=document.getElementById("text").value;
navigator.clipboard.writeText(text);
}
現在のブラウザでは navigator.clipboard.writeText() が最も簡単なコピー方法です。
4. textareaについて
長文入力にはtextareaを使用します。
| 設定 | 意味 |
|---|---|
| resize:none; | サイズ変更不可 |
| resize:vertical; | 高さだけ変更可能 |
| resize:horizontal; | 横だけ変更可能 |
| resize:both; | 縦横どちらも変更可能 |
5. 横長ボタンを作る
.copy-btn{
width:100%;
height:60px;
background:
linear-gradient(
135deg,
#4CAF50,
#2196F3);
}
width:100% にすることで スマホでもPCでも押しやすい横長ボタンになります。
6. デモ
7. 応用例
- AIプロンプトコピー
- URLコピー
- SNS投稿文コピー
- HTMLコードコピー
- CSSコードコピー
- JavaScriptコードコピー
- メール文章コピー
- ブログ記事コピー
- SEOテンプレートコピー
- Cloudflare Pagesツール
8. よくある質問
Q. スマホでも使えますか？
はい。ほとんどの最新ブラウザで利用できます。
Q. コピーできません。
HTTPS環境で開いているか確認してください。 ローカル環境では動作しない場合があります。
Q. AIプロンプトにも使えますか？
もちろんです。生成されたプロンプトをそのままコピーできます。