コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLマーキータグ

HTMLマーキータグ

王林
リリース： 2024-09-04 16:23:04
オリジナル
1158 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル：
html html5 HTML Tutorial HTML Properties HTML tags
ソース：php
前の記事：HTMLのmapタグ 次の記事：HTMLのフッタータグ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート