HTMLのコピー機能の実装方法：ボタンをクリックしてテキストをコピー

ウェブ開発において、ユーザーが簡単に情報をコピーできる機能は非常に便利です。この記事では、HTMLとJavaScriptを使用して、ボタンをクリックすると指定したテキストがクリップボードにコピーされる機能の実装方法について説明します。

1. HTML構造の準備
2. スタイルの設定
3. JavaScriptによるコピー機能の実装
4. 実装したコードの詳細解説
5. 結論

1. HTML構造の準備

まず、HTMLの基本的な構造を作成します。コピーしたいテキストを表示するためのボタンを設置し、ユーザーがボタンをクリックするとそのテキストがクリップボードにコピーされるようにします。

2. スタイルの設定

ページのデザインを整えるために、CSSでスタイルを設定します。ここでは、ボタンやテキストの配置を整えるためのシンプルなスタイルを使用します。ボタンをクリックしやすく、テキストを見やすく配置することが目的です。

3. JavaScriptによるコピー機能の実装

ボタンがクリックされたときに、指定したテキストをクリップボードにコピーするためのJavaScriptを実装します。このコードでは、まずボタンがクリックされたかどうかを監視し、その後、テキストをコピーする関数を実行します。

4. 実装したコードの詳細解説

以下は、コピー機能を実現するための実際のコードです。ユーザーがボタンをクリックすると、指定されたテキストがクリップボードにコピーされ、成功した場合にはその旨がメッセージとして表示されます。

<!doctype html>
<html lang="ja">
<head>
 <meta charset="utf-8" />
<title>コピー</title>
 <style>
 body { font-family: system-ui, sans-serif; padding: 24px; }
 .item { display: flex; gap: 12px; align-items: center; margin: 10px 0; }
 .label { width: 140px; font-weight: 700; }
 button { padding: 8px 12px; font-size: 15px; cursor: pointer; }
 #msg { margin-top: 14px; }
</style>
</head>
<body>

 <div class="item">
 <div class="label">A</div>
 <button type="button" class="copyBtn" data-prefix="A">コピー</button>
 </div>

 <div class="item">
 <div class="label">B</div>
 <button type="button" class="copyBtn" data-prefix="B">コピー</button>
 </div>

 <div id="msg" aria-live="polite"></div>

 <script>
 const msgEl = document.getElementById("msg");

 function getHHMM() {
 const now = new Date();
 const hh = String(now.getHours()).padStart(2, "0");
 const mm = String(now.getMinutes()).padStart(2, "0");
 return `${hh}:${mm}`;
 }

 async function copyText(text) {
 if (navigator.clipboard && window.isSecureContext) {
 await navigator.clipboard.writeText(text);
 return;
 }
 const ta = document.createElement("textarea");
 ta.value = text;
 ta.style.position = "fixed";
 ta.style.left = "-9999px";
 document.body.appendChild(ta);
 ta.focus();
 ta.select();
 const ok = document.execCommand("copy");
 document.body.removeChild(ta);
 if (!ok) throw new Error("コピー失敗");
 }

 document.addEventListener("click", async (e) => {
 const btn = e.target.closest(".copyBtn");
 if (!btn) return;

 const prefix = btn.dataset.prefix;
 const time = getHHMM();
 const textToCopy = `${prefix} ${time}`;

 try {
 await copyText(textToCopy);
 msgEl.textContent = `コピーしました: ${textToCopy}`;
 } catch (err) {
 msgEl.textContent = "コピーできませんでした";
 console.error(err);
 }
 });
</script>
</body>
</html>