Web BENTO JS
カテゴリ一覧
コピー・共有

08 / CLIPBOARD 12 パーツ

クリップボードコピーのJS実装 12選

Q: navigator.clipboard が動かないことがあるのはなぜですか？

navigator.clipboard は https（または localhost）のセキュアコンテキストでしか使えません。http のページや古いブラウザでは動かないため、このページのサンプルはすべて document.execCommand('copy') への自動フォールバックを内蔵しています。

Q: コピーしたコードはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

Q: 同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

Q: Web Share API が使えないブラウザではどうなりますか？

navigator.share が未対応の環境（一部のデスクトップブラウザなど）では、自動的にページURLのクリップボードコピーに切り替わり、「URLをコピーしました」とフィードバックを表示します。ユーザーを行き止まりにしない設計です。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「コードブロックコピー」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くコピー・共有パーツのサンプル集です。プレビューのボタンは実際にクリックでコピー・共有できます。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべてnavigator.clipboard ＋ execCommand フォールバック内蔵の依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。

該当するパーツが見つかりませんでした。

テキストコピー

<!-- data-copy の中身がそのままコピーされる -->
<button type="button" class="bnto-cp1" data-bnto-copy
  data-copy="ここに書いた文字列がコピーされます">
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
  <span class="lb">テキストをコピー</span><span class="ok">コピーしました ✓</span>
</button>

.bnto-cp1 {
  --c1: hsl(202 73% 50%);   /* ボタン色 */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: transform .15s, background .3s;
}
.bnto-cp1:active { transform: scale(.95); }
.bnto-cp1 .ok { display: none; }
/* コピー成功で色とラベルが切り替わる */
.bnto-cp1.is-done { background: hsl(150 58% 42%); }
.bnto-cp1.is-done .lb { display: none; }
.bnto-cp1.is-done .ok { display: inline; }

// data-bnto-copy を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  // navigator.clipboard（https必須）→ 非対応なら execCommand へ
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-copy]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function () {
      bntoCopy(btn.getAttribute('data-copy') || '', function () {
        btn.classList.add('is-done');
        clearTimeout(btn._t);
        btn._t = setTimeout(function () { btn.classList.remove('is-done'); }, 1600);
      });
    });
  });
})();

使い方のコツ

コピーする文字列は data-copy 属性を書き換えるだけです。navigator.clipboard は https（または localhost）でしか動かない点に注意——このJSは非対応環境で自動的に execCommand('copy') へフォールバックします。

npm install web-bento
npx bento init

コードブロックコピー

<!-- pre の中身がコピーされる。記事内に複数置いてもOK -->
<div class="bnto-cp2" data-bnto-codecopy>
  <button type="button" class="cp"><span class="lb">コピー</span></button>
  <pre>npm install web-bento
npx bento init</pre>
</div>

.bnto-cp2 {
  --c1: hsl(258 47% 54%);   /* コピー済みボタンの色 */
  position: relative;
}
.bnto-cp2 pre {
  margin: 0; padding: 16px 14px;
  background: #24203A; color: #EDE9FF;
  border-radius: 12px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.7; overflow-x: auto;
}
/* 右上に浮かぶコピーボタン */
.bnto-cp2 .cp {
  position: absolute; top: 8px; right: 8px;
  padding: 5px 10px;
  background: rgba(255,255,255,.14); color: #fff;
  border: none; border-radius: 8px;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background .2s;
}
.bnto-cp2 .cp:hover { background: rgba(255,255,255,.26); }
.bnto-cp2 .cp.is-done { background: var(--c1); }

// pre 内のコードを右上ボタンでコピー（このサイトと同じ仕組み）
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-codecopy]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btn = box.querySelector('.cp');
    var lb = btn.querySelector('.lb');
    var pre = box.querySelector('pre');
    btn.addEventListener('click', function () {
      bntoCopy(pre.textContent.trim(), function () {
        btn.classList.add('is-done');
        lb.textContent = 'コピー済 ✓';
        clearTimeout(btn._t);
        btn._t = setTimeout(function () {
          btn.classList.remove('is-done');
          lb.textContent = 'コピー';
        }, 1600);
      });
    });
  });
})();

