Lism CSS
Docs
検索

Timeline

出来事を時系列に並べて表示する UI の実装例です。Lism の primitives と少量の CSS（b--timeline）で構成します。

Overview

↓
Preview
20yy年m月dd日
Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日
Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日
Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
<Grid class="b--timeline" hl="s">
  <Grid class="b--timeline_item" ai="center" cg="20">
    <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">20yy年m月dd日</Lism>
    <Lism class="b--timeline_title" fz="s" fw="bold" gr="3" gc="2">Lism x.y.z がリリース。</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>ロレム・イプサムの座り雨。...</p>
    </Lism>
  </Grid>
  {/* 2件目以降も同じ構造で並べます */}
</Grid>

Styles

Timeline のベーススタイルは、以下の CSS で定義されています。この CSS をプロジェクトにコピーして利用してください。

@layer lism-block のままコピーすると、コア CSS のレイヤー順にそのまま組み込まれ、lism-custom レイヤーから上書きできます。

timeline.css 
@layer lism-block {
  .b--timeline {
    --shape-size: 1.375rem;
    --line-len: 100%;
    --line-bold: 1px;
    --_line-offset: calc(var(--shape-size) / 2);
    --highlight-inset: -3px;

    --edge: var(--s20);
    --startSpace: var(--edge);
    --endSpace: var(--edge);
    --shapeSpace: calc(var(--shape-size) + var(--highlight-inset) * -1);
  }

  .b--timeline_item {
    grid: var(--startSpace) auto auto auto var(--endSpace) / var(--shapeSpace) 1fr;
  }

  .b--timeline_line {
    width: var(--line-bold);
    height: var(--line-len);
  }

  .b--timeline_shape {
    font-size: var(--shape-size);
    width: 0.5em; /* icon ない時は 縮める */
  }
  .b--timeline_shape._hasIcon {
    width: 1em;
  }
  .b--timeline_highlight {
    inset: var(--highlight-inset);
  }

  [data-timeline='start'] {
    --startSpace: 0;
    --line-len: calc(100% - var(--_line-offset));
  }
  [data-timeline='end'] {
    --endSpace: 0;
    --line-len: calc(100% - var(--_line-offset));
  }

  .b--timeline--horizontal {
    --edge: var(--s15);
    --_line-offset: calc(50% - var(--edge) / 2);
    grid-template-rows: var(--shapeSpace) auto auto auto;
  }

  .b--timeline--horizontal > .b--timeline_item {
    grid-template-columns: var(--startSpace) auto var(--endSpace);
  }

  .b--timeline--horizontal .b--timeline_line {
    width: var(--line-len);
    height: var(--line-bold);
  }
}

Markup

マークアップは以下のクラス・属性で構成します。行・列の配置は Property Class（-gr / -gc）で指定します。

クラス / 属性 説明
b--timeline ルート要素。l--grid と併用します。横並びにする場合は b--timeline--horizontal を追加します。
b--timeline_item 1件分のラッパー要素。l--grid と併用し、縦並びでは -ai:center -cg:20、横並びでは -ai:center -ji:center -gtr:subgrid -gr:1/-1 -rg:10 を指定します。
data-timeline 先頭・末尾の指定。start / end を指定すると、その方向へのラインのはみ出しをなくします。
b--timeline_line 項目をつなぐライン（a--decorator と併用）。縦並びでは -gr:1/-1、横並びでは -gc:1/-1 で伸ばします。
b--timeline_shape 節目を示すシェイプ（l--center と併用）。-bgc で色を変更でき、アイコンを入れる場合は _hasIcon を追加します。
b--timeline_highlight シェイプを強調する装飾（a--decorator と併用。省略可）。
b--timeline_time 日時を表示する要素（省略可）。縦並びでは2行目・2列目に配置します。
b--timeline_title 見出しを表示する要素（省略可）。縦並びでは3行目・2列目に配置します。
b--timeline_text 本文を表示する要素（省略可）。縦並びでは4行目・2列目に配置します。
--edge 先頭・末尾に確保する余白（デフォルトは縦並びで var(--s20)、横並びで var(--s15)）。

シェイプの大きさやラインの太さは、CSS 側の --shape-size / --line-bold を編集して調整します。

Examples

先頭・末尾の指定とシェイプの強調

先頭と末尾の項目に data-timeline="start" / data-timeline="end" を指定すると、ラインの上下のはみ出しをなくせます。
また、シェイプ内に b--timeline_highlight を追加するとハイライト表示になり、シェイプの -bgc で色を変更できます。

↓
data-timeline と b--timeline_highlight
20yy年m月dd日

Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
<Grid class="b--timeline" hl="s">
  <Grid class="b--timeline_item" ai="center" cg="20" data-timeline="start">
    <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" aslf="e" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">20yy年m月dd日</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>Lism x.y.z がリリース。</p>
    </Lism>
  </Grid>
  {/* 中間の項目は data-timeline なし・ライン全体を表示 */}
  <Grid class="b--timeline_item" ai="center" cg="20" data-timeline="end">
    <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/3" gc="1" aslf="s" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="red" gr="2" gc="1">
      <Decorator class="b--timeline_highlight" as="span" pos="absolute" z="-1" bgc="inherit" bdrs="99" o="ppp" />
    </Center>
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">20yy年m月dd日</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>Lism x.y.z がリリース。</p>
    </Lism>
  </Grid>
</Grid>

アイコンの表示

シェイプに _hasIcon を追加し、中に <Icon>（a--icon）を配置するとアイコン付きのシェイプになります。

↓
_hasIcon
20yy年m月dd日

Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日

Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
import { CheckIcon } from '@lism-css/icons/react';


<Grid class="b--timeline_item" ai="center" cg="20">
  <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
  <Center class="b--timeline_shape _hasIcon" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1">
    <Icon icon={CheckIcon} style={{ scale: '0.625' }} />
  </Center>
  <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">20yy年m月dd日</Lism>
  <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
    <p>Lism x.y.z がリリース。</p>
  </Lism>
</Grid>

横並び（b--timeline--horizontal）

ルート要素に b--timeline--horizontal を追加すると、横方向に並ぶタイムラインになります。各項目は -gtr:subgrid でルートの行を共有し、ラインは -gc:1/-1 で横方向に伸ばします。

↓
b--timeline--horizontal
20yy年m月dd日
Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日
Lism x.y.z がリリース。Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

20yy年m月dd日
Lism x.y.z がリリース。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
<Grid class="b--timeline b--timeline--horizontal" gaf="column" hl="s">
  <Grid class="b--timeline_item" ai="center" ji="c" gtr="subgrid" gr="1/-1" rg="10" data-timeline="start">
    <Decorator class="b--timeline_line" bgc="divider" jslf="e" gr="1" gc="1/-1" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="1" gc="2" />
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">20yy年m月dd日</Lism>
    <Lism class="b--timeline_title" fz="s" fw="bold" gr="3" gc="2">Lism x.y.z がリリース。</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>ロレム・イプサムの座り雨。...</p>
    </Lism>
  </Grid>
  {/* 中間の項目はラインを `jslf="center"` で中央に、末尾は `jslf="s"` で手前側だけ表示します */}
</Grid>

© 2026 Lism CSS.