html文字の点滅とスクロール

Question

前提・実現したいこと

html勉強中です
文字の点滅とスクロールしたいんですが動きません
記述はこのようにしてあります
文章の<b><blink>この部分を点滅</blink></b>させます。
<span style="font-size:16pt"><marquee><img src="../acc/prv/marSL1.gif" hieght=30 width=50>
◆marqueeは、文字と画像をスクロールさせます。</marquee></span>
動かないのはなぜでしょうか
よろしくお願いします

Answer 1

すでに答えが出ているので別方面からのアドバイスになりますが、何を参考にして勉強されているでしょうか？　古い書籍やサイトを見ているのならそれは果てしなく時間の無駄になります。少なくともここ3年以内のものを参考にされるといいと思います。サイトの場合はその辺が分かりにくいので、書店に行って1冊自分のレベルに合う本を探して一から順序を追って勉強されるのがいいと思います。その際に奥付をみて、初版の発行日をチェックするのを忘れずに。

Comments

[yambejp]

イメージ的には20年くらい前の参考書ですよね・・・

Answer 2

<blink>と<marquee>はどちらも廃止されています
とくに<blink>は大多数のブラウザでサポートされていません。

MDNのドキュメントにあるようにblinkはcssでアニメーションを作成します
marqueeもcssでアニメーションさせますがやりたいことによって微妙にコードが変わるので割愛します

.blink {
  animation: 2s linear infinite condemned_blink_effect;
}

Answer 3

marqueeは廃止されたので、cssのキーフレームで処理します
※blinkも追記しておきました

<style>
.marquee {
width:600px;
overflow:hidden;
position:relative;
}
.marquee > *{
display:inline-block;
padding-left:600px;
white-space:nowrap;
animation:marquee linear 5s infinite;
}
@keyframes marquee {
from   { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
@keyframes blink {
from{ opacity:0;}
to  { opacity:1;}
}
.blink{
animation:blink linear 1s infinite;
}
.bold{
font-weight:bold;
}
</style>
<div class="blink bold">この部分を点滅</div>
<div class="marquee"><div><img src="#" alt="img"></div></div>
<div class="marquee"><span>testtesttesttesttesttest</span></div>

Comments

[yambejp]

仕様上はtext-decoration-line: blink;があるようなのですが
メジャーなブラウザが対応してないみたいです