HTML でのテキストの移動は、テキストのスクロールとも言われます。一定の時間間隔でテキストを全方向にスクロールできます。 タグは次の動作を行うために使用されます。テキストのスクロール方向は左方向、右方向、上方向、下方向の4方向です。動作プロパティを設定して、閉じた領域内でテキストを移動します。
リアルタイムの例: Web サイト上の重要なコンテンツが頻繁に更新されると考えてみましょう。コンテンツが常に安定している場合、ユーザーはコンテンツに注意を向けることができません。そのため、ユーザーの注意を引くために、更新されたコンテンツを常にスクロールする必要があります。ユーザーの要件に応じて、コンテンツがどちら側にスクロールするかを指示できます。この要件を達成する
HTML で CSS を使用する理由
すべてのページ間に共通のロジックを提供します。各 HTML ページに同じスタイルのロジックを記述する代わりに、共通のロジックを記述するために CSS ファイルを使用します。そして、この CSS ページを を使用して各 HTML ページに含めます。タグ。
Marquee タグは HTML でどのように機能しますか?
コンテンツは
構文 #1
<marquee>
//some text to move
</marquee>
ログイン後にコピー
構文 #2
<marquee direction=”left or right or up or down”>
//some text to move
</marquee>
ログイン後にコピー
構文 #3
<marquee behavior="alternate"> //it makes the text back direction by touching the border of the page.
//some text to move
</marquee>
ログイン後にコピー
構文 #4
<marquee direction=”left” scrollamount="5">// scrollamount used to set the scrolling text speed
//some text to move
</marquee>
ログイン後にコピー
注: 方向プロパティを指定しなかった場合、デフォルトのマーキー方向はそのままになります。
HTML での移動テキストの実装例
以下に挙げる例を示します:
例 #1
デフォルトのマーキータグ
コード:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee>
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="right">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
ログイン後にコピー
出力:
説明: 上のテキストでわかるように、方向プロパティを右に設定することで左から右に移動します。
例 #3
上方向のマーキー
コード:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="up">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
ログイン後にコピー
出力:
説明: 上のテキストでわかるように、方向プロパティを up に設定することで下から上に移動しました。
例 #4
下方向にマーキーします。
コード:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="down">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
ログイン後にコピー
出力:
説明: 上のテキストでわかるように、方向プロパティを下に設定することで上から下に移動します。
例 #5
動作プロパティを含むマーキー。
コード:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>
</body>
</html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
