Simple and Mobile-Friendly! Creating a Timeline Design with Just HTML and CSS

What is this?

This is a simple code example for creating a timeline style using only HTML and CSS.

It can be useful in cases where you need to implement pure HTML and CSS, such as with Karami Shop or WordPress with limited customization options.

The timeline is also mobile-friendly. Feel free to use it if you’d like!

Code Introduction

By implementing the following code, you can achieve the look shown below. This is a minimal style, so feel free to tweak it as needed.

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>timeline</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <!-- item box LEFT ここを繰り返す -->
    <div class="timeline__container">
      <div class="timeline__textBox">
        <div class="timeline__textBox__text left">
          text
        </div>
      </div>
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>
      <div class="timeline__date">
        2024
      </div>
    </div>
    <!-- item box 終わり -->

    <!-- item box RIGHT ここを繰り返す -->
    <div class="timeline__container">

      <div class="timeline__date left">
        2024
      </div>
      
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>

      <div class="timeline__textBox">
        <div class="timeline__textBox__text right">
          text
        </div>
      </div>
    </div>
    <!-- item box 終わり -->

    <!-- item box  LEFT ここを繰り返す -->
    <div class="timeline__container">
      <div class="timeline__textBox">
        <div class="timeline__textBox__text left">
          text
        </div>
      </div>
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>
      <div class="timeline__date">
        2024
      </div>
    </div>
    <!-- item box 終わり -->

    <!-- item box LEFT ここを繰り返す -->
    <div class="timeline__container">
      <div class="timeline__textBox">
        <div class="timeline__textBox__text left">
          text
        </div>
      </div>
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>
      <div class="timeline__date">
        2024
      </div>
    </div>
    <!-- item box 終わり -->
  </div>
</body>
</html>

.timeline__container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: 1fr;
}

.timeline__textBox {
}

.left {
  margin-left: auto;
}

.right {
  margin-right: auto;
}

.timeline__textBox__text {
  background-color: rgb(224, 231, 233);
  max-width: 370px;
  padding: 32px;
  border-radius: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.timeline__line {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.timeline__line::after {
  content: '';
  background-color: rgb(72, 176, 255);
  width: 4px;
  height: 100%;
}

.timeline__dot {
  width: 16px;
  height: 16px;
  background-color: rgb(72, 176, 255);
  border-radius: 999px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.timeline__date {
  display: flex;
  align-items: center;
  color: gray;
  font-style: italic;
}

/* スマホ版のスタイル */
@media (max-width: 768px) {
  .timeline__container {
    grid-template-columns: 100px 70px 1fr;
  }

  .timeline__textBox {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .timeline__date {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .timeline__line {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .left, .right {
    margin-left: 0;
    margin-right: 0;
  }
}