いにしえのHTMLタグ、“marquee”とは？CSSによる再現

“marquee”要素とは？

“marquee”要素は文字や画像などのコンテンツを電光掲示板のように横に流れるようにして表示するためのHTMLの要素です。

1990年代のブラウザ戦争では熾烈なシェア争いを繰り広げるInternet ExplorerとNetscape Navigatorがこぞって独自機能を追加していましたが、“marquee”要素はそのさなかの1995年に公開されたInternet Explorer 2で実装されたブラウザの独自拡張要素です。

2000年代初期までの個人ウェブサイトや携帯電話用のウェブサイトではよく見かけられた“marquee”要素によって横に流れるコンテンツですが、文書の意味的な構造を記述するHTMLの本来の目的からは逸脱していることもあり、HTMLの標準では過去のものも含めて一度も正式に定義されていたことはありません。ただし、“HTML5”の仕様書や現在のHTMLの標準である“HTML Living Standard”の仕様書では後方互換性のために“廃止された機能”の項にブラウザ実装についての記載があります。

“marquee”要素のコード

“marquee”要素にはスクロールする方向や速度、背景色や表示領域の大きさを指定する以下の属性があります。

何も属性で指定していない場合の初期値は以下の記述と同じです。

HTMLの標準仕様で定義された要素ではないので“ブロック要素”や“インライン要素”といった分類はありませんが、通常はブロック・レベルの要素として扱われます。

当時のブラウザでは“marquee”要素の内容はコマ送りのようにカクカクとした動きで流れましたが、現代のブラウザではなめらかに流れます。

CSSで再現する“marquee”要素

“HTML5”以降、HTML文書を装飾するための機能は完全にCSSが担うことになりましたが、直接“marquee”要素を代替する機能はありません。

しかし、CSSのアニメーション機能を使用することで“marquee”要素を代替することが可能です。

次項以降では“marquee”要素を再現するCSSをその表示例とともに記載しています。これらのCSSは以下のHTMLのコードに適用されています。

コードの記述はやや煩雑にはなりますが、見た目は“marquee”要素と遜色ないうえ、CSSのアニメーションを使用するとイージング(“animation-timing-function”)によって速度に緩急をつけたり、スクリプトを使用せずにマウスホバーで一時停止させる(“animation-play-state”)といったことも可能になります。

横スクロール

.marquee {

background-color: #cee4ae; /* 背景色 */
width: 300px; /* 横幅 */
overflow: hidden;

}

.marquee > span {

display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 7s; /* 1周するのにかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */

}

@keyframes MarqueeScroll {

from { transform: translateX(0);}
to { transform: translateX(-100%);}

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

.marquee {

background-color: #cee4ae; /* 背景色 */
width: 300px; /* 横幅 */
overflow: hidden;

}

.marquee > span {

display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 7s; /* 1周するのにかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */

}

@keyframes MarqueeScroll {

from { transform: translateX(-100%);}
to { transform: translateX(0);}

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

スライド・イン

.marquee {

background-color: #cee4ae; /* 背景色 */
width: 300px; /* 横幅 */
overflow: hidden;

}

.marquee > span {

display: inline-block;
white-space: nowrap;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 3s; /* 所要時間 */
animation-iteration-count: 1; /* 繰り返す回数 */
animation-fill-mode: forwards; /* アニメーション終了時の状態を維持する */

}

@keyframes MarqueeScroll {

from { padding-left: 100%;}
to { padding-left: 0;}

}


/* ホバーでアニメーションを無効化 */
.marquee:hover > span {

animation: none;

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

＊マウスをホバーするとアニメーションをリセットできます。

.marquee {

background-color: #cee4ae; /* 背景色 */
width: 300px; /* 横幅 */
overflow: hidden;

}

.marquee > span {

display: inline-block;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 3s; /* 所要時間 */
animation-iteration-count: 1; /* 繰り返す回数 */
animation-fill-mode: forwards; /* アニメーション終了時の状態を維持する */

}

@keyframes MarqueeScroll {

from { transform: translateY(-100%);}
to { transform: translateY(0);}

}


/* ホバーでアニメーションを無効化 */
.marquee:hover > span {

animation: none;

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

＊マウスをホバーするとアニメーションをリセットできます。

往復スクロール

.marquee {

background-color: #cee4ae; /* 背景色 */
--marquee-width: 300px; /* 横幅 (“％”では指定できません) */
width: var(--marquee-width);
overflow: hidden;

}

.marquee > span {

display: inline-block;
white-space: nowrap;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 7s; /* 片道にかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */
animation-direction: alternate; /* アニメーションを往復させる */

}

@keyframes MarqueeScroll {

from { transform: translateX(0);}
to { transform: translateX(calc(var(--marquee-width) - 100%));}

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

.marquee {

background-color: #cee4ae; /* 背景色 */
width: 300px; /* 横幅 */
--marquee-height: 150px; /* 高さ (“％”では指定できません) */
height: var(--marquee-height);
overflow: hidden;

}

.marquee > span {

display: inline-block;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 2s; /* 片道にかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */
animation-direction: alternate; /* アニメーションを往復させる */

}

@keyframes MarqueeScroll {

from { transform: translateY(0);}
to { transform: translateY(calc(var(--marquee-height) - 100%));}

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

縦スクロール

横書き縦スクロール

.marquee {

background-color: #cee4ae; /* 背景色 */
width: 300px; /* 横幅 */

}

.marquee > span {

display: inline-block;
white-space: nowrap;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 7s; /* 1周するのにかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */

}

@keyframes MarqueeScroll {

from { transform: translateY(100%);}
to { transform: translateY(-100%);}

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

縦書き縦スクロール

.marquee {

background-color: #cee4ae; /* 背景色 */
height: 200px; /* 高さ */
overflow: hidden;
writing-mode: vertical-rl; /* 縦書き */

}

.marquee > span {

display: inline-block;
white-space: nowrap;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 7s; /* 1周するのにかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */

}

@keyframes MarqueeScroll {

from { transform: translateY(0);}
to { transform: translateY(-100%);}

}

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。