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

雰囲気写真付き求人カード

職場の雰囲気を伝えるビジュアル枠を上部に配置した求人カードです。写真素材の代わりにグラデーションで簡易プレビューを再現しています。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="photo"></div>
          <div class="info">
            <p class="job">カフェホールスタッフ</p>
            <p class="salary">時給 1,100円〜</p>
            <p class="loc">神奈川県横浜市</p>
          </div>
        </div>

CSS

.d10-15-09 .card{width:200px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-15-09 .photo{height:100px;background:linear-gradient(135deg,#f3c98c,#e08a5b);}
        .d10-15-09 .info{padding:12px 14px;}
        .d10-15-09 .job{margin:0 0 6px;font-size:14px;font-weight:700;color:#222;}
        .d10-15-09 .salary{margin:0 0 6px;font-size:12px;color:#c0392b;font-weight:700;}
        .d10-15-09 .loc{margin:0;font-size:11px;color:#777;}

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