やってみよう画面の右側・左側をタップしてみてください。長押しすると止まります
表示・レイアウトメジャー(よく見る)
ストーリーズ
Stories
上に細い線が並び、時間とともに伸びて自動で次の画面へ進む。右をタップで次、左をタップで前、長押しで一時停止。
別名インスタのストーリーストーリー表示上のバーが進むStatus
どこで使われている?
- よく見かける場所
- Instagram、Facebook、LINE VOOM
- 使うとよい場面
- 写真や短い動画を、テンポよく次々見せたいとき
- 避けたい場面
- じっくり読ませたい内容
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「ストーリーズ(Stories)」を実装してください。 動き:全画面で写真を1枚ずつ表示し、上部に枚数分の細いバーを並べる。今の1枚のバーを時間とともに伸ばし、伸び切ったら次へ進む。画面の右側をタップで次、左側で前、長押しの間は一時停止する。 使う部品:自作
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | 自作 |
|---|---|
| iPhoneアプリなら | 自作 |
| Androidアプリなら | 自作 |
| Flutterなら | story_view パッケージ |
| React Nativeなら | react-native-insta-story |