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

企業ロゴ付き求人カード

企業ロゴ風のアイコンと社名を職種の上に配置した複合カードです。企業ブランドを訴求したい採用サイトのトップ一覧に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="head">
            <span class="logo">ST</span>
            <div class="hinfo">
              <p class="corp">株式会社ストリーム</p>
              <p class="job">経理スタッフ</p>
            </div>
          </div>
          <p class="salary">月給 22万円〜28万円</p>
          <p class="loc">福岡県福岡市</p>
        </div>

CSS

.d10-15-03 .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-03 .head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
        .d10-15-03 .logo{width:38px;height:38px;flex-shrink:0;border-radius:8px;background:linear-gradient(135deg,#5b7fdb,#3251a3);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
        .d10-15-03 .corp{margin:0 0 3px;font-size:11px;color:#888;}
        .d10-15-03 .job{margin:0;font-size:14px;font-weight:700;color:#222;}
        .d10-15-03 .salary{margin:0 0 6px;font-size:13px;color:#c0392b;font-weight:700;}
        .d10-15-03 .loc{margin:0;font-size:12px;color:#777;}

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