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

既に懐かしい響きの 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

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

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

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

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

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

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

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

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

marqueeタグ利用者が犯しがちなミス

古い要素ですから旧態然の書き方をする方がとても多いです。以下のような感じですね。

<marquee width="3000" bgcolor="#ffffff" scrolldelay="2" scrollamount="6"><font color="#ff0000" size="2">この文字は流れます</font></marquee>

あわわわわ。廃止要素と廃止属性のみで構成された希少なHTML(笑)

書き直しは次の章をごらんください。上記HTMLで一番いけないのが width="3000" の部位です。これをイマドキのCSSで書くと width: 3000px; ということで、ピクセルによる絶対数値指定 が行われています。すなわち上記のmarquee要素をテンプレートあるいは記事内に記載すると レスポンシブデザインが崩壊します。絶対値とは『絶対』なのですから、横幅が例えば1200pxしか無い状況でもmarquee部位は3000pxを死守してしまいます。つまり大きくはみ出します。

はみ出してしまえば モバイルユーザビリティエラー ということでGoogleにひどく嫌われます。何故なら当たり前に考えて 閲覧者が困る からです。

マークアップ

<p class="marquee-anim">
  <span class="marquee-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-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タグ(開始及び終了)を削除してスタイルシート内に記してください。その代わり全く無関係なページでも読み込み・解釈が行われます。

テキストの一部を色変更したい場合

例えば以下のような場合。

テキストが横へ流れます。ここは赤字です。

<span class="marquee-span">テキストが横へ流れます。<span style="color: rgb(180,11,11)">ここは赤字です。</span></span></p>

色変更したいテキストを <span></span> で囲い、span要素としてマークアップ。開始タグに <span style="color: 指定色;"> と、インラインCSSで指定します。

まとめ

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

ittsuie
2021/08/23 (Mon) 08:16

marquee内の文字色変更について

初めましてFlancescaやブログカードを使用させて頂いているittsuieと申します
以前トップページタイトル上あたりのwidth300pxから1回のみコメントを流したくてこちらの記事に従い書きました

cssはこの場所に書きました
/* index_area */
#index-blog_title-container {
display: flex;
flex-flow: column;
justify-content: center;
position: relative;
z-index: 10;
width: 80%;
margin: 0 -60% 0 0;
}
.marquee-anim {
overflow: hidden;
width:300px;
}
.marquee-anim span {
display: inline-block;
padding-left: 100%;
white-space: nowrap;
animation: marquee 25s linear 1;
color: black
}
@keyframes marquee {
from {
transform: translate(0);
}
to {
transform: translate(-100%);
}
}

htmlはこの場所に書きました
<!-- ヘッダー -->
<header id=header-banner>
<div id=<!--index_area-->index-<!--/index_area-->blog_title-container>
<p class="marquee-anim">
<span>音楽を愛しています・・        
C125を愛しています・・・        
そして・・・        あなたを死ぬほど愛しています!!</span>
</p>
これでPC上でもケイタイ上でも問題無く流れてくれて感動したんですが、一部の文字を赤色にしたくて<font color>を指定して上手くいきました。
しかし<font>はもう使うべきではないという事をその後知り迷ってしまいました
こちらの別記事で書かれているW3C valicatorを試した所エラーだらけでした。

話がずれてしまいますがこちらのページでhttps://ittsuie.blog.fc2.com/blog-entry-2.html初めて表に挑戦したんですが、table要素を使って書いた所見た目は出来ているんですがサイドメニュー内のカレンダーに影響が出ているのに気付きました
それから探りに探って個別でクラス付けを知り結局cssで"table.a""td.a""th.a"というのをクラス付けして成功しました
その時に作ったのが<table class="a"><td class="a"><th class="a">なので今回の文字色変更もこれでいけると試したのがcssで"color.r"で赤色を作って<color class="r">変えたい文字</color>で試した所上手くいったと思ったんですがW3C valicatorを試した所同じくエラーでした。

またまた探って最終的にcolorはspan要素で使用が通常を知りましたが全く上手くいってくれませんでした
素人的な考えですがcss上のmaquee spanでspanを使用しているのが原因かなと思いこれをmarquee pに変えてhtmlをp始まりのp終わりで試しましたが形が崩れてダメでした。

回りくどくなってしまいましたがmarrquee内での文字色変更方法を教えて頂きたくメールしました。


vanillaice (Akira)
vanillaice (Akira)
2021/08/23 (Mon) 15:36

To ittsuieさん

こんにちは ('0')/
以下の通り修正をおすすめします。

<p class="marquee-anim">
<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字</span></span>
</p>

marquee-anim に入れ子されている最初のspan要素にクラス名 .marquee-span を付けます。そしてCSSの方は

.marquee-anim span {
内容
}

これを

.marquee-span {
内容
}

に書き換えます。marquee-spanというクラス名が付いたspan要素にのみ適用、という形で詳細度を高くすればOKです。

-----
クラス名を付加するときはなるべく一文字のみクラスは避け、後で見たときに自分で意味のわかる名称を付けておいた方が良いですよ。例えば

<table class="red_color">

など。ご自身が理解できるのであれば今のままでも構いません。
一度お試しください :)

ittsuie
2021/08/24 (Tue) 00:39

To Akiraさん

凄いです・・・出来ました! W3C valicatorもトップページに関してはエラーはゼロになりました。Warning事項はとりあえずエラーページを減らしながら今後対処していきたいと思います。
こんなに早くの返答感謝いたします<(_ _)>

実は最初は色変化が3回あるので<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字</span></span></span></span></span></span></span>と書いて失敗だったので
よく考えて<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字<span style="color: black;">通常の文字<span style="color: red;">赤くしたい文字<span style="color: black;">通常の文字<span style="color: red;">赤くしたい文字</span></span></span></span></span></span></span>で成功でした。

css内の.marquee-span内にcolor: blackが記載されているので良いと思いましたが、その中に含まれる全てを再度指示したという結果になったと思いました。違ってたらゴメンナサイ。

~~marquee-spanというクラス名が付いたspan要素にのみ適用、という形で詳細度を高くすればOKです。~~
ココは手持ちの忘れたら怒るでメモ帳に刻んでおきます。

最後にもう一つだけワガママ聞いてください。
最初に書いたコメントで、こちらのページでhttps://ittsuie.blog.fc2.com/blog-entry-2.html初めて表に挑戦したtable要素についてなんですが、僕はcssでピリオドを頭に打たずに書いています。 ".table.a" では無く"table.a"です。
その時htmlは<table class="a"><td class="a"><th class="a">で成功しています。
しかし頭にピリオドを打つとclassで#を打つとidと言う事を知り、ピリオドを打ってないのにclassを使って成功している僕の場合何なんだろう?とそこが良く解りません。
本当にゴメンナサイ教えて頂きたいです。

vanillaice (Akira)
vanillaice (Akira)
2021/08/25 (Wed) 19:00

To ittsuieさん

こんにちは。
内容を修正しなければいけないのと、class及びidのルール説明も必要なので、後日改めてお返事しますね。

コロナワクチン接種で非常に体調が悪いためご容赦ください。取り急ぎご連絡まで。

vanillaice (Akira)
vanillaice (Akira)
2021/08/26 (Thu) 16:20

To ittsuieさん(marqueeの件)

こんにちは。改めてお返事遅くなりました (*_ _)

<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字<span style="color: black;">通常の文字<span style="color: red;">赤くしたい文字<span style="color: black;">通常の文字<span style="color: red;">赤くしたい文字</span></span></span></span></span></span></span>

この内容なんですが、

<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字span>通常の文字<span style="color: red;">赤くしたい文字</span>通常の文字<span style="color: red;">赤くしたい文字</span></span>

こうですね。親要素の .marquee-span にすでに通常文字色の指定がありますので、色変更したい文字列だけを
<span style="color: 指定色">色変更したい文字列</span>
こうして挟んでください。元の内容(「成功でした」と書いて頂いた内容)だと構文エラーなので修正必須です(終了タグが一つ余分なため)

-------
> cssでピリオドを頭に打たずに書いています〜

まず「ピリオド(またはフルストップ)」ではなく「ドット」ですね。ドットはクラス名を意味します。
例)
.aaa

この場合は例えば

<div class="aaa">〜</div>


<span class="aaa">〜</span>


<table class="aaa"><tr><td>〜</td></tr></table>
など、要素名を問わずクラス名が「aaa」です。要素名というのは①がdiv要素、②はspan要素、③はtable要素です。そして

.aaa {
color: red;
}

とした場合、①②③それぞれ要素は異なりますが、全て文字が赤くなります。

また、ドットではなくハッシュ(#)の場合はid名を意味します。

<div id="aaa">〜</div>

<span id="aaa">〜</span>

<table id="aaa"><tr><td>〜</td></tr></table>

idはclassと違い、同ページ内で単一でしか存在してはいけませんので、記事のカスタマイズ等で利用する機会は少ないかと思います。というよりも使用を避けたほうが良いです。上記のようにサンプル3要素が同ページ内に存在した場合は構文エラーです。

-----
> ".table.a" では無く"table.a"です〜で成功しています〜

.table.a

table.a
は意味が全く違います。

.table.a
というのは「tableというclass名を持つ要素で、『かつ』aというclass名も持っている」という意味。
例)
<table class="table"><tr><td>〜</td></tr></table> --- 該当しない
<table class="table a"><tr><td>〜</td></tr></table> --- 該当する
<div class="table">〜</div> --- 該当しない
<div class="table a">〜</div> --- 該当する

table.a
というのは「table要素であり、『かつ』aというclass名を持っている」という意味です。

<table><tr><td>〜</td></tr></table> --- 該当しない
<table class="a"><tr><td>〜</td></tr></table> --- 該当する
<div class="a">〜</div> --- 該当しない
<div class="a">〜</div> --- 該当しない

ドットもハッシュも付いておらず、要素名が記されているものを「要素セレクタ」と言います。
例)
table {color: red;} --- 意味, 全てのltable要素は赤文字
div {color: white} --- 意味, 全てのdiv要素は白文字

ドットが付いている場合は「クラスセレクタ」
例)
.aaa {color: red;} --- 意味, class名「aaa」を持つ全ての要素は赤文字
.bbb {color: white;} --- 意味, class名「bbb」を持つ全ての要素は白文字

ハッシュが付いている場合は「アイディーセレクタ」
例)
#aaa {color: red;} --- 意味, id名「aaa」を持つ要素(単一)は赤文字
#bbb {color: white;} --- 意味, id名「bbb」を持つ要素(単一)は白文字

組み合わさっており、間に半角スペースがある場合

例)
.aaa .bbb {color: red;} --- 意味, class名「aaa」を親要素に持つ、class名「bbb」の要素

<div class="aaa"><span class="bbb">〜</span></div> --- 該当

<div><span class="bbb">〜</span></div> --- 該当しない

<div class="aaa"></div>
<span class="bbb"></span> --- 該当しない(.aaa と .bbb が親子関係ではく兄弟関係のため)

組み合わさっており、間に半角スペースが無い場合

例)
.aaa.bbb {color: red;} --- 意味, class名「aaa」を持ち、かつ、class名「bbb」も持つ要素

<div class="aaa">
<div class="bbb">〜</div>
</div> ---該当しない

<div class="aaa bbb">〜</div> --- 該当する

例)
table.aaa {color: red;} --- 意味, table要素であり、かつ、class名「aaa」を持つ(この場合要素はtableで確定)

<table class="aaa"><tr><td>〜</td></tr></table> --- 該当する

<table><tr><td>〜</td></tr></table> --- 該当しない

<div class="aaa">〜</div> --- 該当しない

-----
先回「一文字class名は避けましょう」とお伝えしました。何故かと言うと例えば

a.a{color: red;}

これパッと見てすぐに意味が伝わりづらいですよね。「a要素であり、かつaというclass名を持つ」という意味ですが、こういうのは管理しやすさから言うと良くない名付けです。

そして、要素セレクタの利用はできるだけ避けましょう。ブラウザはレンダリング時にセレクタを右から順に解釈します。

<div class="aaa">〜</div>

この場合は
.aaa {color: red;}
これだけで識別可能です。
div.aaa{color: red;}
と書いてしまうと、まずaaaクラスを持つ要素を探し、そしてさらにdiv要素であるかのマッチングをします。その作業が無駄です。
ただしこういった場合は有効(というか、せざるを得ない)

<div class="aaa">〜</div>
<span class="aaa">〜</span>

上記の要素が存在しており、spanの方だけを赤くしたい場合は

span.aaa {color: red;}

と書く必要があります。とはいってもclassやidは識別のために利用しますので、本来は

<div class="xxx">〜</div>
<span class="aaa">〜</span>

など名称自体を変えた方が効率的ですね。
CSSには他にも「詳細度」「上書き」など複雑なルールがありますので、ルールに則って記述を行う必要があります。なかなか難しいかもしれない ^^;

vanillaice (Akira)
vanillaice (Akira)
2021/08/26 (Thu) 19:22

To ittsuieさん 追記

ごめんなさい。一部文字列が消えてしまっているので、正しくは以下の通りです。

<span class="marquee-span">通常の文字<span style="color: red;">赤くしたい文字</span>通常の文字<span style="color: red;">赤くしたい文字</span>通常の文字<span style="color: red;">赤くしたい文字</span></span>

ittsuie
2021/08/26 (Thu) 23:08

To Akiraさん

<(_ _)><(_ _)><(_ _)><(_ _)><(_ _)><(_ _)><(_ _)>
体調が悪い中解りやすい説明で教えて頂き感謝しかありません!!
出来る事なら感謝の顔文字を画面いっぱいまで埋めつくしたい所です。

実は僕はヤフーブログ閉鎖からの引っ越し者で、当初このFC2というサイトは僕の中でアダルト色のイメージが強烈に強すぎて、そこが運営しているブログなんて・・・と思っていましたが、今になってはメチャメチャ良いブログサイトだなぁ~と思えます。

だって・・・
こんなスーパーな人がいるんだも~~~~~~ん!

ゴメンナサイ・・・取り乱しました・・・
本当に有難うございました!<(_ _)>

vanillaice (Akira)
vanillaice (Akira)
2021/08/26 (Thu) 23:36

To ittsuieさん(完了のご報告)

こんばんは ('0')/
yahooから来られたんですね。唐突な終了でしたよね ^^;
移転には色々ご苦労なさったと思います。FC2ブログ、世間一般では確かにアダルトのイメージがあるようですね。
とはいえたぶん実際にはアダルトとはしっかり区分されていますので、昔からFC2のブログをされている方は逆にそういう印象は無いと思うんですよ。なんかそのへんがギャップというか(笑)

お役に立てたのなら幸いです。お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)