コピーボタン（クリップボード API）
navigator.clipboard.writeText() でテキストをクリップボードへコピーする実装。コピー成功時の✓表示・フォールバック対応付き。
解説
コピーボタン（クリップボード API）は、インタラクションカテゴリの「コピー」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度はシンプルレベル。
クリップボード API でテキストをコピー、成功時にチェックマーク表示。コードブロック・電話番号・住所コピーに。
クリップボード API（navigator.clipboard.writeText()）を使ったコピーボタンの基本実装です。コードブロック・電話番号・住所・クーポンコードのコピーに最適。
コピー成功時に「✓ コピーしました」とフィードバック表示することで、操作完了の安心感を与えます。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
注意点 / カスタマイズ時のポイント
HTTPS 環境でのみ動作します（localhost を除く）。HTTP サイトでは document.execCommand('copy') のレガシー実装が必要です。
iOS Safari の古いバージョンでは navigator.clipboard が undefined になることがあるので、フォールバック分岐推奨。
使用例・適したシーン
- コードブロック
- 電話番号・住所コピー
- クーポンコードの配布
よくある質問
HTTP サイトでも動かしたい
document.execCommand('copy') を使ったレガシー実装にフォールバックする必要があります。ただし非推奨 API で将来削除される可能性があります。成功通知を Toast 風にしたい
成功時に固定位置の Toast を表示する実装に変更できます。Toast スニペット（ui-toast 系）と組み合わせると統一感が出ます。
このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
jQuery でも書けますか？
この実装は vanilla JavaScript で書いています。jQuery が必要であれば
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。