https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

文字や画像をスクロールする

<marquee>文字や画像</marquee>で文字や画像を スクロールさせることができます。

文字や画像がページの端から端まで移動するのを繰り返します。
属性を指定することでスクロールの方向やスピードを変える事もできます。 マーキータグはNetscape Navigatorで対応していないバージョンがありますが 現在ならIE以外にFirefoxやGoogle Chromeのような新しいブラウザにも対応しています。

【ブラウザ表示】

文字や画像
ソース

<marquee>文字や画像</marquee>

マーキータグには以下のようなオプションを複数設定できます。 オプションの組み合わせでいろいろな動きができるようになります。

オプション 説明
width="数字" 移動する範囲(幅)
height="数字" 移動する範囲(高さ)
hspace="数字" 移動範囲の左右の余白を作る。
vspace="数字" 移動範囲の上下の余白を作る。
title="文字" 移動する文字にマウスを乗せるとタイトルを表示できます。
bgcolor="色" 移動範囲の背景色を指定する。
loop="数字" 移動する回数を指定する。loop="-1"もしくはloop="infinite" と指定するとこのオプション無しの時と同様に無限に移動を繰り返す。
behavior="動き方" 右から左へ移動の繰り返しのscroll
右端から左端へ移動で停止するslide
往復のalternate
の3通り指定できます。
direction="移動の方向" left(右→左)、right(左→右)、up(下→上)、down(上→下)の4通り 指定できる。
scrolldelay="数字" 何秒間隔で移動するかを指定します。(ミリ秒単位) この値が大きくなれば遅くなります。
scrollamount="数字" 何ピクセル移動するかを指定します。この値が大きくなれば 速くなります。

これらのオプションを加えると以下のようになります。

ソース ブラウザ表示
<marquee behavior="scroll" direction="up" height="100">下から上へ移動</marquee> 下から上へ移動
<marquee behavior="scroll" direction="down" height="100">上から下へ移動</marquee> 上から下へ移動
<marquee behavior="slide" loop="5" direction="left" width="100"> 画像</marquee> ufo
<marquee behavior="alternate" direction="down" height="100">上から下の往復 </marquee> 上から下の往復
<marquee hspace="15" vspace="15"> 左右上下に15の余白</marquee> 左右上下に15の余白
<marquee title="スクロールしています" direction="right" >タイトル付き</marquee> タイトル付き
<marquee bgcolor="blue" width="100" height="100">★★ </marquee> ★★
<marquee scrollamount="40">画像</marquee> posttorack
<marquee scrolldelay="500" direction="right" width="100" height="100">亀さん</marquee> 亀さん
<marquee scrolldelay="500" scrollamount="50" height="100"><font color="yellow">★ </font></marquee>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

属性を組み合わせる
マーキータグと文字を並べる

HTMLタグ一覧のページに戻る