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

スキルタグ付きエンジニア求人カード

使用技術を小さなタグで一覧表示するエンジニア向け求人カードです。技術スタックで求人を絞り込みたいIT専門求人ページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <p class="job">バックエンドエンジニア</p>
          <p class="salary">年収 500万円〜800万円</p>
          <div class="skills">
            <span class="sk">Ruby</span>
            <span class="sk">AWS</span>
            <span class="sk">MySQL</span>
            <span class="sk">Docker</span>
          </div>
        </div>

CSS

.d10-15-08 .card{width:240px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-15-08 .job{margin:0 0 8px;font-size:15px;font-weight:700;color:#222;}
        .d10-15-08 .salary{margin:0 0 10px;font-size:13px;color:#c0392b;font-weight:700;}
        .d10-15-08 .skills{display:flex;flex-wrap:wrap;gap:6px;}
        .d10-15-08 .sk{font-size:10px;color:#2f4f9e;background:#e8edfb;padding:3px 8px;border-radius:3px;font-weight:600;}

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