使い方のコツ

技術ブログのコード掲載に向いています。pre の中にHTMLタグを書くときは < > にエスケープしてください（textContent で取り出すのでコピー時は元のタグに戻ります）。

URLコピー（ツールチップ付き）

<button type="button" class="bnto-cp3" data-bnto-urlcopy>
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
  このページのURLをコピー
  <span class="tip" role="status">コピーしました！</span>
</button>

.bnto-cp3 {
  --c1: hsl(150 58% 42%);   /* アクセント色 */
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  background: #fff; color: #1D2A36;
  border: 2px solid var(--c1); border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: background .2s, color .2s;
}
.bnto-cp3 svg { color: var(--c1); transition: color .2s; }
.bnto-cp3:hover { background: var(--c1); color: #fff; }
.bnto-cp3:hover svg { color: #fff; }
/* 上に出るツールチップ */
.bnto-cp3 .tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: #1D2A36; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.bnto-cp3 .tip::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1D2A36;
}
.bnto-cp3.is-show .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

// 現在のページURL（location.href）をコピーしてツールチップ表示
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-urlcopy]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function () {
      bntoCopy(location.href, function () {
        btn.classList.add('is-show');
        clearTimeout(btn._t);
        btn._t = setTimeout(function () { btn.classList.remove('is-show'); }, 1600);
      });
    });
  });
})();

使い方のコツ

SNSボタンが使われにくいBtoBサイトでも「URLをコピー」はよく使われます。ツールチップの role="status" でスクリーンリーダーにも成功が伝わります。記事ページの末尾やヘッダーに常設するのがおすすめです。

入力欄の値コピー（クーポン風）

<div class="bnto-cp4" data-bnto-inputcopy>
  <input type="text" value="BENTO-2026-OFF30" readonly aria-label="クーポンコード">
  <button type="button" class="cp"><span class="lb">コピー</span></button>
</div>

.bnto-cp4 {
  --c1: hsl(26 90% 55%);   /* アクセント色 */
  display: flex; max-width: 290px;
  background: #fff;
  border: 2px dashed var(--c1);   /* 破線でクーポン感 */
  border-radius: 12px; overflow: hidden;
}
.bnto-cp4 input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  padding: 12px 10px; text-align: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 700; font-size: 13px; letter-spacing: .06em;
}
.bnto-cp4 .cp {
  flex: none; padding: 0 16px;
  border: none; background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer;
  transition: filter .2s;
}
.bnto-cp4 .cp:hover { filter: brightness(1.08); }

// input の value をコピー（クーポン・招待コード向け）
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-inputcopy]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var input = box.querySelector('input');
    var btn = box.querySelector('.cp');
    var lb = btn.querySelector('.lb');
    btn.addEventListener('click', function () {
      input.select();   // 「選択された」見た目でコピー感を出す
      bntoCopy(input.value, function () {
        lb.textContent = '✓ OK';
        clearTimeout(btn._t);
        btn._t = setTimeout(function () { lb.textContent = 'コピー'; }, 1600);
      });
    });
  });
})();

使い方のコツ

クーポンコード・招待コード・APIキーの表示に向いています。readonly を付けておくと誤編集を防げます。コードを変えるときは value 属性を書き換えるだけでOKです。

Web Share API（フォールバック付き）

<!-- 対応ブラウザ：OSのシェアシート／非対応：URLコピーに自動切替 -->
<button type="button" class="bnto-cp5" data-bnto-share
  data-share-title="ページのタイトル"
  data-share-text="紹介文をここに">
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
  <span class="lb">このページをシェア</span><span class="ok">URLをコピーしました ✓</span>
</button>

.bnto-cp5 {
  --c1: hsl(187 63% 42%);   /* ボタン色 */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .15s;
}
.bnto-cp5:active { transform: scale(.95); }
/* フォールバック時のラベル切替 */
.bnto-cp5 .ok { display: none; }
.bnto-cp5.is-done .lb { display: none; }
.bnto-cp5.is-done .ok { display: inline; }

