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

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内での文字色変更方法を教えて頂きたくメールしました。

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">

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

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を使って成功している僕の場合何なんだろう？とそこが良く解りません。
本当にゴメンナサイ教えて頂きたいです。

To ittsuieさん

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

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

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には他にも「詳細度」「上書き」など複雑なルールがありますので、ルールに則って記述を行う必要があります。なかなか難しいかもしれない ^^;

To ittsuieさん 追記

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

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

To Akiraさん

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

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

だって・・・
こんなスーパーな人がいるんだも～～～～～～ん！

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

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

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

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