パーツ番号 02-13-04 ・ CSSのみ

縦書きラベルタグ

短い語句を縦書きで表示した小さなラベルタグの見本です。WordPressの商品一覧やお知らせ一覧のステータス表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-04-row">
          <span class="d02-13-04-tag">新着</span>
          <span class="d02-13-04-tag d02-13-04-tag2">人気</span>
          <span class="d02-13-04-tag d02-13-04-tag3">限定</span>
        </div>

CSS

.d02-13-04{background:#f8fafc}
        .d02-13-04-row{display:flex;gap:10px}
        .d02-13-04-tag{writing-mode:vertical-rl;text-orientation:upright;font-size:13px;font-weight:700;letter-spacing:.1em;color:#fff;background:#6366f1;padding:14px 6px;border-radius:4px}
        .d02-13-04-tag2{background:#f59e0b}
        .d02-13-04-tag3{background:#ef4444}

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