// navigator.share 対応ならシェアシート／非対応ならURLコピー
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-share]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function () {
      var data = {
        title: btn.getAttribute('data-share-title') || document.title,
        text:  btn.getAttribute('data-share-text')  || '',
        url:   btn.getAttribute('data-share-url')   || location.href
      };
      if (navigator.share) {
        navigator.share(data).catch(function () {});   // キャンセルは無視
      } else {
        bntoCopy(data.url, function () {
          btn.classList.add('is-done');
          clearTimeout(btn._t);
          btn._t = setTimeout(function () { btn.classList.remove('is-done'); }, 1600);
        });
      }
    });
  });
})();

使い方のコツ

navigator.share はhttpsのページでしか動きません。対応はモバイルブラウザ中心で、PCはOS・ブラウザにより対応が分かれます（Windows版Chrome/Edge、macOS版Safariなどは対応）。非対応環境でボタンが「押しても無反応」にならないよう、URLコピーへのフォールバックを必ずセットで用意してください。

SNSシェアリンク生成

<!-- data-share-text ＋ ページURLで intent リンクを組み立てて開く -->
<button type="button" class="bnto-cp6" data-bnto-snsshare
  data-share-text="シェア時の文言をここに">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
  シェアする
</button>

.bnto-cp6 {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: #0F1419;   /* 濃色（サイトに合わせて変更OK） */
  color: #fff;
  border: none; border-radius: 999px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: transform .15s, opacity .2s;
}
.bnto-cp6:hover { opacity: .85; }
.bnto-cp6:active { transform: scale(.95); }

// テキスト＋URLからSNSのポスト画面を開く（APIキー不要）
(function () {
  document.querySelectorAll('[data-bnto-snsshare]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function () {
      var text = btn.getAttribute('data-share-text') || document.title;
      var url  = btn.getAttribute('data-share-url')  || location.href;
      var intent = 'https://twitter.com/intent/tweet' +
        '?text=' + encodeURIComponent(text) +
        '&url=' + encodeURIComponent(url);
      window.open(intent, '_blank', 'noopener,width=560,height=640');
    });
  });
})();

使い方のコツ

ボタンを押すと X（旧Twitter）の投稿画面が開きます。APIキー不要で今も使える公式の intent リンク方式です。data-share-text に #ハッシュタグ を含めてもOK（encodeURIComponent が自動処理）。&via=アカウント名 で「via @〜」も付けられます。Facebook・LINE など他サービスも、それぞれのシェアURLに差し替えれば同じ仕組みで動きます。

カラーコードチップ

<!-- data-hex と --sw を揃えてチップを増やす -->
<div class="bnto-cp7" data-bnto-colorchips>
  <button type="button" class="chip" data-hex="#E8557E" style="--sw:#E8557E;">
    <i class="sw"></i><span class="lb">#E8557E</span>
  </button>
  <button type="button" class="chip" data-hex="#3DA9E0" style="--sw:#3DA9E0;">
    <i class="sw"></i><span class="lb">#3DA9E0</span>
  </button>
  <!-- .chip を色の数だけ -->
</div>

.bnto-cp7 { display: flex; flex-wrap: wrap; gap: 8px; }
.bnto-cp7 .chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 8px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.bnto-cp7 .chip:hover { border-color: var(--sw); }
.bnto-cp7 .chip:active { transform: scale(.94); }
/* 色見本の丸 */
.bnto-cp7 .chip .sw {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}
.bnto-cp7 .chip.is-done { border-color: var(--sw); }

// 色見本クリックで #HEX をコピー
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-colorchips]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    box.querySelectorAll('.chip').forEach(function (chip) {
      var lb = chip.querySelector('.lb');
      var hex = chip.getAttribute('data-hex') || lb.textContent;
      chip.addEventListener('click', function () {
        bntoCopy(hex, function () {
          chip.classList.add('is-done');
          lb.textContent = '✓ コピー済';
          clearTimeout(chip._t);
          chip._t = setTimeout(function () {
            chip.classList.remove('is-done');
            lb.textContent = hex;
          }, 1400);
        });
      });
    });
  });
})();

使い方のコツ

