このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

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

記事Sep.1st, 2021
2000年代の個人ウェブサイトでよく見かけられた文字や画像を横に流れるように表示する“marquee”要素について。CSSによって“marquee”要素を再現するコードを紹介。

HTMLの“marquee”要素

marquee”要素とは?

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

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

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

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

marquee”要素のコード

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

属性
属性 説明 説明
behavior="" スクロールの動き scroll 一方の端から出てきて反対の端へ消える
slide 一方の端から出てきて反対の端で停止
alternate 一方の端からもう一方の端までを往復
bgcolor="" スクロール領域の背景色 スクロール領域の背景色
direction="" スクロールの方向 left 右から左へ流れる
right 左から右へ流れる
up 下から上へ流れる
down 上から下へ流れる
height="" スクロール領域の高さ 正の整数 高さのピクセル数
正の整数% 高さの表示領域に対する割合
hspace="" スクロール領域の左右の余白 正の整数 スクロール領域の左右の余白のピクセル数
loop="" スクロールを繰り返す回数 正の整数 スクロールを繰り返す回数
-1 スクロールを無限に繰り返す
scrollamount="" スクロールする距離 正の整数 スクロール動作のコマとコマの間にスクロールする距離のピクセル数
scrolldelay="" スクロールの所要時間 正の整数 スクロール動作の1コマを表示する時間のミリ秒
truespeed="" scrolldelay”属性で“60”以下の値を有効にする truespeed scrolldelay”属性で“60”以下の値を有効にする
vspace="" スクロール領域の上下の余白 正の整数 スクロール領域の上下の余白のピクセル数
width="" スクロール領域の横幅 正の整数 横幅のピクセル数
正の整数% 横幅の表示領域に対する割合

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

<marquee behavior="scroll" direction="left" scrolldelay="85" scrollamount="6" loop="-1">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</marquee>

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

もともとの“marquee”要素はカクカクとしたコマ送りのようにのように流れましたが、現代のブラウザではなめらかに流れるように表示されます。

marquee”要素に代わるCSS

CSSで再現する“marquee”要素

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

なお、速い速度で流れるテキストは読みづらく、長いテキストは一度読み逃すと次にまた流れてくるまで待たなければならなくなります。不必要な動きはユーザーによっては煩わしく感じられてしまうことがあるため、コンテンツを大きく動かすことは推奨されていませんが、もし“marquee”要素を代替する必要があるのであればCSSのアニメーション機能を使用します。

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

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

コードの記述はやや煩雑にはなりますが、見た目は“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%);}
}
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク