AIでコードブロックにコピーボタンを追加する【CSS＋JS生成】

技術系ブログでよく見る「コードをコピー」ボタン。クリックするとクリップボードにコードがコピーされ、ボタンが「コピーしました！」に変わるUIです。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のコードブロックHTMLに、
・右上に「コピー」ボタンを表示するCSS
・クリックするとクリップボードにコードをコピーするJavaScript
・コピー後2秒間「コピーしました！」に変わり、元に戻る処理
を追加してください。

<div class="code-block">
  <pre><code class="code-content">const greeting = 'Hello, World!';
console.log(greeting);</code></pre>
</div>

生成されたCSS例

.code-block {
  position: relative;
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
}
.code-block pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  color: #d4d4d4;
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d4d4d4;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.copy-btn.copied {
  color: #4ec9b0;
  border-color: #4ec9b0;
}

生成されたJS例

document.querySelectorAll('.code-block').forEach(block => {
  const btn = document.createElement('button');
  btn.className = 'copy-btn';
  btn.textContent = 'コピー';
  block.appendChild(btn);

  btn.addEventListener('click', async () => {
    const code = block.querySelector('.code-content').textContent;
    await navigator.clipboard.writeText(code);
    btn.textContent = 'コピーしました！';
    btn.classList.add('copied');
    setTimeout(() => {
      btn.textContent = 'コピー';
      btn.classList.remove('copied');
    }, 2000);
  });
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

コードブロックに「コピー」ボタンが右上についたUIをHTML・CSS・JavaScriptで作ってください。
・ダークテーマのコードブロック
・コピーボタンはホバーで明るくなる
・コピー後「コピーしました！」に変わり2秒後に戻る
・複数のコードブロックがあっても各自で動作する

ポイント

• navigator.clipboardはHTTPS環境でないと動作しません。ローカル開発環境ではlocalhostなら使えます
• 複数コードブロックがある場合は、JSがすべての.code-blockにボタンを自動で追加するように設計するとスマートです