デザインシステムやスタイルガイドのページに最適です。チップは data-hex と --sw を揃えて増やすだけです。rgb() や CSS変数名をコピーさせたいときは data-hex の中身を差し替えればOKです。

お礼メールの定型文

件名：お打ち合わせのお礼

株式会社◯◯ ◯◯様

本日はお時間をいただき
ありがとうございました。

メールテンプレコピー

<!-- .tpl の中身（改行込み）がそのままコピーされる -->
<div class="bnto-cp8" data-bnto-mailtpl>
  <div class="hd">
    <span>お礼メールの定型文</span>
    <button type="button" class="cp"><span class="lb">テンプレをコピー</span></button>
  </div>
  <pre class="tpl">件名：お打ち合わせのお礼

株式会社◯◯ ◯◯様

本日はお時間をいただき
ありがとうございました。</pre>
</div>

.bnto-cp8 {
  --c1: hsl(345 80% 55%);   /* ボタン色 */
  max-width: 290px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; overflow: hidden;
}
.bnto-cp8 .hd {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-bottom: 2px dashed #DFE9F1;
  font-size: 12.5px; font-weight: 800;
}
.bnto-cp8 .cp {
  flex: none; padding: 6px 11px;
  border: none; background: var(--c1); color: #fff;
  border-radius: 8px;
  font: inherit; font-weight: 800; font-size: 11px; cursor: pointer;
  transition: filter .2s;
}
.bnto-cp8 .cp:hover { filter: brightness(1.07); }
/* pre なので改行がそのまま生きる */
.bnto-cp8 .tpl {
  margin: 0; padding: 12px 14px;
  font: inherit; font-size: 11.5px; line-height: 1.8;
  color: #5A6B7A; white-space: pre-wrap;
}

// 件名＋本文の定型文（.tpl の中身）をボタンでコピー
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-mailtpl]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btn = box.querySelector('.cp');
    var lb = btn.querySelector('.lb');
    var tpl = box.querySelector('.tpl');
    btn.addEventListener('click', function () {
      bntoCopy(tpl.textContent, function () {
        lb.textContent = 'コピーしました ✓';
        clearTimeout(btn._t);
        btn._t = setTimeout(function () { lb.textContent = 'テンプレをコピー'; }, 1600);
      });
    });
  });
})();

使い方のコツ

問い合わせ返信・営業メール・社内報告などの定型文集に向いています。pre なので改行やインデントがそのままコピーされます。ソースコード上の字下げもコピーに含まれる点だけ注意してください（テンプレ部分は左端から書くのが安全です）。

商品	単価	在庫
のり弁当	480円	12
から揚げ弁当	580円	8

表をコピー（表計算ソフト対応）

<!-- table の中身がTSV（タブ区切り）になってコピーされる。th / td 両対応 -->
<div class="bnto-cp9" data-bnto-tablecopy>
  <table>
    <thead>
      <tr><th>商品</th><th>単価</th><th>在庫</th></tr>
    </thead>
    <tbody>
      <tr><td>のり弁当</td><td>480円</td><td>12</td></tr>
      <tr><td>から揚げ弁当</td><td>580円</td><td>8</td></tr>
    </tbody>
  </table>
  <button type="button" class="cp"><span class="lb">表をコピー</span></button>
</div>

.bnto-cp9 {
  --c1: hsl(230 60% 52%);   /* ボタン色 */
  max-width: 290px;
}
.bnto-cp9 table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; overflow: hidden;
  font-size: 11.5px;
}
.bnto-cp9 th, .bnto-cp9 td { padding: 8px 10px; text-align: left; }
.bnto-cp9 th {
  background: #F3F8FC; color: #5A6B7A;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  border-bottom: 2px solid #DFE9F1;
}
.bnto-cp9 td { font-weight: 600; border-bottom: 2px solid #EEF4F9; }
.bnto-cp9 tr:last-child td { border-bottom: none; }
.bnto-cp9 .cp {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 10px;
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer;
  transition: transform .15s, filter .2s;
}
.bnto-cp9 .cp:hover { filter: brightness(1.08); }
.bnto-cp9 .cp:active { transform: scale(.95); }

// 表をコピー：table をTSV（タブ区切り＋改行）にしてコピー。Excel / スプレッドシートにそのまま貼れる
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-tablecopy]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var table = box.querySelector('table');
    var btn = box.querySelector('.cp');
    var lb = btn.querySelector('.lb');
    btn.addEventListener('click', function () {
      var tsv = Array.prototype.map.call(table.rows, function (row) {
        return Array.prototype.map.call(row.cells, function (cell) {
          // セル内の改行・連続空白はスペース1つに（貼り付け時の行ズレ防止）
          return cell.textContent.replace(/\s+/g, ' ').trim();
        }).join('\t');
      }).join('\n');
      bntoCopy(tsv, function () {
        lb.textContent = 'コピーしました ✓';
        clearTimeout(btn._t);
        btn._t = setTimeout(function () { lb.textContent = '表をコピー'; }, 1600);
      });
    });
  });
})();

