← 一覧へ

やってみよう「次へ進める」を押して、状況が進む様子を見てください

表示・レイアウトメジャー(よく見る)

タイムライン表示(時系列)

Timeline View

縦の線に沿って点を並べ、「いつ・何があったか」を時間の順に見せる。配送状況などでよく見る。

別名時系列表示配送状況履歴の縦線アクティビティログ

どこで使われている?

よく見かける場所
ネットショップの配送状況、注文履歴、アプリの更新履歴、会社の沿革
使うとよい場面
順番や経過がある情報を、わかりやすく並べたいとき
避けたい場面
順番に意味がない情報

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「タイムライン表示(時系列)(Timeline View)」を実装してください。

動き:左に縦の線を引き、できごとごとに点と時刻、説明を並べる。終わったものは色付きの点、今のものは大きく光る点、これからのものは灰色の点にする。

使う部品:左の border と疑似要素の点で作る
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら左の border と疑似要素の点で作る
iPhoneアプリならVStack と線の Shape で自作
AndroidアプリならLazyColumn と Canvas の線で自作
Flutterならtimeline_tile パッケージ
React Nativeなら自作(react-native-timeline-flatlist など)