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

インラインコード装飾(文中埋め込み)

本文中にコード風の装飾テキストを埋め込む表現です。手順解説記事でコマンド名やプロパティ名を目立たせたい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<p class="d02-06-05-text">段落中で <code class="d02-06-05-code">npm install</code> のように、コマンドや変数名を <code class="d02-06-05-code">background-color</code> と組み合わせて説明する例です。</p>

CSS

.d02-06-05-text{ font:14px/1.9 -apple-system,sans-serif; color:#333; max-width:280px; }
        .d02-06-05-code{ background:#f0f1f5; color:#c0341d; padding:2px 6px; border-radius:4px; font:12.5px/1 Consolas,monospace; border:1px solid #e2e4ea; }

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