CSSアニメーションでmarquee - Qiita
「ページのこの部分を流れる文字にしたいです」と言われてしまった <marquee>は使いたくない… ときのための、CSSアニメーションを使ったスタイル指定のサンプルです。 ※「【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。 - ONZE」さんのコードをもとに可変幅にして依存する前提を極力少なくしたものになります。例示用としてベンダープレフィックス(-webkit-等)も外しています。 /** マーキーさせたい部分 */ .marquee { overflow: hidden; /* スクロールバーが出ないように */ position: relative; /* マーキーの内容部分の位置の基準になるように */ } /* マーキーの内容部分の高さ確保 */ .marquee::after { content: ""; white-space: nowrap; di
【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。
HTML5からは非推奨（廃止？）となり、今となっては懐かしい<marquee> タグ。 内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をするスクリプトが一部のスマートフォン対応サイトなどで使われています。 <marquee> タグが使えないとなると、同じ挙動は JavaScript で実現させようと考えるのが普通でしょうが、今日は CSS3 で marquee を実装する方法を紹介します。 HTML の書き方<div class="marquee"> <p>The quick brown fox jumps over the lazy dog.</p> </div> 「marquee」というクラスを与えたボックスでスライドさせたい要素を囲む。これが基本の記述です。 シンプルでいいですよね。 こういった簡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
