パーツ番号 06-08-07 ・ CSSのみ

カード型タイムライン(各項目が独立カード)

経歴の各項目を独立したカードとして並べる表示です。実績を区切って見せたい採用ページなどに向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-08-07-wrap">
          <div class="d06-08-07-card"><span class="d06-08-07-yr">2019</span><h4>資格取得</h4><p>プロジェクトマネジメント資格を取得</p></div>
          <div class="d06-08-07-card"><span class="d06-08-07-yr">2021</span><h4>海外赴任</h4><p>シンガポール支社に一年間勤務</p></div>
          <div class="d06-08-07-card"><span class="d06-08-07-yr">2023</span><h4>帰任・昇進</h4><p>本社にて課長職に就任</p></div>
        </div>

CSS

.d06-08-07{padding:18px 14px;}
        .d06-08-07-wrap{display:flex;flex-direction:column;gap:8px;width:100%;}
        .d06-08-07-card{background:#f7f8fb;border:1px solid #e6e9ef;border-left:4px solid #4a6cf7;border-radius:6px;padding:9px 12px;}
        .d06-08-07-yr{display:block;font-size:10.5px;font-weight:700;color:#4a6cf7;}
        .d06-08-07-card h4{margin:2px 0 2px;font-size:12.5px;color:#222;}
        .d06-08-07-card p{margin:0;font-size:10.5px;color:#888;line-height:1.4;}

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