マーキーの動きのスタイルを指定するには?
要素書式
対応ブラウザ
値一覧
値 | 内容 |
スタイル | マーキーの動きのスタイルを指定します。 指定できる値は次の通りです。 「scroll」:開始側から終了側まで、コンテンツの内容を完全にスクロールします。 「slide」:開始側から終了側まで、コンテンツが表示し終わるまでスクロールします。 「alternate」:開始側から終了側まで、コンテンツが表示し終わるまでスクロールした後、逆向きに表示し終わるまでスクロールします。 なお、「marquee-style」プロパティの初期値は「scroll」となります。 |
解説文
コンテンツが表示領域に入りきらない場合の1つの解決策として、コンテンツをスクロールさせて全体を表示する、マーキーという方法があります。
marquee-styleプロパティは、マーキーの動きのスタイルを指定することができます。
現在、ChromeとSafariはこのプロパティを実装しています。(ただし、プロパティの値の「alternate」には対応していません。)
ただし、プロパティの値が「slide」のとき、ChromeとSafariの動きは仕様と異なっており、コンテンツの表示が終了側に到達した時点でスクロールが終了します。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
#sc{
width:600px;
height:200px;
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-style: scroll;
marquee-style: scroll;
}
#sl{
width:600px;
height:200px;
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-style: slide;
marquee-style: slide;
}
#al{
width:600px;
height:200px;
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-style: alternate;
marquee-style: alternate;
}
</style>
</head>
<body>
<div id="sc">
<p>となりには2匹の猫がいます。1匹は<b>白い耳</b>をもつ黒猫で、もう1匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</div>
<div id="sl">
<p>となりには2匹の猫がいます。1匹は<b>白い耳</b>をもつ黒猫で、もう1匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</div>
<div id="al">
<p>となりには2匹の猫がいます。1匹は<b>白い耳</b>をもつ黒猫で、もう1匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</div>
</body>
</html>
関連項目