CSS3 Pre-Reference



marquee-direction

マーキーの方向

試す



コード

#inner, #inner2 {
    direction: ltr;

    overflow: -webkit-marquee;

    marquee-play-count: infinite;
    -webkit-marquee-repetition: infinite;
}
#inner {
    overflow-style: marquee-line;
    marquee-direction: forward;

    -webkit-marquee-direction: forwards;
}
#inner2 {
    overflow-style: marquee-block;
    marquee-direction: forward;

    -webkit-marquee-direction: down;
}

サンプル

※サポートしていないブラウザでは動作しません。

この要素が横にマーキーします。

この要素が縦にマーキーします。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
3.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

forward | reverse
初期値 forward
適用 overflowと同じ要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Marquee Module Level 3#8. The ‘marquee-direction’ property

解説

マーキーの方向を指定します。

forwardは順方向、reverseは逆方向です。

このプロパティは、”direction”プロパティの値に影響を受けます。つまり、英語や日本語などの左から右への言語の場合、”direction:ltr”がデフォルト値で左から右(→方向)が順方向となります。逆に、アラビア語などの右から左への言語の場合、”direction:rtl”がデフォルト値で右から左(←方向)が順方向となります。

CSS3になって、ずっと独自拡張だった<marquee>の代替案としてCSSのスタイルが導入されました。

WebKit系(Chrome、Safariほか)は対応はしていて同じプロパティ名ですが、”marquee-style”と兼任したプロパティになっています。キーワードも異なります。

トラックバック

投稿されたコメント