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

和英スラッシュ複合見出し

日本語見出しと英語表記をスラッシュで区切り横並びにした複合スタイル。料金表や価格ページの章見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl"><span class="ja">料金プラン</span><span class="sep">/</span><span class="en">PRICING</span></h4>

CSS

.d02-07-16 .ttl{ all:unset; display:flex; align-items:baseline; justify-content:center; gap:10px; }
        .d02-07-16 .ja{ font-size:21px; font-weight:800; color:#1f2937; }
        .d02-07-16 .sep{ font-size:20px; font-weight:300; color:#d1d5db; }
        .d02-07-16 .en{ font-size:13px; font-weight:700; letter-spacing:.12em; color:#9ca3af; }

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