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

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

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, 新着情報
-, ,

執筆者:

関連記事

foursquare

foursquareのiPhoneアプリからfacebookにポストできなくなったよ

位置情報サービスとして多くの利用者が使っているfoursquareだが、1ヶ月前くらいからfacebookにポストできなくなった。 いろいろ試してみると、どうやら認証方式が変わったのに自動対応していな …

フェイスブック

Facebookページのiframe化にチャレンジ

Facebookでビジネスをするのに欠かせない独自タブを作るには、従来はstaticFBMLを使ってきた。 これはこれで簡便で使いやすかったのだが、3/10で使用できなくなる。 これからはstatic …

フェイスブック

facebookのファンページを作りました

先日、宮松さんとお会いしたときに「facebookのファンページをすぐ作るべきだ」とご指摘いただき、さっそく作成した。 と言いつつファンページは以前から作ってはいたのだが、FBMLとか面倒くさそうで放 …

アイキャッチ画像を追加する

アイキャッチ画像を表示させる ⇒ STINGER8設定その6

アイキャッチ画像が表示されない STINGER8では投稿ページにアイキャッチ画像が表示されない。 ちょっと寂しいので、アイキャッチ画像が表示されるようにしてみよう。 single.phpを変える 投稿 …

fontawsome

ピクトグラムでアイキャッチfontawsomeで簡単設定 ⇒ トップページの作り込み3

ピクトグラムとは 東京オリンピックの話題でも取り上げられていたが、近年はピクトグラムの重要性は増すばかりだ。 ピクトグラム(英語: pictogram)あるいはピクトグラフ(英語: pictograp …