files/ja/web/html/element/marquee/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

---
title: '<marquee>: マーキー要素 (廃止)'
slug: Web/HTML/Element/marquee
tags:
  - Element
  - HTML
  - Obsolete
  - Reference
  - Web
  - marquee
translation_of: Web/HTML/Element/marquee
---
<div>{{Obsolete_header}}</div>

<p>HTML の <code>&lt;marquee&gt;</code> 要素はテキストがスクロールする領域を挿入します。要素の属性を使用して、テキストがコンテンツ領域の端に達したときにどうするかを制御できます。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{DOMxRef("HTMLMarqueeElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<dl>
 <dt>{{htmlattrdef("behavior")}}</dt>
 <dd>marquee 要素内でのテキストのスクロール方法を <code>scroll</code>、 <code>slide</code>、<code>alternate</code> の内の何れかのキーワードで指定します。指定を省略した場合は、初期値の <code>scroll</code> が適用されます。</dd>
 <dt>{{htmlattrdef("bgcolor")}}</dt>
 <dd>背景色を、色名もしくは HEX カラーコードで指定します。</dd>
 <dt>{{htmlattrdef("direction")}}</dt>
 <dd>marquee 要素内でのテキストのスクロール方向を <code>left</code>、 <code>right</code>、 <code>up</code>、 <code>down</code> の内の何れかのキーワードで指定します。初期値は <code>left</code> です。</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>スクロール範囲の高さを、ピクセル値かパーセント値で指定します。</dd>
 <dt>{{htmlattrdef("hspace")}}</dt>
 <dd>水平方向のマージンを指定します。</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>テキストのスクロール回数を指定します。初期値は −1 であり、これはスクロール回数を制限せず、恒久的にスクロールを続ける指定です。</dd>
 <dt>{{htmlattrdef("scrollamount")}}</dt>
 <dd>インターバル内での、テキストの移動ピクセル数を指定します。初期値は 6 です。</dd>
 <dt>{{htmlattrdef("scrolldelay")}}</dt>
 <dd>スクロール動作のインターバルをミリ秒で指定します。初期値は 85 です。<code>truespeed</code> 属性が指定されていない場合は 60 が最下限であり、これ以下の値は 60 として解釈されます。</dd>
 <dt>{{htmlattrdef("truespeed")}}</dt>
 <dd>デフォルトでは、<code>scrolldelay</code> で 60 を下回る値は無視します。<code>truespeed</code> を指定すると、それらの値が無視されません。</dd>
 <dt>{{htmlattrdef("vspace")}}</dt>
 <dd>垂直方向のマージンをピクセル値かパーセント値で指定します。</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>スクロール範囲の幅をピクセル値かパーセント値で指定します。</dd>
</dl>

<h2 id="Event_handlers" name="Event_handlers">イベントハンドラー</h2>

<dl>
 <dt>{{htmlattrdef("onbounce")}}</dt>
 <dd>スクロール範囲の終端に達した時に発火するイベントハンドラ。behavior 属性の値に <code>alternate</code> が指定されている場合のみ発火します。</dd>
 <dt>{{htmlattrdef("onfinish")}}</dt>
 <dd>loop 属性で指定された回数のループが終了した時に発火するイベントハンドラ。loop 属性に 1 以上の値が指定されている場合にのみ発火します。</dd>
 <dt>{{htmlattrdef("onstart")}}</dt>
 <dd>marquee がスクロールを開始した時に発火するイベントハンドラです。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<dl>
 <dt><code>start()</code></dt>
 <dd>marquee のスクロールの開始</dd>
 <dt><code>stop()</code></dt>
 <dd>marquee のスクロールの停止</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html notranslate">&lt;marquee&gt;This text will scroll from right to left&lt;/marquee&gt;

&lt;marquee direction="up"&gt;This text will scroll from bottom to top&lt;/marquee&gt;

&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
  &lt;marquee behavior="alternate"&gt;
    This text will bounce
  &lt;/marquee&gt;
&lt;/marquee&gt;</pre>

<p>{{EmbedLiveSample("Examples", 600, 450)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>CSS の方が望ましいため廃止しましたが、後方互換性のため期待する動作を定義しています。ただし CSS のマーキー機能の開発は<a href="https://www.w3.org/TR/css3-marquee/">放棄されました</a>。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>CSS の方が望ましいため廃止しましたが、後方互換性のため期待する動作を定義しています。ただし CSS のマーキー機能の開発は<a href="https://www.w3.org/TR/css3-marquee/">放棄されました</a>。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("html.elements.marquee")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{DOMxRef("HTMLMarqueeElement")}}</li>
</ul>