MB-Support

パソコン初心者のサポートページ

文字と画像を動かす方法 <marquee>

 marquee は、Internet Explorer では正しく動作しますが、対応していないブラウザもあります。



右から左に動かす  <marquee>〜</marquee>

動かしたい文字を <marquee>〜</marquee> で囲む。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee>右から左にうけながす</marquee>
</body>
</html>

ブラウザ


動かしたい画像を <marquee>〜</marquee> で囲む。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee>
 <img src="画像のパス" align="middle" />「ルパンが脱獄した〜!!」
</marquee>
</body>
</html>

ブラウザ


左から右に動かす  <marquee direction="right">〜</marquee>

<marquee> 内に direction="right" を追加する。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee direction="right">左から右にはうけながさない</marquee>
</body>
</html>

ブラウザ


左右往復させる  <marquee behavior=alternate loop="往復させる回数">〜</marquee>

<marquee> 内に behavior=alternate loop="往復させる回数" を追加する。数字を -1 にすると無制限になる。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee behavior="alternate" loop="-1">チャラチャチャチャラチャ〜</marquee>
</body>
</html>

ブラウザ


右から左にスクロールさせ左で止める。  <marquee behavior=slide>〜</marquee>

<marquee> 内に behavior="slide" を追加する。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee behavior="slide">右から、右から、何かが来てる</marquee>
</body>
</html>

ブラウザ


上から下にスクロール。  <marquee direction="★">〜</marquee>

<marquee>内にdirection="★" を追加する。★ には down(上から下)、up(下から上)を指定します。 height="" を加えると高さを指定する事ができます。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee direction="down">
MB-Support<br / >
パソコン初心者のサポートページ<br />
ホームページの作り方
</marquee>
</body>
</html>

ブラウザ


応用編  スクロール速度を変更する。scrolldelay="*" *に数字を入れる。

<marquee>内にscrolldelay="*" を追加する事により、スクロール速度を変更できます。 「1」が最も早いです。1 〜 99 までの変更は、変化がありません。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee scrolldelay="1">セナ</marquee><br />
<marquee scrolldelay="100">中嶋</marquee><br />
<marquee scrolldelay="150">鈴木</marquee><br />
<marquee scrolldelay="200">片山</marquee>
</body>
</html>

ブラウザ


応用編  <marquee>〜</marquee> 入れ子。

左右を往復する <marquee behavior="alternate">〜</marquee> を、<marquee direction="down" behavior="alternate">〜</marquee> で囲むと、上下左右に奇妙な動きをします。 さらに、それぞれの <marquee> に、scrolldelay="*" でスピードを設定可能です。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<marquee direction="down" behavior="alternate">
 <marquee behavior="alternate">
  <img src="画像アドレス" width="画像の横幅" height="画像の縦幅" />
 </marquee>
</marquee>
</body>
</html>

ブラウザ




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項