1. ホーム
  2. Web制作
  3. HTML/Xhtml

XHTMLコードでのMarqueeタグの使用方法

2022-02-03 06:03:53
フォーラムでjeanjean20さんが、Marqueeを規格に準拠するように修正する方法について言及されているのを拝見しました。友人のフォローアップの書き込みを読んで、なかなかいいなと思いました。モデレータのgreengnnは、Marqueeが標準に準拠しておらず、W3Cから見捨てられたと明記していました。友人の中には、「行っても意味がない気がする」「効果は結構あったのに無くなった」と言う人もいました。行くのはいいが、見ていてイライラするという友人もいる。ここでは、greengnnさんの結論を受けて、内容を修正・追加していきますので、理解・納得していただけると幸いです。
まず訂正すべき点は、MarqueeはW3Cに見捨てられたという点です。W3Cはこのラベルを作成したことはなく、ましてや"abandon"したことはありません。これは、結婚する前に離婚するという話と同じです。実際、Marqueeは他の多くのラベルと同様、MicrosoftやNetscapeといった企業によって私的に作られており、W3Cはこのラベルを一度も認めていないのです。この金持ちの会社には理不尽という問題があるが、このNPOは口が達者だ!
なぜW3CはMarqueeを認めないのか?ウェブデザイナーの目には、このタグはドライバーのように映るのです 初期のころは、自分たちが誇示できる技術力だと考えていました。しかし今、私たちはその使用を推奨していません(ここで言いたいのは、多くの人がW3Cは使ってはいけないと言っていますが、それは間違っていて、W3Cには使ってはいけない、使えないと制限する権利はないのです)。W3Cには、あなたが使うことを制限する権利も、使わないことを制限する権利もありません)、なぜですか?規格は技術ではなく、規格は仕様と提案に過ぎません。私たちは今でもHTML4.0のタグを使っていますが、標準は私たちのXHTMLに何のタグも追加せず、使うことを推奨するもの(例:p, div, ul, dl, span, em・・・)、使わないことを推奨するもの(例:font, b, u, i・・・)、意味付けや標準を使うことを提唱しています。そして、仕様の意味づけと使い分けを提唱している。もちろん、標準はXHTMLだけでなく、CSSやDOM、スクリプト言語も含まれる。CSSは標準の後に作られたと思っている人が多いようですが、そうではありません。CSSは昔からあり、CSSフィルタなどブラウザベンダーが開発したCSSの一部を使わないことを提唱しているのは、標準規格も同じです。
規格のもう一つの重要なポイントは、機能の分離である。構造、スタイル、動作の3つに分けられ、それぞれ、構造(xHTML、XML)、スタイル(CSS)、動作(DOM、ECMAScript)が含まれます。ここで、なぜそのMarqueeがW3Cで認識されていないのかを考えてみると、理解できるはずです。彼はもはや、FONTタグやBタグのように、構造的なタグではありません。それらには文体や動作の特徴があり、構造的なカテゴリーに入れることがいかに冗長であるかは明らかです。
ですから、Marqueeの効果を維持したい、あるいは実装したい皆さんは、ページを確実に動かすことができるスクリプト言語であるJavaScriptにもっと注目する必要があります。スクリプト言語は確実にあなたのウェブページを動かすことができます。指定した場所を動かすには、もちろんタグの中のIDやCLASSの使い方に注目する必要があります。
この面白い効果を簡単に使ってもらうために、owさんにJSを書いてもらいましたので、次のコードをご覧ください。
JSコード
コピーコード
コードは以下の通りです。

function getElementsByClass(searchClass,tagName) {。
var classElements = new Array()。
if ( tagName == null )
tagName = '*'。
var els = document.getElementsByTagName(tagName);
var elsLen = els.length。
var pattern = new RegExp("(^|s)" searchClass "(\s|$)");
for (i = 0, j = 0; i < elsLen; i ) {.
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j ;
}
}
return classElements;
}
function ccMarquee(className){...
var a=getElementsByClass(className)。
for (i = 0; i < a.length; i ) {.
a[i].innerHTML="<marquee>" a[i].innerHTML "</marquee>" となります。
}
}window.onload = function () {.
ccMarquee("ccMarquee") を使用します。
}

XHTMLのコードです。
コピーコード
コードは以下の通りです。

<div class="ccMarquee">
<a href="" title=">ここで、スクロール</a>を行います。
</div>

スクロール効果を使用したい場合は、その外側のラベルに Class="ccMarquee" を追加するだけでよいことに注意してください。大文字と小文字は区別されます。
添付ファイル: <marquee> タグ属性詳細
まず、次のコードをご覧ください。
コピーコード
コードは以下の通りです。

<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffff height=300 width=30% hspace=20 vspace =10 onmouseover=this.stop() onmouseout=this.start()> ここにスクロールコンテンツを入力してください </marquee>.Onmouseover=this.start() > ここにクリックするとスクロールコンテンツを入力できます。

では、本題に入ります
方向は、スクロールの方向を意味し、値は左、右、上、下、デフォルトは左です。
loopはループ回数を表し、値は正の整数、デフォルトは無限ループです
Â- scrollamount は移動速度を表し、値は正の整数で、デフォルトは 6 です。
scrolldelayは一時停止時間を表し、値は正の整数、デフォルトは0、単位はミリ秒のようです。
値はtop, middle, bottomで、デフォルトはmiddleです。
bgcolorはモーションエリアの背景色を示し、値は16進数のRGBカラーで、デフォルトは白です。
height, widthはモーションエリアの高さと幅を示し、値は正の整数(ピクセル)またはパーセントで、デフォルトのwidth=100% heightはタグ内の要素の高さです。
Â- hspace, vspace は、要素から領域境界までの水平・垂直方向の距離を表し、値はピクセル単位の正の整数となります。
Â- onmouseover=this.stop() onmouseout=this.start() は、マウスが領域上にあるときにスクロールが停止し、マウスが離されたときにスクロールが継続されることを意味します。