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

2026年2月25日

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

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

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

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

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

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

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

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

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

横方向のタイムライン

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

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

ステップバー

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

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

調整項目一覧

基調色

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

Code Stock

TIMELINE | Code Stock Horizontal Timeline 横方向のタイムライン step1 step2 step3 step4 step5 ステップバー▼ × デザイン調整 HTMLコピペ CSSコピペ完了基調色 HTMLをコピペしてください HT…

ステップバー

step1
step2
step3
step4
step5

HTMLコード表示

<footer class="footer-1">
  <a href="#">
    <svg class="footer-1__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 40">
      <text x="50%" y="32" font-family="sans-serif" font-size="30" font-weight="bold" fill="#fff" letter-spacing="1" text-anchor="middle">CODE STOCK</text>
    </svg>
  </a>
  <nav>
    <ul class="footer-1__list">
      <li><a href="#" class="footer-1__link">Link1</a></li>
      <li><a href="#" class="footer-1__link">Link2</a></li>
      <li><a href="#" class="footer-1__link">Link3</a></li>
      <li><a href="#" class="footer-1__link">Link4</a></li>
      <li><a href="#" class="footer-1__link">Link5</a></li>
    </ul>
  </nav>
  <p class="footer-1__copyright">@ 2026 Code Stock All rights reserved.</p>
</footer>

CSSコード表示

.footer-1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 25px 10px 10px;
  background-color: #2589d0;
}

.footer-1__logo {
  width: 220px;
  height: auto;
  margin-bottom: 15px;
}

.footer-1__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style-type: none;
  margin: 0 0 .5em;
  padding: .5em;
}

.footer-1__link {
  color: #fff;
  font-weight: 200;
  text-decoration: none;
  padding: 0 1.5em;
  border-right: 1px solid #fff;
}

.footer-1__list li:last-child .footer-1__link {
  border-right: none;
}

.footer-1__copyright {
  margin: 0;
  color: #ffffffb3;
  font-weight: 200;
  font-size: .8em;
}