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

強調表現の使い分け

太字・斜体・下線・マーカーそれぞれの見た目の違いを並べた見本です。WordPressの本文で強調表現を使い分ける際の基準に使えます。

staticcss

プレビュー

ソースコード

HTML

<p class="d02-03-09-text">
          <b class="d02-03-09-bold">太字</b>は重要語を、
          <i class="d02-03-09-italic">斜体</i>は書名や補足を、
          <u class="d02-03-09-underline">下線</u>は必読箇所を、
          <mark class="d02-03-09-mark">マーカー</mark>は強調をそれぞれ示します。
        </p>

CSS

.d02-03-09{background:#fff;text-align:left}
        .d02-03-09-text{max-width:290px;font-family:"游ゴシック","Yu Gothic",-apple-system,"Hiragino Sans",sans-serif;font-size:13.5px;line-height:2.1;color:#334155;margin:0}
        .d02-03-09-bold{font-weight:800;color:#0f172a}
        .d02-03-09-italic{font-style:italic;color:#475569}
        .d02-03-09-underline{text-decoration:underline;text-decoration-color:#94a3b8;text-underline-offset:3px}
        .d02-03-09-mark{background:#fef08a;padding:0 3px;border-radius:2px}

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