CSSのマーキー - 初心者向けガイド
MarqueeはInternet Explorerで最初に導入され、W3Cが使いやすさの問題からHTML標準要素から除外することを最終的に決定する前の90年代に非常に人気がありました。 Webデザイナーはタグを使わないように勧められました.
驚くべきことに、マーキーはタグではなく、カムバックをしています。 それはCSSモジュールの中にあったのと同じようなフォーマットです。このモジュールはWebkit CSS仕様の一部として入手でき、W3Cは現在同様のモジュールに取り組んでいます。ただし、W3Cバージョンはまだ勧告候補段階にあるため、まだ適用できません。ですので、現時点では、Webkit仕様のものだけを取り上げます。.
構文
まず第一に、マーキーは次の速記構文を使って定義することができます。.
-webkit-marquee：[方向] [増分] [繰り返し] [スタイル] [速度]
上記の構文に必要な各値は、一目瞭然ですが、それ以外の場合は、このドキュメントで十分に説明されています。そのため、この構文がどのように機能するのかを詳しく調べたい場合は、常に最初に資料を参照することができます。.
それでは、実際の例をいくつか作成し、実際にどのように機能するかを確認しながら、参加してください。.
例1：テキストをスクロールする
さて、最初の例では、テキストを右から左に移動させるというマーキーの古典的な移動を作成します。.
以下のようにテキストマークアップを作成しましょう。
ロリポップトッピングレモンドロップナツメアップリケフルーツケーキタルト甘草ゴマスナップ.
次に、以下の構文でマーキーを定義します。.
-webkit-marquee：自動中無限スクロール通常。 overflow-x：-webkit-marquee;
マーキー方向がに設定されている場合 自動, デフォルトでは右から左に移動します。あるいは、この値をに変更することができます。 左. また、 オーバーフローx プロパティをに設定する必要があります -ウェブキットマーキー 内容が常に1つのように振舞うように。このプロパティを省略すると、テキストは移動しません。.
デモを見る.
例2：前後にバウンスする
2番目の例では、マーキーに異なるスタイルを付けてみます。今回使用します 代わりの の代わりに スクロール 方向の値を 右. そのようにして、マーキーは左から右へ移動し、そして前後にバウンスします.
-webkit-marquee：autoミディアム無限代替法線。 overflow-x：-webkit-marquee;
デモを見る
例3：テキストを上に移動する
最後の例では、マーキーの方向を上に移動するように変更します。二つあります 方向 そうするための値。値をに変更することができます アップ または 先に.
個人的には、Webkitが本質的に同じことをする2つの値を提供した理由がわかりません。.
-webkit-marquee：普通の無限スクロール標準をアップ。 overflow-x：-webkit-marquee;
デモを見る
さらに、私はいくつかのより多くの例をまとめました、しかし、それらがすべてここで説明されるならば、それらは圧倒的です。.
しかし、あなたはすべてのデモを見て、下のリンクからソースをダウンロードすることができます.
- デモ
- ソースをダウンロード
最終的な考えと参考文献
私は最初に驚いたのですが、マーキーにはまだ興味が残っています。これはまた私にこのようなCSSモジュールがどのように有用になるだろうかという疑問を投げかけました。実際には、すべてのブラウザはまだの遺産をサポートしています タグ.
それで、あなたはどう思いますか？マーキーはまだこの時代に関連性があり、それは現代のウェブデザインに役立つでしょう?
あなたがまだこのマーキーのものに興味があるなら、あなたは以下の参考文献のいくつかを訪れることができます：
- Safari CSSリファレンス
- Webkitマーキージェネレータ
- 昔の包括的なドキュメンテーション
Sitepointからのタグ. - そしてこのMarquee Generatorを含むほとんどすべてのもののためのジェネレータが常にあります.
