【JavaScript】HTML・CSSでコピーボタン付きコードブロックを作成する方法

シュウ

今回は【jQuery】HTML・CSSでコピーボタン付きコードブロックを作成する方法!
の解説になります！

ブログにソースコードを掲載している方
HTMLやCSS、JavaScriptなどのコードをブログで紹介しており、読者が簡単にコピーできる機能を設置したい方です。
HTML・CSS・JavaScriptで便利なUIを実装したい方
コードブロックにコピーボタンを設置し、ボタンのデザインやクリック時の動作を自分でカスタマイズしたい方です。
WordPressのブログをカスタマイズしたい方
WordPressの記事内に掲載するソースコードを、読者がワンクリックでコピーできるようにしたい方です。

[記事の内容]

コピーボタン付きコードブロックをとは

ブログでHTMLやCSS、JavaScriptなどのソースコードを紹介する際、読者が簡単にコードをコピーできる機能があると便利です。
特に、プログラミングやWeb制作に関する技術ブログでは、掲載したコードをそのままコピーして利用したいケースも多くあります。

これを機に私のブログにも、「コピー」機能を実装致します。
完成イメージは以下のようになります。

<div class="code-container">
<!--右上の「コピー」ボタンを実装-->
</div>

ボタンの配置やデザインから、クリック時のコピー処理、コピー完了後の表示変更まで、実際のサンプルコードをもとに解説します。

メリット

操作性の向上：コードを手動で選択する必要がなく、ワンクリックでコピーできます。
コピー時のミスを防止：コードの一部を選択し忘れるなどのミスを減らせます。
利便性の向上：コピーしたコードをエディタなどに貼り付けて、すぐに利用できます。

コピーボタン付きコード HTML編

今回使用するHTMLは、divでコードブロック全体を囲み、その中にコピーボタンとソースコードを配置する構造です。
書き方は以下のようになります。

<div class="code-container">
    <button class="copy-btn">コピー</button>
    <pre><code><!--ここにコードを貼ってね--></code></pre>
</div>

●①code-container: コピーボタンとコードブロック全体を囲むコンテナです。

●②copy-btn: コードをコピーするためのボタンです。

●③pre: コード内の改行や空白をそのまま表示するための要素です。

●④code: 実際に表示するソースコードを記述する要素です。

preとcodeを組み合わせることで、ソースコードの改行やインデントを保持した状態で表示できます。

コピーボタン付きコード CSS編

HTMLで構造を作成したら、次はCSSでコードブロックとコピーボタンのデザインを調整します。
コードブロックの背景色や文字色、余白などを指定し、ソースコードが見やすいデザインにします。
書き方は以下のようになります。

/*--コードブロックの基本スタイル--*/
.code-container {
    position: relative;
    max-width: 600px;
    margin: 20px 0;
}

.code-container pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    padding-top: 40px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: "Courier New", Courier, monospace;
    margin: 0;
}

/*--コピーボタンの配置とデザイン--*/
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #333333;
    color: #ffffff;
    border: 1px solid #555555;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/*--コピーボタンhover時--*/
.copy-btn:hover {
    background-color: #555555;
}

.copy-btn.copied {
    background-color: #4caf50;
    color: #ffffff;
    border-color: #4caf50;
}

・コードブロックの基本スタイル
.code-container に position: relative; を指定することで、コピーボタンを絶対配置する際の基準点になります。
また、pre に overflow-x: auto; を指定することで、コードが横幅を超えた場合に横スクロールで確認できるようにしています。
padding-top: 40px; は、右上に配置するコピーボタンとコードが重ならないようにするための余白です。

・コピーボタンの配置とデザイン
position: absolute; を指定し、top と right でボタンの位置を調整しています。
親要素の .code-container に position: relative; を設定しているため、コードブロックの右上を基準に配置できます。
また、cursor: pointer; を指定することで、ボタンにマウスカーソルを合わせた際にクリックできることが分かりやすくなります。

コピーボタン付きコード JavaScript編

CSSでデザインを整えたら、JavaScriptを使用してコピーボタンの動作を実装します。
書き方は以下のようになります。

<script>
const copyBtn = document.querySelector('.copy-btn');
const codeBlock = document.querySelector('.code-container pre code');
copyBtn.addEventListener('click', () => {
    const textToCopy = codeBlock.innerText;
    navigator.clipboard.writeText(textToCopy).then(() => {
        copyBtn.textContent = 'コピー完了！';
        copyBtn.classList.add('copied');
        setTimeout(() => {
            copyBtn.textContent = 'コピー';
            copyBtn.classList.remove('copied');
        }, 2000);
    }).catch(err => {
        console.error('コピーに失敗しました:', err);
    });
});
</script>

●①コピーボタンとコードを取得: querySelector() を使用して、コピーボタンとコピー対象のコードブロックを取得します。

●②クリックイベントを設定: addEventListener('click', ...) を使用して、コピーボタンがクリックされた際に処理を実行します。

●③コピーするテキストを取得: innerText を使用して、コードブロック内のテキストを取得します。

●④クリップボードにコピー: navigator.clipboard.writeText() を使用して、取得したコードをクリップボードにコピーします。

●⑤コピー完了時の表示を変更: コピーが成功すると、ボタンのテキストを「コピー完了！」に変更し、copied クラスを追加して背景色を変更します。

●⑥2秒後に元の表示に戻す: setTimeout() を使用して2秒後にボタンのテキストを「コピー」に戻し、copied クラスを削除します。

●⑦コピー失敗時の処理: catch() を使用して、コピーに失敗した場合にエラーをコンソールに出力します。

まとめ

今回はこれで以上です。
今回は、HTML・CSS・JavaScriptを使用して、コピーボタン付きコードブロックを作成する方法を紹介しました。
HTMLでコードブロックとボタンの構造を作成し、CSSでデザインを整え、JavaScriptでクリップボードへのコピー処理を実装することで、ワンクリックでコードをコピーできる機能を作成できます。

また、コピー成功時にボタンの色やテキストを変更することで、読者が操作結果を確認しやすくなります。
ブログやWebサイトでソースコードを掲載する際は、ぜひコピーボタン付きコードブロックを活用してみてください。

POINT