使い方のコツ

料金表や仕様表を「Excelで扱いたい」ユーザー向けの気配りパーツです。セル内の改行や連続する空白はスペース1つに置換しています（残すと貼り付け先で行がずれるため）。colspan / rowspan の結合セルは1セルとして出力されるので、列がずれる場合は結合のない表で使ってください。

画像をコピー

<!-- canvas に描いた画像を ClipboardItem(image/png) でコピー -->
<div class="bnto-cp10" data-bnto-imagecopy>
  <canvas width="248" height="110" aria-label="デモ画像"></canvas>
  <button type="button" class="cp"><span class="lb">画像をコピー</span></button>
</div>

.bnto-cp10 {
  --c1: hsl(262 55% 55%);   /* ボタン色 */
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
  max-width: 290px;
}
.bnto-cp10 canvas {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.bnto-cp10 .cp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 10px;
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer;
  transition: transform .15s, filter .2s;
}
.bnto-cp10 .cp:hover { filter: brightness(1.08); }
.bnto-cp10 .cp:active { transform: scale(.95); }

// Canvasの画像を ClipboardItem(image/png) でコピー。非対応ならダウンロードに切替
(function () {
  document.querySelectorAll('[data-bnto-imagecopy]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var canvas = box.querySelector('canvas');
    var btn = box.querySelector('.cp');
    var lb = btn.querySelector('.lb');
    // デモ用の画像をCanvasに描画（実際は好きな図版・グラフなどを描いてOK）
    var ctx = canvas.getContext('2d');
    var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    g.addColorStop(0, '#3DA9E0');
    g.addColorStop(1, '#7C5CD6');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '800 18px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('SAMPLE IMAGE', canvas.width / 2, canvas.height / 2);
    function feedback(text) {
      lb.textContent = text;
      clearTimeout(btn._t);
      btn._t = setTimeout(function () { lb.textContent = '画像をコピー'; }, 1600);
    }
    btn.addEventListener('click', function () {
      canvas.toBlob(function (blob) {
        if (!blob) return;
        function download() {
          // 非対応ブラウザはPNGダウンロードにフォールバック
          var a = document.createElement('a');
          a.href = URL.createObjectURL(blob);
          a.download = 'image.png';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          setTimeout(function () { URL.revokeObjectURL(a.href); }, 1000);
          feedback('ダウンロードしました ✓');
        }
        if (navigator.clipboard && window.ClipboardItem && window.isSecureContext) {
          navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
            .then(function () { feedback('コピーしました ✓'); }, download);
        } else {
          download();
        }
      }, 'image/png');
    });
  });
})();

使い方のコツ

QRコードやグラフなどCanvasで生成した画像をそのままコピーさせたいときに便利です。画像コピーは ClipboardItem が使える https のページ限定で、形式は image/png が最も広く対応しています。非対応環境では自動でPNGダウンロードに切り替わるため、ユーザーが行き止まりになりません。既存の img をコピーしたい場合は、いったんCanvasへ drawImage してから同じ流れでコピーできます（別オリジンの画像はCORS許可が必要です）。

Markdownでコピー

