やってみようコードの右のアイコンを押してみてください
通知・フィードバックメジャー(よく見る)
コピーボタン
Copy Button / Copy to Clipboard
アイコンを押すと文字がコピーされ、一瞬だけアイコンが ✓ と「コピーしました」に変わる。
別名クリップボードにコピーコピー完了表示コピーアイコンCopied!
どこで使われている?
- よく見かける場所
- クーポンコード、招待コード、技術ドキュメントのコード、振込先口座
- 使うとよい場面
- コードやURLを、正しくそのまま写してほしいとき
- 避けたい場面
- 自由に選んでコピーしたい長い文章
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「コピーボタン(Copy Button / Copy to Clipboard)」を実装してください。 動き:コピーしたい文字の右に「重なった四角」のアイコンボタンを置く。押すとクリップボードにコピーし、アイコンを2秒ほど ✓ に変えて「コピーしました」と表示してから元に戻す。 使う部品:navigator.clipboard.writeText()
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | navigator.clipboard.writeText() |
|---|---|
| iPhoneアプリなら | UIPasteboard.general.string |
| Androidアプリなら | LocalClipboardManager の setText |
| Flutterなら | Clipboard.setData |
| React Nativeなら | expo-clipboard |