パーツ番号 10-15-07 ・ CSSのみ

応募締切カウントダウン風カード

応募締切までの残り日数を目立つ数字で示す求人カードです。募集期限が迫っている求人に緊急感を持たせる表示に使います。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="deadline">
            <span class="num7">残り3日</span>
            <span class="dtxt">応募締切</span>
          </div>
          <p class="job">店舗スタッフ</p>
          <p class="salary">時給 1,200円〜</p>
        </div>

CSS

.d10-15-07 .card{width:220px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-15-07 .deadline{display:flex;align-items:baseline;gap:8px;background:#fff3ee;border-radius:6px;padding:8px 10px;margin-bottom:12px;}
        .d10-15-07 .num7{font-size:15px;font-weight:700;color:#d9531e;}
        .d10-15-07 .dtxt{font-size:10px;color:#b56b4a;}
        .d10-15-07 .job{margin:0 0 6px;font-size:14px;font-weight:700;color:#222;}
        .d10-15-07 .salary{margin:0;font-size:13px;color:#c0392b;font-weight:700;}

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