HTML 内のテキストの移動

HTML でのテキストの移動は、テキストのスクロールとも言われます。一定の時間間隔でテキストを全方向にスクロールできます。 タグは次の動作を行うために使用されます。テキストのスクロール方向は左方向、右方向、上方向、下方向の4方向です。動作プロパティを設定して、閉じた領域内でテキストを移動します。

リアルタイムの例: Web サイト上の重要なコンテンツが頻繁に更新されると考えてみましょう。コンテンツが常に安定している場合、ユーザーはコンテンツに注意を向けることができません。そのため、ユーザーの注意を引くために、更新されたコンテンツを常にスクロールする必要があります。ユーザーの要件に応じて、コンテンツがどちら側にスクロールするかを指示できます。この要件を達成する タグが使用されています.

HTML で CSS を使用する理由

すべてのページ間に共通のロジックを提供します。各 HTML ページに同じスタイルのロジックを記述する代わりに、共通のロジックを記述するために CSS ファイルを使用します。そして、この CSS ページを を使用して各 HTML ページに含めます。タグ。

Marquee タグは HTML でどのように機能しますか?

コンテンツは を適用することで移動できます。マーキータグ内で方向プロパティを設定すると、方向に基づいてプロパティ値のコンテンツが移動します。

構文 #1

<marquee>
//some text to move
</marquee>

構文 #2

<marquee direction="”left" or right up 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

デフォルトのマーキータグ

コード:

<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

出力:

説明: 上のテキストでわかるように、方向については何も言及していないにもかかわらず、右から左に移動しているため、これがデフォルトのマーキー タグです。

例 #2

正しい方向にマーキータグを配置します。

コード:

<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

出力:

説明: 上のテキストでわかるように、方向プロパティを右に設定することで左から右に移動します。

例 #3

上方向のマーキー

コード:

<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

出力:

説明: 上のテキストでわかるように、方向プロパティを up に設定することで下から上に移動しました。

例 #4

下方向にマーキーします。

コード:

<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

出力:

説明: 上のテキストでわかるように、方向プロパティを下に設定することで上から下に移動します。

例 #5

動作プロパティを含むマーキー。

コード:

<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>

出力:

説明: 上記のテキストでわかるように、動作プロパティを交互に設定することで、境界線をタッチすることで左から右、右から左に移動します。

例 #6

スクロール量プロパティを持つマーキー。

コード:

<title>Move Text</title>
<style>
body {
background-color: fuchsia;
text-align: center;
color: white;
font-family: Arial;
border: solid 2px red;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee direction="left" scrollamount="2">
Paramesh
</marquee>
<marquee scrollamount="4">
Amardeep
</marquee>
<marquee scrollamount="6">
Harinath-Rajitha
</marquee>

出力:

説明: 上のテキストでわかるように、異なるタイミングで右から左に移動しているため、すべて異なる位置にあります。

結論

HTML 内のテキストの移動は、marquee タグによって実現されます。要件に基づいてテキストを上下左右に移動できます。このマーキー機能は、主にテレビ チャンネルでユーザーの注意を引くために定期的に更新されるために使用されます。

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