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

二列比較タイムライン(左:出来事/右:成果)

出来事と成果を左右に対で並べる表示です。実績紹介ページや事業報告で成果を明確に示したい場合に役立ちます。

staticcss

プレビュー

ソースコード

HTML

<table class="d06-08-06-tbl">
          <tr><td class="d06-08-06-l">要件定義を実施</td><td class="d06-08-06-mid">2022</td><td class="d06-08-06-r">開発期間を30%短縮</td></tr>
          <tr><td class="d06-08-06-l">新体制へ移行</td><td class="d06-08-06-mid">2023</td><td class="d06-08-06-r">離職率が半減</td></tr>
          <tr><td class="d06-08-06-l">全社ツール導入</td><td class="d06-08-06-mid">2024</td><td class="d06-08-06-r">月次工数を20時間削減</td></tr>
        </table>

CSS

.d06-08-06{padding:18px 12px;}
        .d06-08-06-tbl{border-collapse:collapse;width:100%;font-size:10.5px;}
        .d06-08-06-tbl tr{border-bottom:1px solid #eceff3;}
        .d06-08-06-tbl tr:last-child{border-bottom:none;}
        .d06-08-06-tbl td{padding:9px 4px;vertical-align:middle;}
        .d06-08-06-l{color:#555;text-align:right;width:40%;}
        .d06-08-06-mid{width:20%;text-align:center;font-weight:800;color:#fff;background:#3b6fe0;border-radius:20px;font-size:10px;padding:4px 0;}
        .d06-08-06-r{color:#2f9e6e;text-align:left;width:40%;font-weight:600;}

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