ใ“ใฎใƒšใƒผใ‚ธใฏใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใƒผใฎๅฐฝๅŠ›ใง่‹ฑ่ชžใ‹ใ‚‰็ฟป่จณใ•ใ‚Œใพใ—ใŸใ€‚MDN Web Docs ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใƒผใซใคใ„ใฆใ‚‚ใฃใจ็Ÿฅใ‚Šใ€ไปฒ้–“ใซใชใ‚‹ใซใฏใ“ใกใ‚‰ใ‹ใ‚‰ใ€‚

View in English Always switch to English

<marquee>: ใƒžใƒผใ‚ญใƒผ่ฆ็ด 

้žๆŽจๅฅจ;: ใ“ใฎๆฉŸ่ƒฝใฏ้žๆŽจๅฅจใซใชใ‚Šใพใ—ใŸใ€‚ใพใ ๅฏพๅฟœใ—ใฆใ„ใ‚‹ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใŒใ‚ใ‚‹ใ‹ใ‚‚ใ—ใ‚Œใพใ›ใ‚“ใŒใ€ใ™ใงใซ้–ข้€ฃใ™ใ‚‹ใ‚ฆใ‚งใƒ–ๆจ™ๆบ–ใ‹ใ‚‰ๅ‰Š้™คใ•ใ‚Œใฆใ„ใ‚‹ใ‹ใ€ๅ‰Š้™คใฎๆ‰‹็ถšใไธญใงใ‚ใ‚‹ใ‹ใ€ไบ’ๆ›ๆ€งใฎใŸใ‚ใ ใ‘ใซๆฎ‹ใ•ใ‚Œใฆใ„ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚ไฝฟ็”จใ‚’้ฟใ‘ใ€ใงใใ‚Œใฐๆ—ขๅญ˜ใฎใ‚ณใƒผใƒ‰ใฏๆ›ดๆ–ฐใ—ใฆใใ ใ•ใ„ใ€‚ใ“ใฎใƒšใƒผใ‚ธใฎไธ‹้ƒจใซใ‚ใ‚‹ไบ’ๆ›ๆ€งไธ€่ฆง่กจใ‚’่ฆ‹ใฆๅˆคๆ–ญใ—ใฆใใ ใ•ใ„ใ€‚ใ“ใฎๆฉŸ่ƒฝใฏ็ช็„ถๅ‹•ไฝœใ—ใชใใชใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚‹ใ“ใจใซๆณจๆ„ใ—ใฆใใ ใ•ใ„ใ€‚

<marquee> ใฏ HTML ใฎ่ฆ็ด ใงใ€ใƒ†ใ‚ญใ‚นใƒˆใŒใ‚นใ‚ฏใƒญใƒผใƒซใ™ใ‚‹้ ˜ๅŸŸใ‚’ๆŒฟๅ…ฅใ—ใพใ™ใ€‚่ฆ็ด ใฎๅฑžๆ€งใ‚’ไฝฟ็”จใ—ใฆใ€ใƒ†ใ‚ญใ‚นใƒˆใŒใ‚ณใƒณใƒ†ใƒณใƒ„้ ˜ๅŸŸใฎ็ซฏใซ้”ใ—ใŸใจใใซใฉใ†ใ™ใ‚‹ใ‹ใ‚’ๅˆถๅพกใงใใพใ™ใ€‚

HTML ใฎ <marquee> ่ฆ็ด ใฏ้žๆŽจๅฅจใงใ‚ใ‚Šใ€ไฝฟ็”จใฏๆฅตๅŠ›้ฟใ‘ใ‚‹ในใใงใ™ใ€‚ ใƒ†ใ‚ญใ‚นใƒˆใ‚„้€ฃ็ถšใ™ใ‚‹่ฆ็ด ใ‚’ใ‚นใ‚ฏใƒญใƒผใƒซใ•ใ›ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚‹ๅ ดๅˆใฏใ€ CSS ใ‚ขใƒ‹ใƒกใƒผใ‚ทใƒงใƒณใ‚’ CSS ๅบงๆจ™ๅค‰ๆ›ใจ็ต„ใฟๅˆใ‚ใ›ใฆ <marquee> ่ฆ็ด ใฎไปฃใ‚ใ‚Šใซไฝฟ็”จใ™ใ‚‹ใจใ€ใ‚ณใƒณใƒ†ใƒณใƒ„ใ‚’ใ‚นใƒ ใƒผใ‚บใซใ‚ขใƒ‹ใƒกใƒผใ‚ทใƒงใƒณใงใใพใ™ใฎใงใ€ใ“ใกใ‚‰ใ‚’ๆคœ่จŽใ—ใฆใใ ใ•ใ„ใ€‚ใ•ใ‚‰ใซใ€ CSS ใฎ @media ใง prefers-reduced-motion ใ‚ฏใ‚จใƒชใƒผใ‚’ๅซใ‚ใ‚‹ใ“ใจใงใ€ใƒฆใƒผใ‚ถใƒผใฎๅฅฝใฟใซๅฟœใ˜ใฆใ‚ขใƒ‹ใƒกใƒผใ‚ทใƒงใƒณใ‚’ๅœๆญขใงใใ‚‹ใ‚ˆใ†ใซใ™ใ‚‹ใจใ€ไฝฟใ„ใ‚„ใ™ใ•ใจใ‚ขใ‚ฏใ‚ปใ‚ทใƒ“ใƒชใƒ†ใ‚ฃใฎๆ”นๅ–„ใซใคใชใŒใ‚Šใพใ™ใ€‚

ๅฑžๆ€ง

behavior ้žๆŽจๅฅจ;

marquee ่ฆ็ด ๅ†…ใงใฎใƒ†ใ‚ญใ‚นใƒˆใฎใ‚นใ‚ฏใƒญใƒผใƒซๆ–นๆณ•ใ‚’ scrollใ€slideใ€alternate ใฎๅ†…ใฎไฝ•ใ‚Œใ‹ใฎใ‚ญใƒผใƒฏใƒผใƒ‰ใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚ๆŒ‡ๅฎšใ‚’็œ็•ฅใ—ใŸๅ ดๅˆใฏใ€ๅˆๆœŸๅ€คใฎ scroll ใŒ้ฉ็”จใ•ใ‚Œใพใ™ใ€‚

bgcolor ้žๆŽจๅฅจ;

่ƒŒๆ™ฏ่‰ฒใ‚’ใ€่‰ฒๅใ‚‚ใ—ใใฏ 16 ้€ฒใ‚ซใƒฉใƒผใ‚ณใƒผใƒ‰ใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚

direction ้žๆŽจๅฅจ;

marquee ่ฆ็ด ๅ†…ใงใฎใƒ†ใ‚ญใ‚นใƒˆใฎใ‚นใ‚ฏใƒญใƒผใƒซๆ–นๅ‘ใ‚’ leftใ€rightใ€upใ€down ใฎๅ†…ใฎไฝ•ใ‚Œใ‹ใฎใ‚ญใƒผใƒฏใƒผใƒ‰ใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚ๅˆๆœŸๅ€คใฏ left ใงใ™ใ€‚

height ้žๆŽจๅฅจ;

ใ‚นใ‚ฏใƒญใƒผใƒซ็ฏ„ๅ›ฒใฎ้ซ˜ใ•ใ‚’ใ€ใƒ”ใ‚ฏใ‚ปใƒซๅ€คใ‹ใƒ‘ใƒผใ‚ปใƒณใƒˆๅ€คใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚

hspace ้žๆŽจๅฅจ;

ๆฐดๅนณๆ–นๅ‘ใฎใƒžใƒผใ‚ธใƒณใ‚’ๆŒ‡ๅฎšใ—ใพใ™ใ€‚

loop ้žๆŽจๅฅจ;

