- ベストアンサー
背景画像が透けて見えるボタンの作り方
ホームーページを作るにあたり、背景画像が透けて見えるメニューボタンを使いたく試していました。 最近よく使われているガラスボタンではなく、下の画像が本当に透けて見えるボタンです。 Fireworksで背景に使う画像をおき、その上にどのくらいの透明度が良いか調整しながら作っていました。 良さそうな感じでできたので、ボタンだけをコピーして新規作成でボタンを貼り付け、いざ書き出してDreamweaverで設定してみるとマットになっています。 周りを透明にしたいのではないのですが、書き出しの時に透明化の設定で透明を選んでみたり… 自分で分かる範囲で試したのですがどうにもうまくいきません。 画像はgif形式で保存しました。 どのような手順で、どのような形式の画像を作れば良いのか教えてください。 よろしくお願いいたします。
- みんなの回答 （14）
- 専門家の回答
質問者が選んだベストアンサー
私は独学ですよ。というか、仕事でやりながら覚えたという感じです。お金を出してスクールで学ぶ人も多いと思いますが、私はお金をもらいながら学びました。幸せ者ですね(^^) でも、仕事では納期やらなんやらで、細かい部分がおざなりになってしまいがちなので、自分のサイトなんかを作りながら 「どうやったらこんなことが出来るのだろう？」 「どうやったら効率よく表現できるだろう？」 なんてのが、結局は身になってきたのだと思います。 勉強！！なんて堅苦しく考えなくてもいいと思いますよ。 せっかくなんだから「なんでだろ？」「やった出来た！」って感じで楽しんじゃってください。 onyanさんも「なんでだろう」ってのを常にもってがんばってください。そうすれば、ちょっとづつでも前に進めますよ。 「まぁいっか」は無しでね(^^) それではこのへんで失礼します。
その他の回答 (13)
- tsucu
- ベストアンサー率62% (71/113)
一つ前の書き込みにしたということですよね。 これですよね？ body { line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; } <body>タグの定義を消してしまってますので、margin: 0 padding: 0;をCSSに追加してください。下記のようになります。 body { line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; margin: 0; padding: 0; } これで、隙間はなくなったと思います。
お礼
すごいです！思っていた通りにできました！ 相談サイトでこんなに親切で丁寧にご回答いただいたのは初めてで、本当に嬉しいです。 なんだか感動さえ覚えてしまいました。ありがとうございます。 tsucuさんとこれで最後かと思うとなんだか名残惜しいくらいです。 最後にもうひとつだけお聞きしても良いですか？ いまCSSの勉強をしているのですがなかなかはかどりません。 tsucuさんはどのように学ばれたのですか？ 何か良い方法やポイントはありますか？ すっかり別の質問になってしまい、こちらの趣旨と違って申し訳ないのですが、 こんなに使いこなせているtsucuさんに少しでも近づきたいな、なんて思ったので質問させていただきました。
- tsucu
- ベストアンサー率62% (71/113)
やはり、そうですか・・・。いや、デザイン的に何かしらコンテンツが入るからそういう記述になってるのかと深読みしましたが・・・はずしましたか。 当然、#bgでの指定（横幅900）と #main での指定（横幅900）が同じなので、下にすっぽり入って隠れてしまいます。だから見えなくなったのでしょう。 bodyの設定だけ変える、一つ前に書いた方法ではだめでしたか？ 具体的にbg.jpgとmain.jpgはどのように扱いたいのか教えてください。
お礼
今作っているページはサイトのTOPページになるのですが、 メイン画像の上にリンクボタンがあるというシンプルなものになります。 メイン画像以外はbg.jpgで色と模様のついたものを指定して、と考えています。 メイン画像は左右に対しては真ん中ですが、上下に対しては真ん中ではなく、上付けにしたいです。 教えていただいたものでリンクボタンは透明に、そして位置も固定されたのですが、 メイン画像の上に隙間ができてしまいました。 完全にお願いしてしまって本当に申し訳ないのですが教えてください。 よろしくお願いします。
- tsucu
- ベストアンサー率62% (71/113)
ちょっと追記します。 <body>タグへのバックグラウンド指定が気になりました。先ほど書いたもので、真ん中への固定は出来ますが、onyanさんの求めるデザインとは違うような気もします。 もしそうなら<body>タグへの width 指定は意味ないので、新しく <div>で囲んで背景指定してみてはどうでしょう。ついでに<body>の属性もCSSにしてしまいましょう。 body { line-height:1.4; font-family:Arial, sans-serif; font-size:0.7em; margin: 0; padding: 0; } #bg { margin-left: auto; margin-right: auto; width : 900px; color:#333; background:url(img/bg.jpg) repeat-x center top; } ■<body>部分 <body> <div id="bg"> <div id="contents"> <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> </div> </div> </body>
お礼
ご回答ありがとうございます！ いま記述されているCSSのbodyを、教えていただいたbodyと#bgで記述しなおし、 HTML部分の<body></body>を記述しなおすと言うことですよね？ 試してみたところbg.jpgが消えてしまい、真っ白になってしまいました。 （背景画像やボタンは残っています） なぜ消えてしまったのでしょうか…不思議です。 お手数おかけしますがよろしくお願いします！
- tsucu
- ベストアンサー率62% (71/113)
どのような画像が使われているかわからないので、的確なアドバイスは難しいのですが、bodyの margin と width は必要ないのでは？ margin は動作に関係ないので、残しておいてもかまいませんが。 下記の body 定義でどうでしょう？こちらの環境(IE6,Firefox)では真ん中に固定されましたよ。 body { line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; }
- tsucu
- ベストアンサー率62% (71/113)
なるほど。いろいろ方法はあると思います。 ■<head>のCSS記述部分に以下を追加してください。 古い#mainの記述（セレクタと宣言ブロック）は全て消してください。 #contents { margin-right: auto; margin-left: auto; background-image: url(img/main.jpg); background-repeat: no-repeat; width: 900px; height: 600px; } #contents #main { width: 543px; top: 350px; left: 123px; position: relative; } ■<body>のテーブル記述を全て消してください。 通常の（javascriptではない）方です。Javascriptの方は前回にならってidをclassにかえてください。 <div id="contents"> <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> </div> ちょっと検証は甘いですが、これでいけると思います。 今回はCSSで<table>タグの内容も行いましたが、テーブルタグにalign="center"を追加してもいいと思います。ようは、CSSの透過PINGに必要な部分だけを残しておけば、あとはonyanさんが通常行っているHTMLのレイアウトでそのまま使えると思います。
お礼
tsucuさん何度もありがとうございます(>_<) そしてお手をわずらわせてしまってすみません。 教えていただいたように記述したのですが、 やはりボタンがウィンドウサイズを変えるたびにあっちこっちと動いてしまいます。 現在はこのように記述しています。 [CSS] <style type="text/css"> <!-- body { margin-left: auto; margin-right: auto; width : 900px; line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; } img {border: 0; } #contents { margin-right: auto; margin-left: auto; background-image: url(img/main.jpg); background-repeat: no-repeat; width: 900px; height: 600px; } #contents #main { width: 543px; top: 350px; left: 123px; position: relative; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #bt1,#bt2,#bt3 { float: left; cursor: pointer; } * html #main #bt1 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt1.png); } * html #main #bt1 img { display:none; } * html #main #bt2 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt2.png); } * html #main #bt3 img { display:none; } * html #main #bt3 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt3.png); } * html #main #bt2 img { display:none; } </style> [HTML] <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="contents"> <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> </div> </body>
- tsucu
- ベストアンサー率62% (71/113)
＞ただ、ブラウザの大きさを変えるとボタンの位置がずれてしまいます。 これはブラウザのウィンドウ枠をドラッグして大きさを変更すると、それに伴ってボタンが動くってことでしょうか？ おかしいですねぇ。onyanさんのソース記述にあった position: absolute; をそのまま使っただけなんですが。現在の設定では位置は上から 350px 左から 123px に固定されている状態です。こちらの環境でも大きさを変えてズレていくことはないですよ。 ひょっとして、ウィンドウの大きさを変更しても常に真ん中に固定したいって意味ですか？ ずれるの詳細を教えてください。
お礼
背景画像はブラウザの大きさを変更しても真ん中に固定したく、 ボタンはリンクにしたいのでpositionで指定し背景に載せていました。 …これってそもそも間違っていたということですね(・_・;) ブラウザの大きさを変更しても背景が真ん中にきて、 さらにリンクボタンは背景画像に対して上から 350px 左から 123px に設定することはできるのでしょうか？？
補足
補足欄から失礼します！ ブラウザの大きさとは、ブラウザのウィンドウの大きさです。 よろしくお願いします。
- tsucu
- ベストアンサー率62% (71/113)
ちょっと訂正させてください。 先ほど、<div>に<a>を使用しておりましたが、ちょっと考えたら、下記の方法がシンプルでHTMLの文法違反もなくいけそうです。 <td>内を下記に変更してください。 リンクのない画像としてお使いの場合、先ほど書いたソースの<a>タグ部分を消して使えると思います。 ■標準 <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> ■Javascriptを使う方 <div id="main"> <a href="#" class="bt"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" class="bt"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" class="bt"><img src="img/bt3.png" width="180" height="50" /></a> </div>
お礼
ありがとうございます。訂正しました！ でもなぜかボタンの位置がずれてしまいます（？＿？） 先ほどお礼に書かせていただいた内容とも同じ質問になってしまうのかもしれないのですが、 ブラウザの大きさを変えるとずれてしまうのはどうしてなんでしょうか？
- tsucu
- ベストアンサー率62% (71/113)
IE6での表示はかなり特殊な方法になります。 この方法は指定されたボックス内の画像ををすり替えて表示させます。 具体的には<img>タグで指定している画像をCSSで見えないように設定して、IEの独自機能のFilterで画像を直接指定して描写します。 しかし、問題点としまして、IE6では<img>に定義した<a>タグが機能しなくなります。 透過PINGはちゃんと表示されても、onyanさんが行おうとしているボタンとしての機能が使えなくなるということです。 回避方法は、私の経験ではボックス自体に<a>タグを使うことなんですが、はっきり言ってHTMLの書き方としては正しくないです。主要ブラウザでは問題なく動作しますが、あまりお勧めできないです。 それを踏まえたうえで行ってください。 onyanさんの書き方に準じてCSSを適用しますと下記のようになります。 これはサイトで紹介されている方法です。透過PINGを全て記述する必要があります。 ■<head>タグ内の記述 <style type="text/css"> <!-- #main { position: absolute; top: 350px; left: 123px; width: 543px; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #bt1,#bt2,#bt3 { float: left; cursor: pointer; } * html #main #bt1 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt1.png); } * html #main #bt1 img { display:none; } * html #main #bt2 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt2.png); } * html #main #bt3 img { display:none; } * html #main #bt3 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt3.png); } * html #main #bt2 img { display:none; } --> </style> ■<td>タグ内の記述 <div id="main"> <a href="#"><div id="bt1"><img src="img/bt1.png" width="180" height="50" /></div></a> <a href="#"><div id="bt2"><img src="img/bt2.png" width="180" height="50" /></div></a> <a href="#"><div id="bt3"><img src="img/bt3.png" width="180" height="50" /></div></a> </div> Javascriptを使った方法もあります。こちらはいちいち個別に定義する必要はありません。 ■<head>タグ内の記述 <style type="text/css"> <!-- #main { position: absolute; top: 350px; left: 123px; width: 543px; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #main .bt { float: left; cursor: pointer; margin: 0; padding: 0; } --> </style> <!--[if IE 5.5000 | IE 6]> <style type="text/css"> .bt { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .bt img { visibility: expression("hidden");} </style> <![endif]--> ■<td>タグ内の記述 <div id="main"> <a href="#"><div class="bt"><img src="img/bt1.png" width="180" height="50" /></div></a> <a href="#"><div class="bt"><img src="img/bt2.png" width="180" height="50" /></div></a> <a href="#"><div class="bt"><img src="img/bt3.png" width="180" height="50" /></div></a> </div>
お礼
ご回答ありがとうございます！ 教えていただいたソースをそのままコピペしたところ 半透明のボタンができました＼(^o^)／ ただ、ブラウザの大きさを変えるとボタンの位置がずれてしまいます。 今のポジションが背景の左上からカウントしているからということでしょうか？ 質問と違った内容になってきて申し訳ありませんが教えていただけると本当に嬉しいです。 よろしくお願いします。
- tsucu
- ベストアンサー率62% (71/113)
＞で書き出し、作成したボタンを指定してIE6で確認したのですがマットなままです。 え～と、これが画像自体が透過しているが、IE6での表示で透過しないのかがわからないですね。 画像が透過していないようでしたら、ひょっとしてマットの指定を変な色にしてるのかもしれませんね。 最適化パネルを利用してPNG32を指定していると思いますが、横にマットっていうカラーボックスがありませんか？そこをクリックするとカラーリストが出てくると思います。そこで右上の赤い「／」ボタンを押して透明を選択してください。 Dreamweaver上では透過していますか？Dreamweaverのバージョンは？ 先日も書きましたが、まずは書き出したPNGファイルをFireworksで開いてみてください。それで透過しているようなら画像自体に問題はないということです。 IE6では正式に透過PNGには対応していません。これはまったく見れないのではなく透明度が反映されず、要するにマットになります。 これは #2 の方が紹介されているサイトの手法を用いることで解決できます。
お礼
ご回答ありがとうございます。 教えていただいたとおりマットを透過に設定してみたところできました！嬉しいです！！ ただ、できたのはFirefoxのみでIE6では以前教えていただいたサイトのやり方が必要なのですね。。。 CSSはすでに挫折気味だったのですが何とか理解してやってみようと思ったところ、試してみる前に分からない部分が出てきてしまいました。 サイトの「CSS解説」にある、 「.sampleの高さと幅を、用意したpng画像と同じサイズに固定します。つづいてフィルターを使ってpng画像を読み込みます」なのですが、 今回設定したい透明ボタンは横並びで３つなのです。 それぞれにリンクをはりたいのでひとつの画像としてではなく ばらばらに設定したいのですが、その場合続けて書いてしまってよいのですか？ 今現在のソースは下記のものでtableで組んでいます。 その中に入れることもできますか？ お手数おかけしますがよろしくお願いいたします。 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table style="width:900; height:600" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0"> <tr> <td background="img/main.jpg" width="900" height="600"> <div style="position: absolute; top: 350px; left: 123px; width: 540px;"><img src="img/bt1.png" width="180" height="50" /><img src="img/bt2.png" width="180" height="50" /><img src="img/bt3.png" width="180" height="50" /></div></td> </tr> </table>
- tsucu
- ベストアンサー率62% (71/113)
＞フィットしようとしたのですが、背景画像の大きさに ＞合わされていてボタンのサイズになりません。 切り抜くのであれば、ツールパレットの切抜きを使ってもいいと思いますが、スマートなのは対象のレイヤー以外を非表示にして ファイルメニュー＞修正＞キャンバス＞キャンバスを切り抜き で、サクっといけます。 もっといえば、切り抜かなくても、スライス指定して書き出し時のみ切り出すようにしてもいいと思います。 ＞またキャンバスカラーは透明で、書き出しはPNG32で良いのでしょうか？ それで、問題ないと思います。
お礼
ご回答ありがとうございます。 先ほど教えていただいたように ・キャンバスを切り抜き ・PNG32 ・キャンバスカラー透明 で書き出し、作成したボタンを指定してIE6で確認したのですがマットなままです。 どうしても半透明で下の背景が透けてくれません。 いったい何が原因なのでしょうか？ 本当に何度も申し訳ありませんが、どうかご教授ください。 よろしくお願いいたします。
- 1
- 2
お礼
職場で学ばれたのですね。 実はこんなにスキルがないのですが、私も似たようなことを仕事としています。恥ずかしながら。。。 それだけにできない自分に焦ってしまいジタバタもがいていました。 でもtsucuさんのおっしゃるように好奇心をもってやってみます。 そして楽しんで前進していきます(^_^) 今回は質問の回答以上の色々なものをいただいた気がします。 悩んだり迷っていたときだったので、tsucuさんのコトバは今後の大きな支えになってくれそうです。 姿形も見えないPCをかいしての繋がりだけど、とっても意味のある時間でした。 本当にどうもありがとうございました。 私の想像するお仕事であればきっと忙しいと思います。 お体に気をつけてがんばってくださいね（*^_^*）