アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css 新着情報

marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8

投稿日:

marqueeとは

marquee(マーキー)はインターネット黎明期にはやったテクニックだ。

電光掲示板のように文字が流れていくテクニックを指す。

ニコニコ動画を想像すれば、分かるだろう。

<MARQUEE data-recalc-dims=-HTMLタグリファレンス”><MARQUEE>はInternet Explorerが独自に追加したタグで、文字を左右・上下にスクロールさせます。Internet Explorer4.0以降では画像もスクロールさせられるようになりました。

デフォルトでは右から左へスクロールする動作を繰り返しますが、 各属性によりスクロールの範囲・動作の仕方・回数・速度等を指定できます。

Netscape Navigatorではそのまま左寄せで表示され、何も起こりません。Netscape Navigatorで同じことをするには、JavaScriptを使用してください。

MARQUEE-HTMLタグリファレンスから引用

Netscape Navigatorが出てくるところなど、時代を感じる。

あまりにも多用されたため「ダサイ」テクニックと評価され、「愛生会病院」がネタになったりして、このテクニックを使ったサイトはほぼ絶滅した。

今回、あえてこのテクニックを使ってみた。

まあ、ネタだ(笑)

marqeeタグを使わない

といいつつ、今回は、cssで実装した。

と言うのも、marqeeタグは非推奨になっている。

marquee: マーキー要素 (廃止) - HTML: HyperText Markup Language | MDN廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

marquee: マーキー要素 (廃止) – HTML: HyperText Markup Language | MDNから引用

HTMLには修飾要素を含めないのだから、当然だ。

まずはHTMLは下記の通り。

<div id="amiens-12" class="amiens-font-noto">
<div>
        <span>きれいだけれど売れないホームページを、売れるホームページに変えます。</span><span>売るための施策をやり続けるお手伝いをします。</span><span>お客様に感動を与える仕組み作りをします。</span></div>
</div>

動かす文字部分をspanでインライン要素のまま分割しているのがミソだ。

cssはこうした。

#amiens-12{
min-height: 100%;
min-height: 100vh;
overflow: hidden;
background: url(https://amiens.jp/wp-content/uploads/2019/05/nayami-1x.jpg) center center;
background-size: cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
}
#amiens-12 div {
margin:0;
padding: 60vh 0 0 100vh;
font-size: 2rem;
color: #222;
white-space:nowrap;
display: inline-block;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@keyframes marquee {
from   { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
#amiens-12 span {
margin-left: 8em;
padding: 1em;
background-color: rgba(256, 256, 256, 0.4);
font-family: 'Noto Serif JP', serif !important;
}

背景画像を敷いたりして長くなっているが、やっていることはanimationで動きを制御しているくらい。

割とシンプルに書ける。

分割したテキストごとに、半透明背景の上に文字が載った状態で流れていく。

marqueeで実現するよりは、見た目がちょっとましだろう。

-CMS, css, 新着情報
-, ,

執筆者:

関連記事

ツイッター鯨

twitterは死んだのか?

ツイッター大丈夫? 友人と話をしている際に、「最近ツイッターが元気が無いのではないか?」という意見が出た。 どうやら、最近はフォロワー数の伸びに以前のような勢いが感じられないらしい。 また別の友人の意 …

怪しいものではありません。簡単にauケータイでテザリングができる「NEX-fi」

Amplify’d from www.gizmodo.jp なんと、auケータイでテザリングができる周辺機器「NEX-fi」が発売されました。モバイルデータ通信定額対応機種に、このNEX-fiを接続す …

before

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

カテゴリーが長すぎる サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。 そこで、第一階層をリストにして第二階層はボタンにして並べることにした。 まず、第二階層をボタン化 .ca …

ワードプレス

オフィシャルサイトにwordpressを導入した

今まで自社ホームページはドリームウィーバーで制作してきたのだが、積極的に露出を図りたいと一念発起し、wordpressに移植することにした。

H2タグ

H2タグを修飾 ⇒ STINGER8設定その9

H2タグの設定 サイドバーのデザイン設定はひとまず終えたので、コンテンツエリアの設定を始める。 まず気になっていたのが、H2のバランスが悪いことだ。 STINGER8のデフォルトでは、上下にsolid …