<!-- ページタイトルとURLを [タイトル](URL) 形式でコピー -->
<div class="bnto-cp11" data-bnto-mdcopy>
  <div class="sw" role="group" aria-label="コピー形式の切替">
    <button type="button" class="md is-on" aria-pressed="true">Markdown</button>
    <button type="button" class="pl" aria-pressed="false">プレーン</button>
  </div>
  <button type="button" class="cp"><span class="lb">タイトルとURLをコピー</span></button>
</div>

.bnto-cp11 {
  --c1: hsl(150 55% 40%);   /* アクセント色 */
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
/* 形式切替のピル型スイッチ */
.bnto-cp11 .sw {
  display: inline-flex; gap: 3px; padding: 3px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 999px;
}
.bnto-cp11 .sw button {
  padding: 6px 14px;
  background: none; border: none; border-radius: 999px;
  font: inherit; font-size: 11.5px; font-weight: 800;
  color: #5A6B7A; cursor: pointer;
  transition: background .2s, color .2s;
}
.bnto-cp11 .sw button.is-on { background: var(--c1); color: #fff; }
.bnto-cp11 .cp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 12px;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: transform .15s;
}
.bnto-cp11 .cp:active { transform: scale(.95); }

// ページタイトル＋URLを Markdown／プレーンの2形式でコピー
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-mdcopy]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var mdBtn = box.querySelector('.md');
    var plBtn = box.querySelector('.pl');
    var btn = box.querySelector('.cp');
    var lb = btn.querySelector('.lb');
    var mode = 'md';
    function setMode(next) {
      mode = next;
      mdBtn.classList.toggle('is-on', mode === 'md');
      plBtn.classList.toggle('is-on', mode === 'pl');
      mdBtn.setAttribute('aria-pressed', mode === 'md');
      plBtn.setAttribute('aria-pressed', mode === 'pl');
    }
    mdBtn.addEventListener('click', function () { setMode('md'); });
    plBtn.addEventListener('click', function () { setMode('pl'); });
    btn.addEventListener('click', function () {
      // Markdown：[タイトル](URL)／プレーン：タイトル＋URL
      var text = mode === 'md'
        ? '[' + document.title + '](' + location.href + ')'
        : document.title + ' ' + location.href;
      bntoCopy(text, function () {
        lb.textContent = 'コピーしました ✓';
        clearTimeout(btn._t);
        btn._t = setTimeout(function () { lb.textContent = 'タイトルとURLをコピー'; }, 1600);
      });
    });
  });
})();

使い方のコツ

ドキュメントツールやチャットなどMarkdownが使える場所へのページ共有がワンクリックになります。document.title と location.href を自動取得するので、どのページに置いても書き換え不要です。形式を増やしたいとき（HTMLの a タグ形式など）は、text を組み立てている部分に分岐を足すだけです。

この文章の好きな部分をドラッグで選択してから、下のボタンを押してください。選択した文がページ名とURL付きの引用としてコピーされます。

引用としてコピー

<!-- ページ内で選択したテキストを「"選択文" — 出典: ページ名（URL）」でコピー -->
<div class="bnto-cp12" data-bnto-quotecopy>
  <p class="src">引用元になるサンプル文章をここに</p>
  <button type="button" class="cp"><span class="lb">引用としてコピー</span></button>
  <p class="st" aria-live="polite"></p>
</div>

.bnto-cp12 {
  --c1: hsl(35 90% 48%);   /* アクセント色 */
  max-width: 290px;
}
/* 引用元のサンプル文章 */
.bnto-cp12 .src {
  margin: 0 0 10px; padding: 12px 14px;
  background: #fff;
  border-left: 4px solid var(--c1); border-radius: 10px;
  line-height: 1.8;
}
/* 選択中のハイライトもアクセント色に */
.bnto-cp12 .src::selection { background: var(--c1); color: #fff; }
.bnto-cp12 .cp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: var(--c1); color: #fff;
  border: none; border-radius: 10px;
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer;
  transition: transform .15s, filter .2s;
}
.bnto-cp12 .cp:hover { filter: brightness(1.08); }
.bnto-cp12 .cp:active { transform: scale(.95); }
.bnto-cp12 .st {
  margin: 8px 0 0; min-height: 1em;
  font-size: 11.5px; font-weight: 800; color: #8a8478;
}

