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

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

CMS css 新着情報

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

投稿日:

marqueeとは

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

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

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

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

執筆者:

関連記事

二科展

弊社専属デザイナーが第98回二科展で特選を受賞しました

弊社専属デザイナーが第98回二科展で特選を受賞しました。 弊社のデザインにおけるレベルの高さを証明する受賞であると、謹んでご報告申し上げます。

code-prettify

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

google code-prettifyを導入 設定その1の記事内で、コードを記載した。 wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 これを見てみると、preタグで囲んだだけだ …

フェイスブック

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

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

卯

年賀状を年内に出して販促するという手法

毎年、年賀状は締切間際になって慌てて書いている。 どうやら今年も同じことになりそうだ。 なにせamazonでプリンターのインクを注文したのは今日だし ←遅いって…(汗;) 年賀状の「年賀」部分を塗りつ …

Dropboxから乗り換えるべき? トレンドマイクロの容量無制限オンラインストレージ「SafeSync」の実力は?

Amplify’d from trendy.nikkeibp.co.jp SafeSyncの最大の魅力は、年間4980円を支払えば保存容量が無制限という点だ。普段、Dropboxを使いながら「保存容量 …