HTML マーキータグの使用例

HTML マーキータグの使用例
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、IEカーネル以外のブラウザ(Netscapeなど)を使用している場合は、次の興味深い効果の一部を見ることができない可能性があります。このタグはコンテナタグです。

マーキーアナウンスローリングコード

最もシンプルなウェブサイトのアナウンススクロールコードは、Marquee をベースにしたテーブル形式で垂直に上向きにスクロールするもので、CSS を知らなくても使用できます。


ヒント: 実行前にコードの一部を変更することができます


文法:

<マーキー></マーキー>

以下に簡単な例を示します。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee><font size=+3 color=red>こんにちは、世界</font></marquee>

よく使用されるイベントは次の 2 つです。

onMouseOut="this.start()": マウスが領域外に移動してもスクロールを継続するように設定するために使用されます。
onMouseOver="this.stop()": マウスがこの領域に移動したときにスクロールを停止するために使用されます

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" : マウスが領域外に移動したときにスクロールを継続するように設定するために使用されます。 onMouseOver="this.stop()" : マウスが領域内に入ったときにスクロールを停止するように設定するために使用されます。</marquee>

完全な例を以下に示します。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
完全な例はこちら
</マーキー>

このタグは最大 11 個の属性をサポートします。

整列する

<marquee>タグコンテンツの配置を設定する
absbottom: 絶対下揃え(gやpなどの文字の下揃え)
absmiddle: 絶対中央揃え
ベースライン: ボトムラインの配置
bottom: 下揃え(デフォルト)
左: 左揃え
中央: 中央揃え
右: 右揃え
texttop: 上行の配置
上: 上揃え

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee align="absbottom">align="absbottom": 絶対下揃え(g や p などの文字の下揃え)。 </マーキー>
<marquee align="absmiddle">align="absmiddle": 絶対中央揃え。 </マーキー>
<marquee align="baseline">align="baseline": ベースラインを揃えます。 </マーキー>
<marquee align="bottom">align="bottom": 下揃え(デフォルト)。 </マーキー>
<marquee align="left">align="left": 左揃え。 </マーキー>
<marquee align="middle">align="middle": 中央に揃えます。 </マーキー>
<marquee align="right">align="right": 右揃え。 </マーキー>
<marquee align="texttop">align="texttop": 上の行を揃えます。 </マーキー>
<marquee align="top">align="top": 上揃え。 </マーキー>

行動

スクロール方法を設定します。

交互: 両端の間を前後に転がることを意味します。
スクロール: 端から端までスクロールして繰り返すことを意味します。
スライド: 繰り返しなしで、端から端までスクロールすることを意味します。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee behavior="alternate">alternate: は、両端の間を前後にスクロールすることを意味します。 </マーキー>
<marquee behavior="scroll">スクロール: 端から端までスクロールして繰り返すことを意味します。 </マーキー>
<marquee behavior="slide">slide: は、繰り返しなしで端から端までスクロールすることを意味します。 </マーキー>

背景色

アクティブな字幕の背景色を設定します。背景色は、RGB、16 進数値形式、または色名で設定できます。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee bgcolor="#006699">アクティブな字幕の背景色を設定します bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">アクティブな字幕の背景色を設定します bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">アクティブな字幕の背景色を設定します bgcolor="red"</marquee>

方向

アクティブな字幕のスクロール方向を設定する

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee direction="down">アクティブな字幕のスクロール方向を設定します direction="down": 下向き</marquee>
<marquee direction="left">アクティブな字幕のスクロール方向を設定します direction="left": left</marquee>
<marquee direction="right">アクティブな字幕のスクロール方向を設定します direction="right": right</marquee>
<marquee direction="up">アクティブな字幕のスクロール方向を direction="up": 上向きに設定します</marquee>

身長

アクティブな字幕の高さを設定する

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee height="500" direction="down" bgcolor="#CCCCCC">アクティブな字幕の高さを height="500" に設定します</marquee>



アクティブな字幕の幅を設定する

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee width="500" bgcolor="#CCCCCC">アクティブな字幕の幅を width="500" に設定します</marquee>

スペース

アクティブな字幕の位置と親コンテナの水平境界線の間の距離を設定します

これは、表示ボックスの周囲の水平方向のスペースを制御します。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<テーブルの幅="500" 境界線="1" 配置="中央" セルパディング="0" セル間隔="0">
<tr>
<td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</テーブル>

スペース

アクティブな字幕の位置と親コンテナの垂直境界線の間の距離を設定します

これは、表示ボックスの周囲の垂直スペースを制御します。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

ループ

スクロール回数を設定します。 loop=-1 の場合、常にスクロールすることを意味します。デフォルト値は -1 です。
コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee loop="-1" bgcolor="#CCCCCC">私は歩き続けます。 </マーキー>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">歩くのは2回だけ</marquee>

スクロール量

アクティブな字幕のスクロール速度をピクセル単位で設定します

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee スクロール量="10" >スクロール量="10" </marquee>
<marquee スクロール量="20" >スクロール量="20" </marquee>
<marquee スクロール量="30" >スクロール量="30" </marquee>

スクロール遅延

アクティブな字幕を 2 回スクロールする間の遅延時間をミリ秒単位で設定します。
値が大きすぎると一時停止効果が発生します。

コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<marquee スクロール遅延="10" >スクロール遅延="10" </marquee>
<marquee スクロール遅延="100" > スクロール遅延="100" </marquee>
<marquee スクロール遅延="1000">スクロール遅延="1000" </marquee>

<<:  CSS3 の新しいレイアウト: flex の詳細な説明

>>:  Vue.jsはコンポーネントを通じてアイコンを処理します

推薦する

49 個の JavaScript のヒントとコツ

目次1. js整数の演算2. ネイティブアラートを書き換えてポップアップボックスの数を記録する3. ...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

純粋な HTML タグにどれくらい精通していますか?

以下の HTML タグには、基本的に既存のタグがすべて含まれています。数分かけて 1 つずつ参照する...

Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

WIN10 64ビットに最新のMySQL8.0.18をインストールダウンロード公式サイトから最新バ...

Linux CentOS MySQL データベースのインストールと設定のチュートリアル

MySQLデータベースのインストールに関するメモ、みんなで共有a) MySQL ソースインストールパ...

jQueryはアコーディオンの小さなケースを実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

Element-uiはテーブル内のセルを直接クリックして編集します

目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...

Node+Express テストサーバーのパフォーマンス

目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...

行の高さと垂直方向の配置に関する包括的な理解

前の単語line-height、font-size、vertical-align は、インライン要素...

CentOS 6.5 i386 インストール MySQL 5.7.18 詳細チュートリアル

ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...

親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...

CSS 完全な視差スクロール効果

1. 何ですか視差スクロールとは、複数の背景レイヤーを異なる速度で動かすことで、3次元のモーション...

MySql ビュー トリガー ストアド プロシージャの詳細な説明

ビュー:一時テーブルを繰り返し使用する場合、将来の使用を容易にするために別名を付けることができます。...

Ubuntu 16.04 mysql5.7.17 リモートポート 3306 を開く

MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...