マーキーの動きのスピードを指定するには?
要素書式
対応ブラウザ
値一覧
値 | 内容 |
スピード | マーキーの動きの速さを指定します。 指定できる値は次の通りです。 「slow」:スピードを遅めに指定します。 「normal」:スピードを普通に指定します。 「fast」:スピードを早めに指定します。 なお、「marquee-speed」プロパティの初期値は「normal」となります。 |
解説文
コンテンツが表示領域に入りきらない場合の1つの解決策として、コンテンツをスクロールさせて全体を表示する、マーキーという方法があります。
marquee-speedプロパティは、コンテンツがどれぐらいのスピードでスクロールされるかを指定します。
実際はマーキーの動きの速さは、ブラウザの種類やコンテンツの内容にも影響されます。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
#s{
width:600px;
height:200px;
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-speed: slow;
marquee-speed: slow;
}
#n{
width:600px;
height:200px;
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-speed: normal;
marquee-speed: normal;
}
#f{
width:600px;
height:200px;
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-speed: fast;
marquee-speed: fast;
}
</style>
</head>
<body>
<div id="s">
<p>となりには2匹の猫がいます。1匹は<b>白い耳</b>をもつ黒猫で、もう1匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</div>
<div id="n">
<p>となりには2匹の猫がいます。1匹は<b>白い耳</b>をもつ黒猫で、もう1匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</div>
<div id="f">
<p>となりには2匹の猫がいます。1匹は<b>白い耳</b>をもつ黒猫で、もう1匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</div>
</body>
</html>
関連項目