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

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

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

執筆者:

関連記事

ホーム画面に入れておきたいiPhoneアプリ

2011年にホーム画面入りした新しいiOSアプリ5選

あっという間に大晦日。 最近特に月日の経つのが早くなってしまい、焦り気味である。 一年を振り返ってみると、俺のiPhoneのホーム画面に入れているアプリも大きく様変わりしている。 今年最後のブログ更新 …

二科展

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

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

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

WorldCard Mobile

WorldCard Mobileを入れた

名刺管理ソフトWorldCard Mobile 前々から気になっていたiPhoneアプリ「WorldCard Mobile」を導入してみた。 無料バージョンで試してみると、実に認識力が高い。 価格は1 …

コンテンツ

説明文の加筆 ⇒ トップページの作り込み6

コンテンツを増やす コンテンツを加える。 600px幅で表示。 <div id=”amiens-05″ class=”amiens-black”> <div class=”amien …