XHTML/CSS・トップ | 付録・目次

●カラフルなマーキーの作り方

 CSSのスタイルシートを使って、カラフルなマーキーを作ってみましょう。マーキー(marquee)とは流れるスクロールメッセージ、文字が流れる1行テキストボックスのことです。多少の知識は必要ですが、自由にデザインをカスタマイズできます。(注意事項あり)当サイトでスタイルシートを学んでいる方なら簡単に変更できると思います。動作、レイアウト確認はWin IE(Ver.6.0)とNスケープ(Ver.7.1)です。(ただし、バグは多いです。)

■サンプル

  ここに適当なメッセージを入れてください

【CSS】

<style type="text/css">
<!--
div {
 margin-left: 5%;
}
.sample {
 background-color: #ffffff;
 color: #000000;
 font-size: 0.8em;
 font-family: "MS UI Gothic", sans-serif;
 font-style: italic;
 border: double 8px #ff00ff;
 text-decoration: blink;
 width: 30em;
 height: 1.2em;
 padding-top: 0.2em;
 padding-bottom: 0.1em;
}
-->
</style>

■↑コピー&ペースト↓

 HTML文書の<head>〜</head>間に上記のソースを貼り付けてください。(正確には<title>〜</title>の下)もし、位置がわからないときはここのWebページのHTMLソースをご覧ください。

 注意する点としては、CSSのソース(<style>〜</style>)の真ん中がインデントされていますが、HTML文書に貼り付けると、作成ソフトによっては、インデントが動いてしまうことがあります。その結果、スタイルが反映されないことがあります。インデントは半角スペース二つ分です。上手くいかないときは確認してみてください。

■CSSプロパティの解説↓

background-colorは背景色、colorは文字色、font-sizeはフォントの大きさ、font-familyはフォント名、font-styleは斜体、borderはボーダー(枠線)関連、widthはマーキーの横幅、heightは高さをそれぞれ指定するプロパティです。詳しい使い方は関連ページを参照にしてください。

 そのほかとして、padding-topは流れる文字列とマーキーのボーダーとの間にある上の空間、padding-bottomは下の空間のことです。heightを指定した場合はパディング(padding)も指定してください。Win IEでは適度に見えていでもNスケープのブラウザでは文字列がテキストボックス内の上下位置に対して、アンバランスな場合がありますので指定したほうが良いでしょう。上のパディングを下のパディングより大きめに取るとバランス良く見えるようになります。text-decorationの値のblinkは文字の点滅のことですが、対応するか否かはブラウザの種類によります。Win IEでは有効ではありませんが、Nスケープで見ると面白いので付け加えてみました。

 通常は、body要素で指定した背景色とテキスト色がマーキーにそのまま適用されます。同じ配色でよければbackground-colorとcolorの書式は取り払ってください。そのほかも含め、必要がなければ取り払ってください。

 使える単位についてはエム(em)、エックス(ex)、ピクセル(px)、パーセント(%)の相対値以外にインチ(in)、センチメートル(cm)、ミリメートル(mm)、ポイント(pt)、パイカ(pc)などの絶対値も使えますが、各自でご確認ください。


【HTML】

<div><marquee class="sample" width="400">  ここに適当なメッセージを入れてください</marquee></div>

■↑解説↓

<body>〜</body>間の任意の場所に貼り付けてOKです。div要素以外の要素で囲っても構いません。また、sampleはクラス名で作者が任意の名前を付けられます。.sample(頭にピリオドが付いています)の代わりに、marqueeとしても構いません。クラス名およびID名の使い方については関連ページを参照にしてください。

<style type="text/css">
<!--
div {
 CSSの書式
}
marquee {
 CSSの書式
}
-->
</style>

■文字列のループ↓

 マーキーの表示文字列において、繰り返し回数(ループ)を指定したい場合は以下のように記述します。

<div><marquee loop="4" width="幅">〜〜</marquee></div>

※数字を変更することで表示回数が変わります。(注:ループの指定はNスケープには無効です。指定しても連続して表示されます。)

<div><marquee loop="0" width="幅">〜〜</marquee></div>

"0"の場合はゼロ回ではなくて、ループを指定しないのと同じで連続となります。(以下と同じです。)

<div><marquee width="幅">〜〜</marquee></div>

■注意事項↓

 バグという訳ではありませんが、マーキー(marquee)はもともと IE(Internet Explorer)の拡張機能だったため、ブラウザによる受け止め方の違いはあります。また、ほかの要素とは違った振る舞いをすることがあります。筆者の環境"HTML 4.01 Transitional+Win IE(Ver.6.0)+Nスケープ(Ver.7.1)"でわかっていることをまとめると次のようになります。

 marqueeに左右のマージン(余白)を適用するとWin IEでは指定した方向の要素のマージンが加算されますが、Nスケープでは加算されません。例えば、ここのWebページではp要要素(段落)に5%の左マージンを設けていますが、marquee要素に<p>〜</p>で囲んだ場合、Win IEとNスケープでは左右の位置の見え方が異なって見えます。さらに上下のマージンはNスケープでは反映されますが、Win IEでは反映されません。そこでmarquee要素をdiv要素で囲むことにしました。そのdiv要素に上下のマージンを指定した場合、マーキーの文字列はWin IEでは影響を受けませんが、Nスケープのブラウザは影響を受けます。例えば、マーキーのサンプルはh3の見出しの下に配置していますが、そのh3の見出しには1emの下マージンを設けています。div要素に1emの上マージンを設けたところ、マーキーの文字列は1行テキストボックスの外(下)に大きくはみ出してしまいました。従って、上下マージンは上下方向の要素にマージンがかちあわない場合のみ指定してください。ここではdiv要素の解説ですが、marquee要素に直接マージンを適用しても同じです。

※Webページにそのほかのdiv要素がある場合はdiv要素にクラス名かID名を使うと良いでしょう。

 CSSのソースでwidth: 30emと、マーキーの横幅を指定しているのにmarqueeタグでも width="400"と幅を指定しているのはNスケープ対策です。Win IEでは影響ないのですが、marquee要素に背景色、ボーダー(border)の両方、またはどちらか片方のCSSの書式を指定したところ、Nスケープのブラウザではマーキーの1行テキストボックスの領域に塗られるのではなく、その要素の下の領域に塗られてしまいます。その結果、流れる文字列はマーキー内ではなく、その下にある要素の内容領域を流れていきます。従って、流れる文字列がマーキーの中に入ったとき、文字列が表示されることになります。(結果的に流れるタイミングが遅い)これを解消するにはCSSの書式とmarqueeタグの両方に横幅を指定する必要があります。どちらか片方だけを指定しても失敗します。そのほかの方法として、背景色がbody要素で指定した配色と同じでよければ、marqueeタグに width属性だけを指定すればOKです。ただし、その場合、ボーダー(border)も指定できないことに注意してください。

div { margin-left: 5%; }とは左マージン(余白)5%のことで、ウィンドウの左枠から5%の余白を取っています。もし、マーキーを中央に配置したい場合は別項の「ブロック要素をセンタリングする」で指定するか非推奨ですが、center要素を使ってください。( center要素はHTML 4.01 Transitional、Framesetのみ使用可)

■もっと簡単なマーキーを作る↓

■関連ページ↓

 ※そのほか、スタイルシートのコーナーを参照

 ※JavaScript&CSSで作る「1行テキストボックス」もご紹介しています。

XHTML/CSS・目次 | 付録・目次

Copyright (C) 2005-2007 http://www.xml.vc/