やってみよう「次へ進める」を押して、状況が進む様子を見てください
表示・レイアウトメジャー(よく見る)
タイムライン表示(時系列)
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 など) |