<?xml version="1.0" encoding="utf-8"?>

<article format="2002-03-05">
<article_head>
	<article_id>d10419</article_id>
	<article_addr><sect>2</sect><subsect>19</subsect></article_addr>
	<article_subj>CSS Tips: バナーをふんわり浮かばせる方法</article_subj>
</article_head>

<article_body>
<p>使用前↓　こんなへなちょこなバナーも‥‥</p>
<div style="background-color:white;margin:20px 50px;padding:20px 50px;border-style:solid;border-width:1px;border-color:silver;">
<div><img src="../../../soft/niseharuna/nh_free.png" alt="Free is Priceless" width="200" height="40" /><br />&#160;</div>
<div><img src="../../../about/banner1.png" alt="妖精現実 フェアリアル" width="200" height="40" /><br />&#160;</div>
</div>
<p>使用後↓　おっ、ちょっぴり高級感が！？</p>
<div style="background-color:white;margin:20px 50px;padding:20px 50px;border-style:solid;border-width:1px;border-color:silver;">
<div class="banner"><img src="../../../soft/niseharuna/nh_free.png" alt="Free is Priceless" width="200" height="40" /><br />&#160;</div>
<div class="banner"><img src="../../../about/banner1.png" alt="妖精現実 フェアリアル" width="200" height="40" /><br />&#160;</div>
</div>
<p>バナー（旗）というのは、名前の通り、なにかの主張をかかげる旗印です。↓こういうのは、その端的な例でしょう。</p>
<div class="center"><img src="../../../image/touchou.gif" alt="盗聴法反対" width="80" height="78" /></div>
<p>また、ご存知のように、（とくにお気に入りの）サイトへのリンクを張るとき、そのサイトへの敬愛をこめてリンク先のバナー（ロゴ、ボタン）をリンクボタンにすることもよくあります――バナーをクリックすると、そのバナーのサイトに飛べるっていうおなじみのパターン。単なる「事務的」な参考リンク先なら、ふつうの文字のリンクでいいけれど、個人的に愛着のあるサイトだと、そこのバナーを使ってみたくなることも多いと思います。これも「わたしは、このバナーのサイトを応援してます」みたいな一種の主張ですよね。</p>
<p>あるいはまた、自分のサイトのリンク集のページを、カラフルで楽しくする、という意味あいもあるかもしれません。おもしろいサイトとかを発見して、そこのバナーを持ち帰り、バナーコレクション（？）が増えてゆくのは、それなりに楽しいもの。とくにバナー自体が美術的にすてきだったりすると、珍しいきれいな切手を収集するような喜びがあるかもしれません‥‥。</p>
<p>バナーの大きさ、画像形式は、いろいろですが、（少なくとも日本では）<em>200x40ピクセル</em>というのが、ひとつのディファクト・スタンダードになってるようです。↓この大きさです。</p>

<div class="center"><img src="../../../soft/niseharuna/nh_free.png" alt="Free is Priceless" width="200" height="40" /></div>

<div class="center"><img src="../../../about/banner1.png" alt="妖精現実 フェアリアル" width="200" height="40" /></div>

<p>同じバナーでも、次のように影をつけて、バナーがふんわり宙に浮かんでいるような感じに表示させると、ちょっとクールかもしれません。上の表示例と下の表示例を見比べると、下の表示例のほうが、見栄えがいいでしょう――CSSに対応しているブラウザ（IE4、IE5、ネスケ6）では、簡単にこんなことができます。ちょっとしたトリックを使えば、CSS対応がめちゃくちゃなネスケ4でも、これを実現できます。CSSに対応してないブラウザで見ても、単に影がつかずにふつうに表示されるだけで、エラーになったりしないのでご安心ください。（<small>細かいバージョンの違いやOSや環境によっては、微妙に表示がずれるかもしれませんが、大きな不具合には、ならないと思います。</small>）</p>
<div style="background-color:white;margin:20px 50px;padding:20px 50px;border-style:solid;border-width:1px;border-color:silver;">
<div class="banner"><img src="../../../soft/niseharuna/nh_free.png" alt="Free is Priceless" width="200" height="40" /><br />&#160;</div>
<div class="banner"><img src="../../../about/banner1.png" alt="妖精現実 フェアリアル" width="200" height="40" /><br />&#160;</div>
</div>

<p>これは、いわゆるコロンブスの卵ってヤツで、じつは少しも高級なテクニックじゃありません。下にあるような「影」の絵を「背景画像」に指定してるだけです。単純な発想でしょう？</p>

<div class="center"><img src="../../../image/zz2.jpg" width="210" height="50" alt="zz2.jpg" /></div>

<p>いくつのバナーに「影つけ」しようが、影の部分は、このたった835バイトのjpeg画像ひとつを使いまわせるので、少しも重くなりません。上の例では、バナーの大きさが 200x40 かつバナーを表示する場所の背景色は白、でないときれいになりませんが、興味あるかたは、この発想を参考に、各自ほかのパターンにも応用してみてください。ここでは、上の画像の使い方を説明してみます。200x40のバナーなら、基本的にどんなバナーにも、この方法を適用できると思います。――もともとのバナーが、<br />
<code>&lt;img src=&quot;banner.png&quot; width="200" height="40" alt="banner"&gt;</code><br />
というコードだとして、それをふんわり浮かせるには、次のようにimgタグをdivタグで囲って、divタグのclassを指定してください。classの名前は自由ですが、ここでは仮にhoverとしてます。<br />
<code>&lt;div class=&quot;hover&quot;&gt;&lt;img src=&quot;banner.png&quot; width="200" height="40" alt="banner"&gt;<em>&lt;br&gt;&amp;nbsp;</em>&lt;/div&gt;</code></p>
<p>上の例をまねて、HTMLのソースをちょっといじるのは、そんなに難しいことじゃないでしょう。なお、<em>&lt;br&gt;&amp;nbsp;</em> は、本来、無意味な（書くべきでない）要素ですが、ネスケ４のご機嫌をとるためのものです。これを書かないとネスケ４では期待通りの効果がでません。</p>
<p>あとは、スタイルを次のように指定するだけ。<br />
<code>
&lt;style&gt;&lt;!--<br />
.hover{<br />
background-image:url(zz2.jpg);<br />
background-repeat:no-repeat;<br />
height:50px;width:220px;<br />
}<br />
--&gt;&lt;/style&gt;
</code></p>
<p>スタイル指定の意味がよく分からないかたは、とりあえず、このワザを使いたいページの &lt;head&gt;部分に、そのまま上のコードをコピペするのでもOK。また、ある程度以上お分かりになるかたは、次の点に注意してください。背景イメージのURLは、スタイルシートがある場所からみたパスです。しかし、ご存知のかたも多いと思いますが、ネスケ４では、スタイルシートが読み込まれるHTMLからのパスを書かないとうまく行きません。この問題を回避するには、URLをhttp://から絶対的に指定するのがいちばん簡単ですが、ネスケ４のことは、もう無視するのが正解かも‥‥。</p>
<p>zz2.jpg というのが、影の部分の画像で、上にあるヤツです。自作するのがメンドウなら、上の影の絵をご自由にお持ち帰りください☆　CSSにまだ不慣れなかたは、とりあえず、このワザを使いたいHTMLファイルがあるのと同じディレクトリに zz2.jpg をアップして、上のコードをそのまま使えば、たぶんうまく行くと思います。</p>
<p>このアイディアは単なる視覚的効果だけで情報の本質とは無関係ですが、同じ情報（バナー）でも、ちょっとした工夫で印象が変わり、伝えたいことがより明確に伝わる……ということは、よくあるものでしょう。なにより、CSSを使うと、いろいろおもしろいことができるわけで（以前にも無料ホームページの広告バナーをむにゃむにゃする方法を紹介しましたが‥‥）、実用的にどうこう、本質的にどうこう、というのとは別に、いろんなアイディアを試すのは楽しいものでしょう。</p>
<p>いつものことですが、上のコードやアイディアは版権フリー（妖精現実のオリジナル）です。改変、改良、応用など含めて、ご自由にお使いください。</p>
<p><small>ついでながら、「バナー」という字は banner で母音はａ、「ボタン」という字は button で母音はｕ。バナーのことをボタンともいうし、両方ｂから始まっているので少し混乱しやすいのか、ときどき、"bunner" と書いてるのを見かけます。べつに意味が分かればいいので、ちょとした綴り字の間違いに神経質になる必要は少しもありませんけど、まぁ、学校の試験とかにも出るかもしれない基本単語なので、この機会にまとめて覚えておくと吉。bannerのaはcatのaと同じでアとエのあいだのような、ひしゃげた感じの音、buttonのuはrunのuと同じで、くちをあまりひらかずに、くちの奥のほうから出すちょっぴりオに近い鋭い音。――無料ソフトの<a href="http://www.faireal.net/soft/babylon/">バビロン</a>（おすすめ）で正しい発音を耳で聴いてみてください。だいたいの発音が分かっていれば、綴り字も覚えやすくなるはず。</small></p>
<!--
<p>2001-04-19 今朝は、たまっていた<a href="http://mion.wisnet.ne.jp/bbs/1/">掲示板１</a>｜<a href="http://mion.wisnet.ne.jp/bbs/2/">掲示板２</a>のレス書きをしたので、更新できませんでした。掲示板２のほうで、なにげに、<a href="http://mion.wisnet.ne.jp/bbs/2/?look=203">おすすめの本</a>を書いてみました。日本では、あまり知られてないかもですけど、ユリヨ・コッコは日本語版も出てます。フィンランドではムーミンとならんで小学校の国語の教科書にも出て、ある意味、ムーミンの先輩です。</p>
-->

</article_body>
</article>
