コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
HTML マーキータグの属性
HTML マーキー タグの例
例 #1 – マーキー左
例 #2 – 右マーキー
例 #3 – マーキーアップ
例 #4 – マーキーダウン
例 #5 – ネストされたマーキー
例 #6 – マーキーの速度比較
例 #7 – マーケの背景色とスペース
結論
ホームページ ウェブフロントエンド htmlチュートリアル HTMLマーキータグ

HTMLマーキータグ

王林
王林
Sep 04, 2024 pm 04:23 PM
html html5 HTML Tutorial HTML Properties HTML tags

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7542
15
CakePHP チュートリアル
1381
52
Steamのアカウント名の形式は何ですか
83
11
Win11 Activation Key Permanent
55
19
NYTの接続はヒントと回答です
21
87
もっと見る
Related knowledge
HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles