marqueeタグからの脱却【marquee要素をCSS3に直す】

vanillaice (Akira)

vanillaice (Akira)

既に懐かしい響きの marquee というhtml要素について。

テキストが横へ流れます。このmarqueeはCSSアニメーションで動かしています emojicid_7517C42E242B1343B260D7E338FF32E0-09decoMailer.gif

上記のようにテキストや画像が流れていく。これが marquee (マーキー) です。

現在はhtml5が正式勧告を受けて既に数年経過していますが、html5の基本理念の一つは
htmlで装飾をするな
ですね。

装飾はhtmlではなくCSSで行う

装飾というのは「テキストを左寄せ以外に変更する」「テキストに色をつけたりサイズを指定する」「何かを動かす」などは全て装飾にあたります。
もちろん テキストを動かすことも装飾です

marquee というのは htmlタグ であり、開始タグ <marquee> と終了タグ </marquee> で囲われたものは html要素 ということになります。つまり 「marquee要素」ですね。
htmlを利用して動かしているのですからhtml5の理念と相入れません。
よって 廃止されています

marquee: マーキー要素(廃止) - HTML | MDN

HTML の marquee 要素はテキストがスクロールする領域を挿入します。要素の属性を使用して、テキストがコンテンツ領域の端に達したときにどうするかを制御できます。

上記は比較的 廃止要素に厳しい Mozillaの開発者向けページです。
Mozillaといえばみなさんご存知の Firefox のリリースベンダーです。
各ベンダーは「後方互換の原則」というのがありますから、廃止要素などもいきなり使えなくするのではなく一定期間の猶予を設けます。
また、フォントに関連する内容などは実質ほぼ恒久的にサポートせざるを得ない内容もあります。
ただしMozillaは廃止要素を積極的にその名の通り「廃する」ことに積極的なベンダーと言えると思います。
簡単に言うと
いつまでも使えると思うな。
ということですね。ずっと使えるものならば廃止した意味がないわけで。

何故変えなければいけないのか

html5理念は別に意地悪なわけではなく、htmlというのは見た目のことよりも 定義 に厳格であるべきだ、という考え方です。
例えばそのマークアップが「ナビゲーション」であるのか「見出し」であるのか。
その意味付けを行うのがマークアップ(html)の役割であって、ナビ内のリンク間に10pxの空白があるね、だとか見出しの背景がブルーで下線もついててかっこ良いね、とかそんなことはどうでも良いわけ。
そのどうでも良いこと(装飾)は CSSでやってくれよ ということなんですね。

クローラー(検索ロボット)などはページの見た目を頼りにしません。頼りにしているのはマークアップです。
ですからGoogle的にもhtmlでの装飾は邪魔でありリソースの無駄遣いでしかありません。
「Googleがhtml5を推奨している」それはもう当たり前に考えて当たり前の話し (´・ω・`)
「レスポンシブを推奨」にしても同じです。それがGoogleにとってリソースの消費を最も抑えられ、効率的なクロールに最適だからです。

というわけで何故書き換えが必要なのかの説明をしました。
「何故 why」が理解できないとなかなかみなさん書き換えようとしません。
そして「ある日突然使えなくなることもあるよ」と軽く脅しかけないといつまでも古いやり方を引きずります(笑)

事前説明の最後もうひとつ
テキストが動くのは好ましくない
と考える人が多い点もお伝えしておきます。
だってテキストは動いていない方が断然読みやすいわけなんですよ。
動かす理由は「目立たせる」「気づかせる」「自己満足」などなど。
なのでやりすぎるとひどく嫌がられることになるのは覚悟しておきましょう。
個人的には音楽の自動演奏と同じぐらい鬱陶しいわな (´・ω・`)

マークアップ

<p class="marquee-anim">
  <span>テキスト内容</span>
</p>

簡単ですね。botには「このテキストは動いています。」という情報は不要です。
このテキストは「段落を意味しています。」というのが重要。
pタグは実は扱いが難しいですから、不安がある方は p を div に置き換えても良いかと思います。
が、段落としての定義は失われ、単に「特に重要な意味はないが文字が書かれている」という感じになります。

<style>
.marquee-anim {
  padding: .5em 0; /* ボーダーや背景が不要ならばここもたぶん不要 */
  overflow: hidden;
  border: 1px solid rgb(200,222,245); /* ボーダー, 不要ならこの一行削除 */
  background-color: rgb(233,247,250); /* 背景色, 不要ならこの一行削除 */
  color: rgb(51,51,51); /* 文字色 */
}

.marquee-anim span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}
</style>

滅多に使用することが無い場合には上記のように style要素 としてhtml内容のすぐ下に書いてもOKです。
せっかく修正するのだからhtmlは使いたくない(style要素はhtml内でCSSを使うためのhtml要素です)という方は、styleタグ(開始及び終了)を削除してスタイルシート内に記してください。
その代わり全く無関係なページでも読み込み・解釈が行われます。

まとめ

marqueeはまだたまに見かけます。
FC2ブログで見かける時は9割がたmarquee要素です(笑)
Wordpressなどで見かける時は逆に9割がCSSでのmarqueeです。
確かにhtmlのmarqueeを利用すれば勝手に流れますので楽は楽なんですが。
せっかくやるのですから今後長く使え、「正しい」と言われる方法を取る方が良いのではないかと思います。精神衛生上も(笑)

関連記事

Comments 0

There are no comments yet.
カスタマイズ Q&A 質問時の注意 テンプレート