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

コマンドライン(ターミナル)風表示

プロンプト記号付きでコマンド入力を再現したターミナル風表示です。CLIツールの使い方を説明する記事の見出し画像として使えます。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-08-pre"><code><span class="d02-06-08-line"><span class="d02-06-08-prompt">$</span> npm run build</span>
<span class="d02-06-08-line d02-06-08-out">＞ webpack compiled successfully</span>
<span class="d02-06-08-line"><span class="d02-06-08-prompt">$</span> <span class="d02-06-08-cursor">▌</span></span></code></pre>

CSS

.d02-06-08{ background:#000; }
        .d02-06-08-pre{ width:100%; margin:0; padding:18px; font:13px/2 "SFMono-Regular",Consolas,monospace; }
        .d02-06-08-line{ display:block; color:#e6e6e6; white-space:pre; }
        .d02-06-08-prompt{ color:#4ee44e; margin-right:8px; }
        .d02-06-08-out{ color:#7fa8ff; }
        .d02-06-08-cursor{ color:#e6e6e6; }

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