縦型タイムラインのデザイン

CSS で縦型タイムラインのデザインをする。

デモページを表示

CSS

補足

• 左端の縦線は li 要素のボーダー、"●" は li 要素の疑似要素で表示している。
• 左端の縦線は改行により伸びる（レスポンシブ対応）。
• "●" の位置は、関係する要素のスタイルにより微調整が必要になる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• dl 要素に timeline クラスを付ける。
• dd 要素の中に ul 要素を置いて、出来事を箇条書きしている。