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

応募状況インジケーター付き求人カード

応募人数に応じたバーと倍率テキストを添えた求人カードです。人気度を可視化して応募を後押ししたい採用サイトの一覧表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <p class="job">マーケティング担当</p>
          <p class="salary">月給 28万円〜36万円</p>
          <div class="ratio">
            <div class="ratiobar"><span></span></div>
            <p class="ratiotxt">応募状況: やや多い(応募12名 / 募集2名)</p>
          </div>
        </div>

CSS

.d10-15-11 .card{width:230px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-15-11 .job{margin:0 0 8px;font-size:14px;font-weight:700;color:#222;}
        .d10-15-11 .salary{margin:0 0 12px;font-size:13px;color:#c0392b;font-weight:700;}
        .d10-15-11 .ratiobar{height:6px;border-radius:99px;background:#f0f0ee;overflow:hidden;margin-bottom:8px;}
        .d10-15-11 .ratiobar span{display:block;width:78%;height:100%;background:#e08a2e;border-radius:99px;}
        .d10-15-11 .ratiotxt{margin:0;font-size:10.5px;color:#777;}

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