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

和欧混植サンプル

日本語と英数字が混在する一文で、字間・行間を調整した組み見本です。WordPressの製品紹介文やお知らせ本文の可読性確認に使えます。

staticcss

プレビュー

ソースコード

HTML

<p class="d02-03-03-text">当店の<span class="d02-03-03-en">Web Design</span>サービスは、2024年度<span class="d02-03-03-en">Good Design Award</span>を受賞し、国内外<span class="d02-03-03-en">120</span>社の導入実績があります。</p>

CSS

.d02-03-03{background:#fff;text-align:left}
        .d02-03-03-text{max-width:300px;font-family:"游ゴシック","Yu Gothic",-apple-system,"Hiragino Sans",sans-serif;font-size:14.5px;line-height:2;letter-spacing:.03em;color:#334155;margin:0}
        .d02-03-03-en{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;letter-spacing:0;margin:0 1px;color:#1d4ed8;font-weight:600}

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