← 静的パーツギャラリーへ戻る

パーツ番号 02-06-07 ・ CSSのみ

コピー ボタン付きコードブロック外観(静止)

右上にコピー用アイコンが配置された枠の見た目だけを再現したものです。API手順などコードを引用してほしい記事の装飾に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-06-07-box">
          <span class="d02-06-07-copy" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M4 16V4a2 2 0 0 1 2-2h10"></path></svg>
          </span>
          <pre class="d02-06-07-body"><code>curl -X POST /api/users \
  -d '{"name":"Aki"}'</code></pre>
        </div>

CSS

.d02-06-07{ background:#f4f4f7; }
        .d02-06-07-box{ position:relative; width:100%; max-width:300px; background:#1e2128; border-radius:8px; padding:18px; }
        .d02-06-07-copy{ position:absolute; top:10px; right:10px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:#2c313c; border-radius:5px; color:#9aa0ab; }
        .d02-06-07-body{ margin:0; padding-right:24px; font:12.5px/1.8 Consolas,monospace; color:#dcdfe4; white-space:pre-wrap; }

クラス名 .d02-06-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。