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

ファイル名タブ付きコードブロック

上部にファイル名タブを並べて複数ファイルを扱っているように見せる表示です。設定手順を紹介する記事の見出し代わりに便利です。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-06-04-box">
          <div class="d02-06-04-tabs">
            <span class="d02-06-04-tab d02-06-04-active">style.css</span>
            <span class="d02-06-04-tab">index.html</span>
          </div>
          <pre class="d02-06-04-body"><code><span class="d02-06-04-sel">.card</span> {
  <span class="d02-06-04-prop">border-radius</span>: <span class="d02-06-04-val">8px</span>;
  <span class="d02-06-04-prop">padding</span>: <span class="d02-06-04-val">16px</span>;
}</code></pre>
        </div>

CSS

.d02-06-04{ background:#f4f4f7; }
        .d02-06-04-box{ width:100%; max-width:320px; border-radius:8px; overflow:hidden; border:1px solid #2c3038; }
        .d02-06-04-tabs{ display:flex; background:#20232b; }
        .d02-06-04-tab{ padding:9px 16px; font:12px/1 -apple-system,sans-serif; color:#8a8f98; border-right:1px solid #2c3038; }
        .d02-06-04-active{ background:#1a1d23; color:#e6e8eb; border-top:2px solid #61afef; }
        .d02-06-04-body{ margin:0; padding:16px 18px; background:#1a1d23; font:12.5px/1.7 Consolas,monospace; color:#d6d9de; white-space:pre; }
        .d02-06-04-sel{ color:#e5c07b; }
        .d02-06-04-prop{ color:#61afef; }
        .d02-06-04-val{ color:#98c379; }

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