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

リモート可マーク付き求人カード

職種名の右にリモート勤務可のマークを添えた求人カードです。働き方の柔軟性を重視する求職者向けの絞り込み表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="head">
            <p class="job">Webエンジニア</p>
            <span class="remote">リモート可</span>
          </div>
          <p class="salary">月給 30万円〜45万円</p>
          <p class="loc">勤務地問わず</p>
        </div>

CSS

.d10-15-06 .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-06 .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
        .d10-15-06 .job{margin:0;font-size:14px;font-weight:700;color:#222;}
        .d10-15-06 .remote{flex-shrink:0;font-size:10px;font-weight:700;color:#0f7a68;background:#e1f5f1;padding:3px 8px;border-radius:10px;}
        .d10-15-06 .salary{margin:0 0 6px;font-size:13px;color:#c0392b;font-weight:700;}
        .d10-15-06 .loc{margin:0;font-size:12px;color:#777;}

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