CSS 3のマーキーでスクロールの動きをコントロールする

エ・ビスコム・テック・ラボ
2008-08-25 17:27:02
  • このエントリーをはてなブックマークに追加

 今回は、CSS 3で提案されているマーキー関連のプロパティを利用して、スクロールの動きをコントロールしてみたい。CSS 3ではスクロールのスタイル、方向、スピード、繰り返しの回数を指定できるようになっている。

 なお、CSS 3のマーキーにはSafariOperaがそれぞれ独自のかたちで対応しているが、FirefoxInternet Explorer(バージョン8ベータ版も含む)は対応していない。

SafariとOperaの両方で文字をスクロールする

 まずは、基本となるマーキーの設定を確認しておこう。前回はSafariとOperaのそれぞれのブラウザが対応したマーキーの設定方法を紹介した。

 しかし、次のように記述すれば1つの設定で両方のブラウザに対応することができる。

 ポイントとなるのは「overflow: -webkit-marquee」を「overflow: hidden」の後に記述することだ。これにより、Safariでは「overflow: -webkit-marquee」の設定が、Operaでは「overflow: hidden」の設定が有効になり、両方のブラウザで文字がスクロールする。

SafariおよびOperaでの表示 SafariおよびOperaでの表示
div{
overflow: hidden;
overflow: -webkit-marquee;
display: -wap-marquee;
-wap-marquee-loop: infinite;
white-space: nowrap; 
width: 200px;
border: solid 1px gray;
}
こんにちは
ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]