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!
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
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
