← 一覧へ

やってみよう画面の右側・左側をタップしてみてください。長押しすると止まります

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

ストーリーズ

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