検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLマーキータグ

HTMLマーキータグ

王林
王林オリジナル
2024-09-04 16:23:041117ブラウズ

HTML のマーキー タグは、Web ページ内のテキストまたは画像上にスクロールを作成するために使用されます。これにより、左から右、右から左、上から下、下から上などのあらゆる種類のスクロールが可能になります。 HTML でのこのタグの構文は、これはテキストのスクロールです…< /marquee>。「marquee」タグは、必要なスクロールのプロパティを記述するために使用されます。他によく使用されるマーキー属性には、behaviour、hspace、scrollamount、scrolllay、truespeed、vspace などがあります。

構文:

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

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

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 – マーキー左

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>

出力:

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

HTMLマーキータグ

例 #2 – 右マーキー

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>

出力:

HTMLマーキータグ

例 #3 – マーキーアップ

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>

出力:

HTMLマーキータグ

例 #4 – マーキーダウン

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>

出力:

HTMLマーキータグ

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

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>

出力:

HTMLマーキータグ

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

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

コード:

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<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>
</body>
</html>

出力:

HTMLマーキータグ

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

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

コード:

<!DOCTYPE html>
<html>
<head>
<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<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>
</body>
</html>

出力:

HTMLマーキータグ

結論

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

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

JavaScript css html if for using Attribute default this background
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLのmapタグ次の記事：HTMLのmapタグ

関連記事

続きを見る