コピーボタン実装解説｜Copy Button JavaScript Guide

2026年4月2日

コピーボタンデザイン見本

navigator.clipboard.writeText() を使ったクリップボードコピーの実装デモ。コピーしてすぐに使えるHTML・JS・CSSのコードを掲載。

① 基本実装 — 要素のテキストをコピー

この文章をクリップボードにコピーできます。ペーストして確認してみてください。

HTML

<p id="target-txt">コピーしたいテキスト</p>
<button id="copy-btn">コピーする</button>
<p id="copy-msg"></p>

var para = document.getElementById('target-txt');
var btn = document.getElementById('copy-btn');
var msgEl = document.getElementById('copy-msg');

btn.addEventListener('click', function() {
  if (!navigator.clipboard) {
    msgEl.textContent = 'このブラウザはClipboard APIに未対応です。';
    return;
  }
  navigator.clipboard.writeText(para.textContent).then(function() {
    msgEl.textContent = 'コピーしました！';
  }, function() {
    msgEl.textContent = 'コピーに失敗しました。';
  });
});

navigator.clipboard.writeText()

引数に渡したテキストをクリップボードへ書き込む非同期メソッドです。Promiseを返すため、.then() の第1引数に成功時、第2引数に失敗時の処理を記述できます。!navigator.clipboard のチェックを冒頭に入れることで、未対応ブラウザへの早期リターンが実現できます。

② テキストエリアのコピー — .value プロパティ

HTML

<textarea id="copy-area">コピーしたいテキスト</textarea>
<button id="copy-ta-btn">テキストをコピー</button>
<p id="copy-ta-msg"></p>

var area = document.getElementById('copy-area');
var btn = document.getElementById('copy-ta-btn');
var msgEl = document.getElementById('copy-ta-msg');

btn.addEventListener('click', function() {
  if (!navigator.clipboard) {
    msgEl.textContent = 'このブラウザはClipboard APIに未対応です。';
    return;
  }
  navigator.clipboard.writeText(area.value).then(function() {
    msgEl.textContent = 'コピーしました！';
  }, function() {
    msgEl.textContent = 'コピーに失敗しました。';
  });
});

element.value

textarea や input などのフォーム要素からテキストを取得するには .textContent ではなく .value プロパティを使います。ユーザーが入力・編集した内容がリアルタイムで反映されるため、「自由記述をコピーする」ような動的なコピー機能の実装に最適です。

③ ビジュアルフィードバック — alert() を使わないコピー通知

NOVEBLO AI Design — navigator.clipboard.writeText()

HTML

<p id="copy-text">コピー対象のテキスト</p>
<button id="copy-visual-btn">テキストをコピー</button>

CSS

#copy-visual-btn {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#copy-visual-btn.done {
  background: #dcfce7;
  color: #16a34a;
  border-color: #86efac;
}

var para = document.getElementById('copy-text');
var btn = document.getElementById('copy-visual-btn');

btn.addEventListener('click', function() {
  if (!navigator.clipboard) return;
  navigator.clipboard.writeText(para.textContent).then(function() {
    btn.textContent = '✓ コピー完了！';
    btn.className = 'done';
    setTimeout(function() {
      btn.textContent = 'テキストをコピー';
      btn.className = '';
    }, 2000);
  });
});

ビジュアルフィードバック

コピー完了の通知に alert() を使うとブラウザのUIをブロックしてしまい、ユーザー体験が損なわれます。ボタンのテキストやスタイルを一時的に変更することで、ページを中断せずに直感的なフィードバックを実現できます。2秒後に元の状態に戻す setTimeout() との組み合わせが定番の実装パターンです。

注意点：navigator.clipboard は HTTPS または localhost 環境でのみ動作します。HTTP 環境では undefined になり、コピーが実行されません。!navigator.clipboard による早期チェックとフォールバック処理の実装を推奨します。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

コピーボタン 実装解説｜Copy Button JavaScript Guide

コピーボタン デザイン見本

① 基本実装 — 要素のテキストをコピー

② テキストエリアのコピー — .value プロパティ

③ ビジュアルフィードバック — alert() を使わないコピー通知

コピーボタン実装解説｜Copy Button JavaScript Guide

コピーボタンデザイン見本