HTML, CSS のみで単純なタイムラインのスタイルを作成するコードの紹介です。
カラミーショップや制限のあるWordrpress などでピュアなHTML, CSS で実装しなければならない場合に使えると思います。
スマホ対応にもしています。よければお使いください。
以下のコードで実装すると次のような見た目のものが実装できます。
最低限のスタイルですので適宜いじっていただければと思います。
<!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（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
