流れる文字を省スペースで表示する方法は今でも<MARQUEE>が一番簡単なのか・・・

公開日:  最終更新日:2018/03/17

流れる文字を省スペースで表示する方法は今でも<MARQUEE>が一番簡単なのか・・・
ショップページで色々レイアウトしているとスペースが無くなってしまい、お知らせなどを表示したいけど場所がないってことが出てくるかと思います。そんな時に省スペースで文字等を横に流れるように動かして表示する方法はよく見かけますよね。文字が動いていると思わず目がいって注目してしまいます。

省スペースにお知らせなどを表示する方法として


を以前紹介しました。

本日は、流れる文字について実装する方法をいくつか紹介したいと思います。重要なお知らせや目立たせたい情報などリンク付きで動かす際に活用できる内容ですのでぜひ、使ってみてください。

スポンサードリンク

流れる文字を省スペースで表示する方法

楽天のショップオブイヤー2013年が少し前に発表されましたが、入賞したショップの中にも流れる文字で案内を表示したり画像を動かしているショップもたくさんあります。

128-1.png
楽天ショップオブザイヤー2013のジュエリー・アクセサリーのジャンル大賞
いいものあるよ。アクアジュエリー

ヘッダーメニュー下の発送目安の部分で文字を流して表示してます。ページを表示した際に動いている部分がこの部分だけなので思わず目は行きますよね。


128-3.png
楽天ショップオブザイヤー2013の米のジャンル大賞
ハーベストシーズン

こちらもヘッダー上に期間限定の案内などの情報を文字を流して表示しています。思わず内容読んでしまいますね。

文字を流す一番簡単な方法<MARQUEE>マーキータグ

文字を流す方法としては、javascript(jquery)、CSSなど色々な方法が考えられますが、一番簡単な方法としては<MARQUEE>マーキータグではないでしょうか。一昔前に、流行した方法でこれを多用した何とも恐ろしいページをよく見かけたのも記憶に新しいところです。

サンプルソース <MARQUEE>を使用 sample1.html

流す文字

スクロール方向、移動速度など指定出来るオプションも実は、色々とあります。
詳しくは、<MARQUEE>-HTMLタグリファレンスを参照ください。

【動作サンプル】

<MARQUEE>で画像を流すことも可能

128-2.png
楽天ショップオブザイヤー2013のおもちゃ・ホビーのジャンル受賞
フェスティバルプラザ

さきほどの例では、文字を流していましたが、同様の方法で画像を流すことも可能です。
<MARQUEE> ~ </MARQUEE>の中にリンク付きの画像を記述してやればOKです。

ただHTML5では、<MARQUEE>タグは廃止される予定なので今後は使用を控えた方が良いかと思います。

現在のところIE、Chorome、FireFox等のシェアの多いブラウザでは動作はしていますが、対応していないブラウザ、今後の各ブラウザのバージョンアップによっては動作しなくなる可能性もあります。

非常に簡単に実装出来るので、まだまだ使われているのだと思います。scriptやcssを使う方法が一番良いのでしょうが、少しハードルがあがりますよね。

CSSで文字を流す方法

CSSのみでmarqueeを実装する方法もあります。

<style type="text/css">
.CSSMarquee {
max-width: 600px;
padding: 1em 0;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: left;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color:#000;
font-weight: bold;
}
.CSSMarquee p:after {
content: "";
white-space: nowrap;
}
.CSSMarquee p {
margin: 0;
padding-left: 100%;
display: inline-block;
white-space: nowrap;
-webkit-animation-name:marqueeRL;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marqueeRL;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marqueeRL;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marqueeRL;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marqueeRL;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@-webkit-keyframes marqueeRL {
from {-webkit-transform:translate(0);} to {-webkit-transform:translate(-100%);}
}
@-moz-keyframes marqueeRL {
from {-moz-transform:translate(0);} to {-moz-transform:translate(-100%);}
}
@-ms-keyframes marqueeRL {
from {-ms-transform:translate(0);} to {-ms-transform:translate(-100%);}
}
@-o-keyframes marqueeRL {
from {-o-transform:translate(0);} to {-o-transform:translate(-100%);}
}
@keyframes marqueeRL {
from {transform:translate(0);} to {transform:translate(-100%);}
}
</style>
<div class="CSSMarquee"><p>CSSのみでを使ってmarquee(マーキー)を実装しています。</p></div>

文字の移動速度を変更するには、animation-duration:10s 記述の10s部分を変更します。ブラウザごとの記述があるため、何箇所か変更する必要があります。5sにすると速くなります。15sにすると遅くなります。CSSさえ1度記述しておけば、すぐに実装できるので簡単といえば簡単ですかね。

【動作サンプル】

javascriptを使って文字を流す方法

次にjavascriptを使って同様に文字を流す方法を紹介したいと思います。

サンプルソース sample2.html

<head>

</head>
<body onload="msg_scroll();">

コピペする場合は、<>が全角になっている部分があるので注意してください。

<head>内にjavascriptを定義しています。
speedの値を変更すれば、流れる速度が変わります。
<body>のonload時に定義したjavascriptを呼び出しています。
この方法はinput部品のテキストボックスの値を随時入れ替えて文字が流れているように見せる方法になります。

【動作サンプル】

jqueryを使って文字を流す方法

まずは、プラグインをダウンロードしてください。
The Silky Smooth Marquee
上記サイトからダウンロードすることが出来ます。
ファイル名をjquery.marquee.jsとして保存します。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

サンプルソース sample2.html

<script src="jquery.min.js"></script>
<script src="jquery.marquee.js"></script>
<script>
$(function () {
$('p.ticker').marquee();
});
</script>  

jqueryのプラグインを使って流れる文字

1、2行目で必要なファイルを読み込んでいます。
(サンプルは同一フォルダ内にファイルを配置の状態)

3~7行目で処理を実行しています。p.tickerの部分が指定するタグ.クラス名ということになります。
比較的、実装もシンプルな感じで出来そうですね。

【動作サンプル】

結局<MARQUEE>タグって簡単だよね・・・

何種類か文字を流す方法を見てきましたが、<MARQUEE>ってあまり知識のない人でも簡単に動きを実装出来るってところが今でも使われている理由なんでしょうね。別ファイルも不要だし、タグ書くだけで動きを付けれるのは大きいなと思います。

上でも書きましたが、HTML5では、<MARQUEE>タグは廃止される予定なので今後は使用を控えた方が良いのは確かですが、こうも簡単に動きを実装出来るなら、それを理解した上で部分的に使うのもありかなと感じます。

【同様にテキストでのお知らせに使えそうな仕組み】




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