← 一覧へ

やってみよう流れる帯にマウスを乗せる(スマホはタップする)と止まります

アニメーション・演出マイナー(知る人ぞ知る)

マーキー

Marquee / Ticker

文字やロゴが、帯の中を横にずっと流れ続ける。電光掲示板のような動き。

別名ティッカー流れる文字電光掲示板ニュースティッカーテロップ

どこで使われている?

よく見かける場所
ニュースサイトの速報、ブランドのロゴ一覧、イベントのお知らせ
使うとよい場面
ロゴやキーワードをにぎやかに並べたいとき
避けたい場面
大事な文章(読み終わる前に流れていく)

補足昔のHTMLにあった <marquee> は使わず、CSSのアニメーションで作るのが今のやり方です。

AIへの指示文

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

HTML / CSS / JavaScript で「マーキー(Marquee / Ticker)」を実装してください。

動き:横長の帯の中で、文字やロゴを右から左へ一定の速さで流し続け、最後まで流れたら途切れずに先頭へつなげる。マウスを乗せている間やタップしたときは止める。

使う部品:CSS の @keyframes で translateX(同じ中身を2つ並べて途切れなく)
もっと詳しく:プログラムでの部品名

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

WebサイトならCSS の @keyframes で translateX(同じ中身を2つ並べて途切れなく)
iPhoneアプリなら標準部品なし。自作
AndroidアプリならModifier.basicMarquee()
Flutterならmarquee パッケージ
React Nativeならreact-native-text-ticker