【html&css】コピペで作る！横方向のおしゃれなタイムラインデザイン1選

2026年2月25日2026年4月5日

本記事では、コピペで作れる横方向のおしゃれなタイムラインデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、タイムラインを作成するにはul・li・olタグを利用します。

ul・li・olタグの使い方を詳しく知りたい人は「【html&css】ul・li・olの使い方とおしゃれなデザインリスト」を一読ください。

【html&css】ul・li・olの使い方とおしゃれなデザインリスト

おしゃれなフリー素材デザイン集

本サイトでは、タイムライン以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

Code Stock | UIコピペサイト UIコピペサイト

横方向のタイムライン

ここでは、以下の横方向のタイムラインデザイン例を記載しています。

横方向のタイムラインデザイン

ステップバー

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もタイムラインページでは選択式でご用意しました。

調整項目一覧

基調色

ご興味があれば「タイムライン一覧ページ」を一読ください。

Code Stock

TIMELINE | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Horizontal Timeline 横方向のタイムライン step1 step2 step3 step4 step5 ステップバー▼ × …

ステップバー

step1
step2
step3
step4
step5

HTMLコード表示

<ol class="timeline-1">
  <li class="prev">step1</li>
  <li class="prev">step2</li>
  <li class="current">step3</li>
  <li>step4</li>
  <li>step5</li>
</ol>

CSSコード表示

.timeline-1 {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}

.timeline-1 li {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  color: #969da3;
  font-size: .8em;
}

.timeline-1 li.prev,
.timeline-003 li.current {
  color: #2589d0;
}

.timeline-1 li::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-bottom: 6px;
  content: '';
  border: 2px solid #d6dde3;
  border-radius: 50%;
  background-color: #fff;
}

.timeline-1 li.prev::before,
.timeline-1 li.current::before {
  border-color: #2589d0;
}

.timeline-1 li:not(:last-child)::after {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 2px;
  background-color: #d6dde3;
  content: '';
}

.timeline-1 li.current::before,
.timeline-1 li.prev::after {
  background-color: #2589d0;
}