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

macOS風ウィンドウ枠コードブロック

上部に赤黄緑の丸ボタンが並ぶウィンドウ枠でコードを囲むデザインです。チュートリアル記事のスクリーンショット風演出に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-06-02-win">
          <div class="d02-06-02-bar">
            <span class="d02-06-02-dot d02-06-02-r"></span>
            <span class="d02-06-02-dot d02-06-02-y"></span>
            <span class="d02-06-02-dot d02-06-02-g"></span>
          </div>
          <pre class="d02-06-02-body"><code><span class="d02-06-02-tag">&lt;div</span> <span class="d02-06-02-attr">class</span>=<span class="d02-06-02-str">"box"</span><span class="d02-06-02-tag">&gt;</span>
  Hello
<span class="d02-06-02-tag">&lt;/div&gt;</span></code></pre>
        </div>

CSS

.d02-06-02{ background:#f4f4f7; }
        .d02-06-02-win{ width:100%; max-width:320px; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.15); background:#282c34; }
        .d02-06-02-bar{ display:flex; gap:7px; padding:10px 12px; background:#3a3f4b; }
        .d02-06-02-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
        .d02-06-02-r{ background:#ff5f56; }
        .d02-06-02-y{ background:#ffbd2e; }
        .d02-06-02-g{ background:#27c93f; }
        .d02-06-02-body{ margin:0; padding:16px 18px; font:12.5px/1.7 Consolas,monospace; color:#abb2bf; white-space:pre; }
        .d02-06-02-tag{ color:#e06c75; }
        .d02-06-02-attr{ color:#d19a66; }
        .d02-06-02-str{ color:#98c379; }

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