クリップボードコピーボタン
これは隣に置いたコードを 1 クリックで写すコピーボタンで、複数のボタンをページに置ける設計が特徴です。各ボタンの data-target にコピー元要素の id を持たせ、スクリプトは querySelectorAll で全ボタンに一括でクリック処理を付けます。
解説
これは隣に置いたコードを 1 クリックで写すコピーボタンで、複数のボタンをページに置ける設計が特徴です。各ボタンの data-target にコピー元要素の id を持たせ、スクリプトは querySelectorAll で全ボタンに一括でクリック処理を付けます。押すと対象の textContent を navigator.clipboard.writeText() で写し、成功時に文言を「コピー済み」に変えて copy-block__btn--copied で背景を緑にし、2 秒後に元へ戻します。word-break:break-all を効かせているので、長いコマンドでも枠からはみ出さず折り返します。
使う場面
- インストール手順を複数行ぶん並べる技術ブログや手順書
- 1 画面に複数のコマンドやコードを併記するドキュメント
- クーポンコードや紹介コードを複数まとめて配るページ
同じページで何個でも増やせるのが利点で、ボタンの data-target をコピー元の id に合わせるだけです。色はアクセントの #0066cc と完了の #28a745 を置き換えれば馴染みます。注意点として navigator.clipboard は HTTPS か localhost が前提で、対応外の環境向けにフォールバックを足すとより堅牢になります。完了を色と文言の両方で示している点も親切な設計です。
よくある質問
同じページにコピーボタンを何個も置けますか？
はい、それがこのサンプルの狙いです。各ボタンの data-target にコピー元の id を指定すれば、スクリプトが全ボタンへ自動で処理を付けるので何個でも設置できます。
長いコマンドを入れるとボタンの形が崩れませんか？
コード側に word-break を効かせているので、長い文字列は折り返して枠内に収まります。ボタンは flex-shrink を 0 にしてあり、縮まず一定の大きさを保ちます。