CSSのみで実装するレスポンシブなタイムライン

会社の沿革や経歴をわかりやすく表示するのに適したタイムライン。実際に自分のサイトに取り入れるために実装してみたので紹介します。実装はCSSのみで、レスポンシブ対応も行っています。

レスポンシブの挙動を確認したい方はこちら

ブレイクポイントを「768px」に指定し、モバイルでは情報はすべて右に。タブレット・PCでは年月が左側に並ぶようにしています。

●の高さはフォントやCSSによって多少のずれが生じますので

.timeline .timeline-content::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #0093cd;
  position: absolute;
  left: 106px;
  top: 20px;
  border-radius: 100%;
}

こちらのtopの値を微調整してご使用ください。

参考にさせてもらったページは

経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン

です。ありがとうございました！