「marqueeタグってどうやって使うの」や「テキストや画像を簡単にスクロールさせたい」と悩んでいませんか？
ここでは、marqueeタグの基本的な使い方を、分かりやすく解説します。
marqueeタグは、テキストや画像を簡単にスクロールさせるタグです。
ここでは、marqueeタグの基本的な使い方やカスタマイズ方法をお伝えするので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- marqueeタグの使い方
- marqueeタグの主な属性
- marqueeタグの歴史
- 【まとめ】marqueeタグとは
|
marqueeタグの使い方
まずは、marqueeタグの使い方から、お伝えします。
marqueeタグとは
marqueeタグは、テキストや画像をスクロールさせるタグです。
marqueeタグで囲んだテキストや画像を、スクロールさせることができます。
marqueeタグの使い方
marqueeタグは、スクロールさせたいテキストや画像を、marqueeタグで囲む形で使います。
■ <marquee> タグの記述例
<marquee>これはスクロールするテキストです。 </marquee>
<marquee direction="right"><img src="image.jpg" alt="画像"> </marquee>
|
■ ホームページ上の表示
|
marqueeタグの主な属性
marqueeタグには、スクロールの方向や速度を制御するための属性があります。
ここでは、marqueeタグの主な属性をご紹介します。
direction 属性
スクロールの方向を指定します。`left`（左）、`right`（右）、`up`（上）、`down`（下）があります。
|
<marquee direction="left">左にスクロールするテキスト</marquee>
|
behavior 属性
スクロールの動きを指定します。`scroll`（通常のスクロール）、`slide`（一度だけスクロール）、`alternate`（往復する）が選べます。
|
<marquee behavior="alternate">往復するテキスト</marquee>
|
scrollamount 属性
スクロールの速度を指定します。数値が大きいほど速くなります。
|
<marquee scrollamount="5">速くスクロールするテキスト</marquee>
|
scrolldelay 属性
スクロールの間隔を指定します。数値が小さいほど速くなります。
|
<marquee scrolldelay="100">間隔を置いてスクロールするテキスト</marquee>
|
loop 属性
スクロールの回数を指定します。`-1`を指定すると無限にスクロールします。
|
<marquee loop="-1">無限にスクロールするテキスト</marquee>
|
marqueeタグの歴史
ここでは、marqueeタグの歴史について、お伝えします。
marqueeタグが非推奨の理由
marqueeタグは1990年代に登場して、昔はたくさんのホームぺージで使われていました。
しかし、SEOやアクセシビリティに対する悪影響が指摘されて、現在ではほとんどのブラウザで「非推奨」となっています。
たとえば、marqueeタグには、次のような問題点があります。
■ SEOへの影響
検索エンジンはmarqueeタグ内のテキストを適切に評価できず、SEO対策として不利になります。
■ アクセシビリティの問題
スクリーンリーダーなどの支援技術がmarqueeタグを適切に処理できないため、視覚障害者にとって使いにくいものとなります。
このような理由から、marqueeタグは現在はあまり使われていないのが現状です。
marqueeタグの代替方法
marqueeタグの代替方法として、次のような方法があります。
・ページが開いたときに、画像やテキストが動いて表示される方法
・画像やテキストが「弾むように動くアニメーション」を表示する方法
【まとめ】marqueeタグとは
marqueeタグとは？使い方から代替方法まで徹底解説！の内容は、いかがでしたでしょうか？
marqueeタグは、テキストや画像をスクロールさせるタグです。
marqueeタグで囲んだテキストや画像を、スクロールさせることができます。
ただ、marqueeタグは簡単に使うことができますけど、現在は、ほとんどのブラウザで非推奨になっています。
そもそも、テキストや画像がスクロールするのは、何か幼稚な印象を与えてしまうことがあるため、できればあまり使わないほうが良いかもしれません。
「このようなタグもある」という参考程度として、知っておいていただけたらと思います。
