HTMLマーキータグ

HTML のマーキー タグは、Web ページ内のテキストまたは画像上にスクロールを作成するために使用されます。これにより、左から右、右から左、上から下、下から上などのあらゆる種類のスクロールが可能になります。 HTML でのこのタグの構文は、

これはテキストのスクロールです…。「marquee」タグは、必要なスクロールのプロパティを記述するために使用されます。他によく使用されるマーキー属性には、behaviour、hspace、scrollamount、scrolllay、truespeed、vspace などがあります。

構文:

マーキーは、 を使用して使用できます。要素。構文は次のように記述できます。

<marquee direction="up" height="150" width="250" bgcolor="white">This is scrolling of the text...</marquee>

HTML マーキータグの属性

以下は、でサポートされている属性です。タグ。

1. 動作: 代替、スクロール、スライドなどの値の 1 つであるテキストをスクロールするアクション。
2. bgcolor: 背景色を与えます。
3. direction: テキストをスクロールする方向を左、右、上、下の値で指定します。デフォルトの方向値は左です。
4. 高さ: マーキーの高さを定義します。
5. hspace: この属性は、マーキー要素の周囲に水平方向のスペースを提供します。
6. loop: テキストをスクロールできる回数を定義します。デフォルト値が -1 の場合、マーキーは継続的にループします。
7. scrollamount: 各間隔のスクロール量を指定します。スクロール量が定義されていない場合、デフォルト値は 6 です。
8. scrolllay: スクロール遅延をミリ秒単位で与えます。スクロール量が定義されていない場合、デフォルト値は 6 です。
9. truespeed: スクロール遅延値 60 を示すために使用されます。
10. vspace: この属性は、マーキー要素の周囲に垂直方向のスペースを提供します。
11. width: マーキーの幅を定義します。

HTML マーキー タグの例

以下で説明する HTML マーキー タグの例を次に示します。

例 #1 – マーキー左

このタイプのマーキーは、コンテンツを左側から移動するために使用できます。

コード:

<title>Left Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>


<div class="mrq_class">
<marquee class="marq_class1" bgcolor="grey" direction="left" loop="">
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>

出力:

• 上記のコードを .html 拡張子を付けてファイルに保存します
• ブラウザで HTML ファイルを実行すると、以下の画像に示すような出力が得られます

例 #2 – 右マーキー

このタイプのマーキーは、コンテンツを右側に移動するために使用できます。

コード:

<title>Right Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>


<div class="mrq_class">
<marquee class="marq_class1" bgcolor="grey" direction="right" loop="">
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>

出力:

例 #3 – マーキーアップ

このタイプのマーキーは、コンテンツを上側に移動するために使用できます。

コード:

<title>Up Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>


<div class="mrq_class">
<marquee class="marq_class1" bgcolor="grey" direction="up" loop="">
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>

出力:

例 #4 – マーキーダウン

このタイプのマーキーは、コンテンツを下側に移動するために使用できます。

コード:

<title>Down Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>


<div class="mrq_class">
<marquee class="marq_class1" bgcolor="grey" direction="down" loop="">
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>

出力:

例 #5 – ネストされたマーキー

このタイプのマーキーは、コンテンツをネストするために使用できます。

コード:

<title>Nested Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>


<div class="mrq_class">
<marquee class="marq_class1" bgcolor="grey" direction="down" behavior="alternate" height="150">
<marquee behavior="alternate"><div class="txt">Welcome to EDUCBA...</div></marquee>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>

出力:

例 #6 – マーキーの速度比較

マーキー要素の速度は、scrolllay 属性を使用して指定できます。

コード:

<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>


<marquee class="marq_class1" bgcolor="grey" direction="down" behavior="alternate" height="150">
<marquee scrolldelay="80" scrollamount="7">Welcome to EDUCBA...(normal speed)</marquee>
<marquee scrolldelay="60" scrollamount="12" truespeed>Welcome to EDUCBA...(This is very speed)</marquee>
<marquee scrolldelay="250" scrollamount="4">Welcome to EDUCBA...(This is very slow)</marquee>
</marquee>

出力:

例 #7 – マーケの背景色とスペース

このタイプのマーキーは、マーキー要素の背景色とスペースを設定するために使用できます。

コード:

<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>


<div class="mrq_class">
<marquee class="marq_class1" bgcolor="#d9d9ff" hspace="50" vspace="20">
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>

出力:

結論

これまで、マーキー タグを使用して Web ページ上にスクロール テキストを作成する方法を研究してきました。ユーザーは、Web サイト上で水平方向または垂直方向にスクロールするテキストを簡単に作成できます。この要素は非推奨となっており、使用されなくなります。スクロール効果を実現するには、CSS または JavaScript が使用されます。

以上がHTMLマーキータグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。