パーツ番号 06-08-11 ・ CSSのみ
月表示カレンダー風タイムライン
各出来事の左に「4月」のような月ラベルを添えた年間イベント表示です。社内報や1年間の活動報告ページに向きます。
プレビュー
ソースコード
HTML
<div class="d06-08-11-wrap">
<div class="d06-08-11-item"><span class="d06-08-11-mon">4月</span><div class="d06-08-11-body"><h4>新年度スタート</h4><p>新入社員6名が加わり組織を拡大</p></div></div>
<div class="d06-08-11-item"><span class="d06-08-11-mon">8月</span><div class="d06-08-11-body"><h4>新オフィス移転</h4><p>執務スペースを2倍に拡張</p></div></div>
<div class="d06-08-11-item"><span class="d06-08-11-mon">12月</span><div class="d06-08-11-body"><h4>年間表彰式</h4><p>優秀チームを社内表彰</p></div></div>
</div>CSS
.d06-08-11{padding:20px 16px;}
.d06-08-11-wrap{display:flex;flex-direction:column;gap:12px;width:100%;}
.d06-08-11-item{display:flex;align-items:flex-start;gap:12px;}
.d06-08-11-mon{flex:0 0 auto;font-size:11px;font-weight:700;color:#fff;background:#2f9e6e;border-radius:5px;padding:4px 8px;font-family:sans-serif;}
.d06-08-11-body h4{margin:0 0 3px;font-size:12.5px;color:#222;font-family:sans-serif;}
.d06-08-11-body p{margin:0;font-size:10.5px;color:#888;line-height:1.4;font-family:sans-serif;}クラス名 .d06-08-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。