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;
  }
}

coiai.netでは案件受付中です。
Vtuber、建築モデリング、EC構築、ネイティブアプリ制作、制服の制作(実は縫製業もメイン)、Vision Pro向けアプリ etc…
様々な制作開発を行っています。

ご気軽にご相談ください!

コイアイちゃん Avatar

この記事を書いたのは


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA


Top
Blog
Works
contact