マーキーの動きの方向を指定するには?
要素書式
対応ブラウザ
値一覧
| 値 | 内容 |
| 方向 | マーキーの動きの方向を指定します。
指定できる値は次の通りです。
「forward」：閲覧順に指定します。
「reverse」：閲覧順と逆の方向に指定します。
なお、「marquee-direction」プロパティの初期値は「forward」となります。 |
解説文
コンテンツが表示領域に入りきらない場合の１つの解決策として、コンテンツをスクロールさせて全体を表示する、マーキーという方法があります。
marquee-directionプロパティは、マーキーの最初の動きの方向を指定することができます。
実際ではマーキーの動きは要素の「direction」プロパティと「overflow-style」プロパティの値に影響されます。
- direction
テキストの記述の向きを表します。英語や日本語などテキストの閲覧順は左から右（directionのデフォルト値はltr）に対して、アラビア語などテキストの閲覧順は右から左(directionのデフォルト値はrtl)となります。
- overflow-style
マーキーの向きが水平（marquee-line）か垂直（marquee-block）かを表します。
現在ChromeとSafariは対応していますが、独自のキーワードを使っています。
- forward
マーキーの向きが水平（marquee-line）の場合は「forwards」（左から右）で対応します。
マーキーの向きが垂直（marquee-block）の場合は、「down」（上から下）で対応します。
- reverse
マーキーの向きが水平（marquee-line）の場合は「backwards」（右から左）で対応します。
マーキーの向きが垂直（marquee-block）の場合は、「up」（下から上）で対応します。
サンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
<style>
p{
width:600px;
overflow: -webkit-marquee;
overflow: marquee;
overflow-style: marquee-block;
-webkit-marquee-direction: down; <!--「down」はChromeとSafari独自のキーワード-->
marquee-direction: down; <!--「down」はChromeとSafari独自のキーワード-->
}
</style>
</head>
<body>
<p>となりには２匹の猫がいます。１匹は<b>白い耳</b>をもつ黒猫で、もう１匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</body>
</html>
サンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<style>
p{
width:600px;
overflow: -webkit-marquee;
overflow: marquee;
overflow-style: marquee-line;
-webkit-marquee-direction: forwards; <!--「forwards」はChromeとSafari独自のキーワード-->
marquee-direction: forwards; <!--「forwards」はChromeとSafari独自のキーワード-->
}
</style>
</head>
<body>
<p>となりには２匹の猫がいます。１匹は<b>白い耳</b>をもつ黒猫で、もう１匹は<b>黒い尻尾</b>をもつ白猫です。・・・</p>
</body>
</html>
関連項目
