MARQUEEにスタイルシートを指定

background-color:#FCF

MARQUEE属性の BGCOLOR の代わりに使用できます。

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { background-color: #FCF; }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

background-image:url(xxx)

※ ソース内容のxxxは画像ファイル名

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { background-image:url(../img/starBg.png); }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

width: 60%

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { width: 60%; }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

height: 60px

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { height: 60px; }


   *** BODY要素内 ***

<MARQUEE direction="up">マーキーだよん！</MARQUEE>

margin-left: 50px　margin-right: 50px

MARQUEE属性の HSPACE の代わりに使用できます。

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { margin: 0 50px; }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

margin-top: 30px　margin-bottom: 30px

MARQUEE属性の VSPACE の代わりに使用できます。※ 現状ではこの指定は無視されます。（IE5.5で確認）

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { margin: 30px 0; }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

padding: 20px（スクロール方向が左右方向の場合）

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { padding: 20px; }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

padding: 50px（スクロール方向が上下方向の場合）

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { padding: 50px; }


   *** BODY要素内 ***

<MARQUEE direction="up">マーキーだよん！</MARQUEE>

border: 5px solid #F09

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee { border: 5px solid #F09; }


   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

position: absolute　top: 50px　left: 100px

※ position:absolute(またはrelative)を指定してwidthを指定しない場合にはwidth:100%と解釈されるようです。

| 実行結果 |

◆ソース内容

   *** CSS ***

marquee {
   position: absolute;
   top: 50px;
   left: 100px;
}

   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

MARQUEE要素に指定

MARQUEE要素に直接スタイルシートを指定してみましょう。MARQUEE要素をサポートしているブラウザならばスタイルが反映される事が期待できますが、サポートしていないブラウザならばスタイルは反映されず、レイアウトが大きく違ってしまうかもしれません。

比較 → 親要素に指定

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

marquee {
   color: #F00;
   background: #FCF;
   width: 300px;
   padding: 15px;
   border: 3px solid #C0C;
}

   *** BODY要素内 ***

<MARQUEE>マーキーだよん！</MARQUEE>

親要素に指定

MARQUEE要素自体にスタイルシートを指定せずに、MARQUEE要素の親要素にスタイルシートを指定してみましょう。スタイルシートを可能な限り親要素に指定することによってMARQUEE要素をサポートしないブラウザでもレイアウトが大きく変わらずに済むかもしれません。

比較 → MARQUEE要素に指定

◆実行結果

マーキーだよん！

◆ソース内容

   *** CSS ***

div.marquee {
   color: #F00;
   background: #FCF;
   width: 300px;
   padding: 15px;
   border:3px solid #C0C;
}

   *** BODY要素内 ***

<DIV class="marquee">
<MARQUEE>マーキーだよん！</MARQUEE>
</DIV>