// 選択テキストを「"選択文" — 出典: ページ名（URL）」形式でコピー
(function () {
  function bntoCopy(text, done) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, legacy);
    } else { legacy(); }
    function legacy() {
      var ta = document.createElement('textarea');
      ta.value = text; ta.setAttribute('readonly', '');
      ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  }
  document.querySelectorAll('[data-bnto-quotecopy]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var btn = box.querySelector('.cp');
    var st = box.querySelector('.st');
    // mousedown の既定動作を止め、ボタンを押しても選択が消えないようにする
    btn.addEventListener('mousedown', function (e) { e.preventDefault(); });
    btn.addEventListener('click', function () {
      var sel = String(window.getSelection()).trim();
      if (!sel) {
        st.textContent = '先に文中のテキストを選択してください';
        return;
      }
      var quote = '"' + sel + '" — 出典: ' + document.title + '（' + location.href + '）';
      bntoCopy(quote, function () {
        st.textContent = '引用をコピーしました ✓';
        clearTimeout(box._t);
        box._t = setTimeout(function () { st.textContent = ''; }, 2000);
      });
    });
  });
})();

使い方のコツ

記事の一文を出典付きで引用シェアしてもらうための気配りパーツです。ポイントはボタンの mousedown で preventDefault() していること——これが無いとボタンを押した瞬間に選択が解除されてしまいます。引用符や「出典:」の書式は quote を組み立てている1行を書き換えるだけで変更できます。デモの対象は .src の文章ですが、実際はページ内のどこを選択してもコピーできます。

クリップボードAPIの基礎知識

「コピーする」ボタンは、クーポンコード・シェア用URL・コードスニペットなど手入力させたくない文字列があるページの定番UIです。現在の標準は navigator.clipboard.writeText()（非同期Clipboard API）で、このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで実装しています。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

navigator.clipboard は https 必須（セキュアコンテキスト）

navigator.clipboard が使えるのは https のページと localhost だけです。http のテストサーバーや一部の社内環境では navigator.clipboard 自体が undefined になるため、「ローカルでは動いたのに本番で動かない」（またはその逆）が起こりがちです。サンプルでは window.isSecureContext もあわせてチェックしています。

execCommand フォールバックで古い環境もカバー

非対応環境では、一時的に textarea を生成して document.execCommand('copy') を実行する古典的な方法に自動で切り替えます。execCommand は非推奨APIですが、削除されておらず後方互換の受け皿として今も有効です。このページの全パーツがこの2段構えを内蔵しているので、貼り付け先の環境を選びません。

コピー成功のフィードバックUX

クリップボードへのコピーは画面に何の変化も起こさないため、「コピーしました ✓」の明示的なフィードバックが必須です。ボタンのラベル・色を1.5秒ほど切り替える、ツールチップを出す、トースト通知を出す、のいずれかを必ず添えましょう。連打対策として setTimeout のIDを保持して clearTimeout する実装にしてあります。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

navigator.clipboard が動かないことがあるのはなぜですか？

navigator.clipboard は https（または localhost）のセキュアコンテキストでしか使えません。http のページや古いブラウザでは動かないため、このページのサンプルはすべて document.execCommand('copy') への自動フォールバックを内蔵しています。

コピーしたコードはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

Web Share API が使えないブラウザではどうなりますか？

navigator.share が未対応の環境（主にPCブラウザ）では、自動的にページURLのクリップボードコピーに切り替わり、「URLをコピーしました」とフィードバックを表示します。ユーザーを行き止まりにしない設計です。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「コードブロックコピー」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

クリップボードコピーのJS実装 12選

テキストコピー

コードブロックコピー

URLコピー（ツールチップ付き）

入力欄の値コピー（クーポン風）

Web Share API（フォールバック付き）

SNSシェアリンク生成

カラーコードチップ

メールテンプレコピー

表をコピー（表計算ソフト対応）

画像をコピー

Markdownでコピー

引用としてコピー

クリップボードAPIの基礎知識

navigator.clipboard は https 必須（セキュアコンテキスト）

execCommand フォールバックで古い環境もカバー

コピー成功のフィードバックUX

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