ボタンを押すと右側の文字列をクリップボードにコピーするコードを作らせました。
ボタンをクリックすると対象の文字列がクリップボードにコピーされ黄色く反応します。
メモ帳にコピペして保存する際に拡張子を.htmlにすると使えます。
"textToCopy = ["のコピーさせたい文字列1などを任意のものにして使ってください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Copy Text to Clipboard</title> <style> /* テキストがハイライトされるアニメーションの定義 */ @keyframes textHighlight { 0% { background-color: transparent; } 50% { background-color: yellow; } 100% { background-color: transparent; } } /* コピー項目を含むdiv要素に適用するスタイル */ div.copyItem { margin-top: 5px; /* 上に10pxのマージンを追加 */ margin-bottom: 5px; /* 下に10pxのマージンを追加 */ } /* ハイライトアニメーションを適用するクラス */ .highlight { animation: textHighlight 1s forwards; } button { margin-right: 10px; /* ボタンの右側に10pxのマージンを追加 */ } </style> </head> <body> <div id="listContainer"></div> <script> document.addEventListener('DOMContentLoaded', function() { // コピーしたい文字列の配列。ユーザーはこの配列にコピーしたいテキストを追加します。 const textToCopy = [ "コピーしたい文字列1", "コピーしたい文字列2", "コピーしたい文字列3" // 必要に応じて、この配列に新しい文字列を追加してください。 ]; const listContainer = document.getElementById('listContainer'); // 各テキスト項目に対してコピー機能を持つ要素を作成し、ページに追加します。 textToCopy.forEach(text => { listContainer.appendChild(createCopyItem(text)); }); // コピー項目を作成する関数 function createCopyItem(text) { const listItem = document.createElement('div'); listItem.classList.add('copyItem'); const copyButton = document.createElement('button'); copyButton.textContent = 'コピー'; const textSpan = document.createElement('span'); textSpan.textContent = text; // コピー操作を行うイベントリスナー copyButton.addEventListener('click', () => { copyToClipboard(text, textSpan); }); listItem.appendChild(copyButton); listItem.appendChild(textSpan); return listItem; } // テキストをクリップボードにコピーし、アニメーションを適用する関数 function copyToClipboard(text, textSpan) { navigator.clipboard.writeText(text).then(() => { // コピー成功時にテキストをハイライト textSpan.classList.add('highlight'); // アニメーション終了後にクラスを削除 setTimeout(() => textSpan.classList.remove('highlight'), 1000); }).catch(err => console.error('Failed to copy text: ', err)); } }); </script> </body> </html>