ใƒ†ใ‚ญใ‚นใƒˆใฎใ‚นใ‚ฏใƒญใƒผใƒซๅ›žๆ•ฐใ‚’ๆŒ‡ๅฎšใ—ใพใ™ใ€‚ๅˆๆœŸๅ€คใฏ โˆ’1 ใงใ‚ใ‚Šใ€ใ“ใ‚Œใฏใ‚นใ‚ฏใƒญใƒผใƒซๅ›žๆ•ฐใ‚’ๅˆถ้™ใ›ใšใ€ๆ’ไน…็š„ใซใ‚นใ‚ฏใƒญใƒผใƒซใ‚’็ถšใ‘ใ‚‹ๆŒ‡ๅฎšใงใ™ใ€‚

scrollamount ้žๆŽจๅฅจ;

ใ‚คใƒณใ‚ฟใƒผใƒใƒซๅ†…ใงใฎใ€ใƒ†ใ‚ญใ‚นใƒˆใฎ็งปๅ‹•ใƒ”ใ‚ฏใ‚ปใƒซๆ•ฐใ‚’ๆŒ‡ๅฎšใ—ใพใ™ใ€‚ๅˆๆœŸๅ€คใฏ 6 ใงใ™ใ€‚

scrolldelay ้žๆŽจๅฅจ;

ใ‚นใ‚ฏใƒญใƒผใƒซๅ‹•ไฝœใฎใ‚คใƒณใ‚ฟใƒผใƒใƒซใ‚’ใƒŸใƒช็ง’ใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚ๅˆๆœŸๅ€คใฏ 85 ใงใ™ใ€‚truespeed ๅฑžๆ€งใŒๆŒ‡ๅฎšใ•ใ‚Œใฆใ„ใชใ„ๅ ดๅˆใฏ 60 ใŒๆœ€ไธ‹้™ใงใ‚ใ‚Šใ€ใ“ใ‚Œไปฅไธ‹ใฎๅ€คใฏ 60 ใจใ—ใฆ่งฃ้‡ˆใ•ใ‚Œใพใ™ใ€‚

truespeed ้žๆŽจๅฅจ;

ๆ—ขๅฎšใงใฏใ€scrolldelay ใง 60 ใ‚’ไธ‹ๅ›žใ‚‹ๅ€คใฏ็„ก่ฆ–ใ—ใพใ™ใ€‚truespeed ใ‚’ๆŒ‡ๅฎšใ™ใ‚‹ใจใ€ใใ‚Œใ‚‰ใฎๅ€คใŒ็„ก่ฆ–ใ•ใ‚Œใพใ›ใ‚“ใ€‚

vspace ้žๆŽจๅฅจ;

ๅž‚็›ดๆ–นๅ‘ใฎใƒžใƒผใ‚ธใƒณใ‚’ใƒ”ใ‚ฏใ‚ปใƒซๅ€คใ‹ใƒ‘ใƒผใ‚ปใƒณใƒˆๅ€คใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚

width ้žๆŽจๅฅจ;

ใ‚นใ‚ฏใƒญใƒผใƒซ็ฏ„ๅ›ฒใฎๅน…ใ‚’ใƒ”ใ‚ฏใ‚ปใƒซๅ€คใ‹ใƒ‘ใƒผใ‚ปใƒณใƒˆๅ€คใงๆŒ‡ๅฎšใ—ใพใ™ใ€‚

ไพ‹

html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
  direction="down"
  width="250"
  height="200"
  behavior="alternate"
  style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>

็ตๆžœ

ๆŠ€่ก“็š„ๆฆ‚่ฆ

DOM ใ‚คใƒณใ‚ฟใƒผใƒ•ใ‚งใ‚คใ‚น HTMLMarqueeElement

ไป•ๆง˜ๆ›ธ

Specification
HTML
# the-marquee-element-2

ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฎไบ’ๆ›ๆ€ง

้–ข้€ฃๆƒ…ๅ ฑ