出産前後の痔にはご注意!

こんにちわ。
photoshopで半透明の画像を作り、
PNG(PNG-24)で保存しました。

それを自分のブログのサイドバーの背景にしたところ、
Macでは半透明で表示されたのに(プラウザはIE)
Winでは半透明で表示されませんでした(ブラウザはIE)

保存の仕方に問題があるのか、
タグに問題があるのか、、、ちなみにスタイルシートには↓↓

background : url("画像のURL") top left repeat;


入力しました。

どなたかアドバイスお願いします!!

このQ&Aに関連する最新のQ&A

A 回答 (6件)

透過色 PNG を 256 色で保存していないと背景色が IE で透過されません。


BMP などから形式を変換したときに問題の起こる場合があります。

…と簡単なところを説明してみたり。お役に立てれば幸いですが…。
    • good
    • 0

IE5.5やIE6では透過PNGはDirectXを使って表示する事が出来ます。



#2の方の紹介のサイトの別ページにもあるのですが
「AlphaImageLoader」機能を利用して

.クラス名 { background: url("画像.png") top left repeat; }
とは別に
.クラス名 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像.png'); }

とスタイルを指定する事で表示が出来るようになります(DirectXが有効になっている事が条件ですが)。が、全てのブラウザで同一の表示を実現させるためにはハックを使ったりといろいろ面倒かも知れません。

参考↓
http://www.minc.ne.jp/~konda/new/png/urawaza02.h …

FedoraCoreのサイトがスタイルシートの基本的な使い方がうまいと思うのでそちらも参考にどうぞ
http://fedora.redhat.com/
上記サイトのCSS
http://fedora.redhat.com/css/layout.css

参考URL:http://www.minc.ne.jp/~konda/new/png/urawaza02.h …
    • good
    • 0

#2で掲示したURLちょっとアクセスするの待って。


ドメインがMicrosoftじゃなくthesourceofallevilなのがちょっと気になっている

http://www.microsoft.com/windows/ie_intl/ja/ie7/ …

の方が安全。
    • good
    • 0

IE7ではPNGの改善されるようなので、待つのも手ですが(下記URL1番目参照)。

ただ今はベータ版で安定していないのでインストールはあまり
お勧めできません。最もほとんどの人は入れていないので公開を前提とするホームページなどには不向きかもしれませんが。

どうしてもと言うときは、下記URL2を参照してください。

参考URL:https://blogs.msdn.com/ie/archive/2005/4/26.aspx …
    • good
    • 0

自信なし。


=======
PNG についてあれこれ
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/P …

>Internet Explorer (Windows)
3.0 以前ではまったく表示できません。4.0 以降で対応。透過は 1bit のみ。アルファ透過 PNG には IE6 になってもあいかわらず未対応で、半透明な透過部分が灰色になっちゃいます。

>Internet Explorer (MacOS/MacOSX)
5.0 以降で対応。アルファ透過、埋め込みガンマ、プログレッシブ表示など、対応状況も良好。 4.5 以前は表示さえできませんでした。
==================
というわけで対応状況に差があるのが原因と考えられます。
実際にはVMLだとか他の技術を使って擬似的に実現することが多いようです。
http://www.minc.ne.jp/~konda/new/png/urawaza04.h …

一方、
http://thesource.ofallevil.com/windows/ie_intl/j …

>透過 PNG のサポート
開発者の間で好んで使われているPNG 画像フォーマットのアルファ チャンネル透過がサポートされ、リッチで独創的な Web サイトを簡単に作れるようになりました

IE7で対応するとか何とか。
    • good
    • 0

 IEは透過PNGに対応してないって聞いたことありますよ。


 GIFのライセンス期限も切れて、もう対応させる理由もなくなっちゃいましたしね。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像の背景を透明にしたい

HTMLで<img src=>を使ってロゴ画像を貼り付けました
その後背景の画像をSSCで書いたのですが
ロゴの本来透明な部分が透明になりません

よくわからなかったので、フォーマットはPNGとGIFで試しましたがだめでした
JPGは背景を透明にはできなかったですよね?

そもそも背景を透明のまま保つことは不可能なのでしょうか?

Aベストアンサー

こんにちは、再び失礼します。

GIMP
http://hp.vector.co.jp/authors/VA025935/

こちらのヘルプを見てみましたが、PNGもGIFも透明度に対応している、と書かれています。
(GIFはGIMPのバージョンによっては入っていないかもしれないと書かれていましたが)

というわけで、直接の回答でなくて申し訳ありませんが、お使いのソフトは透過処理に対応しているようです、と申しあげておきます。

レイヤーの統合とかは関係ないですよ。
完成した画像の背景が透明になっているかどうか、そしてそれを保存するときのやりかたが問題です。

保存するときに背景の透過、とか透明、とかそういった選択部分はありませんか?
または環境設定などで行うのかもしれませんが、具体的な方法についてはご存知のかたにぜひともお答えいただきたいところです。

QPNGで保存しても透過できない。。

IE6.0です。PNG-24で透明部分にチェックをいれ、保存しているのですが、どうしても水色の枠が生じます。。

ちなみにGIFで登録するとうまくゆきます。

以前の質問を検索し、No.757662の質問:pngが透明化できない?>win で、回答として
・透過pngにもいろいろあるようですが
Windows版のIEの場合
http://www5.plala.or.jp/shinspsy/freesoft/pngedter.htm
ではパレット(だったかな?)でないと透過しないみたいです。Netscape6以上なら問題なく透過するようです。

とあり、質問者の方も納得されていましたが、初心者の私には理解することができませんでした;すいませんがどなたかどうすればよいか教えてください。

ちなみに透明の背景の上に切り取った画像を貼り付けてつくりました。

Aベストアンサー

PNG-24 の透過はそんなもんですよ。
参考URLそのままですが
> 注:レイヤー表示機能をもたないブラウザでは、
> 正しく表示されません。

完全な透過画像にする為には PNG-8 にする必要があ
ります。

Photoshopで作成される場合は[インデックスカラー]
に設定して下さい。

参考URL:http://www.nichibun.net/old/itly/ac2001/ac0931/sample09.4.1.html

Q白い部分を透明にすることは可能ですか?

ペイントで白い部分を透明にすることは可能ですか?
やり方を教えてください。
ペイントじゃできないのかも教えてください。

Aベストアンサー

 残念ながらペイントでは、まわりが、白いままです。
 
 お使いのパソコンのOSが、一致するようでしたら
 
 無料のソフト「GIMP」(ギンプ)を使用することをおすすめします。

 ・Gimp2のダウンロードページ
 http://www.geocities.jp/gimproject2/download/gimp-download.html


 ・GIMP(ギンプ)の使い方
透過(透明な部分を作る技法)
 保存は、gifかpngの拡張子にして下さい

  http://www.geocities.jp/gimpmanual/manual.html

 ※jpgは、写真を構成するのが、目的な拡張子ですので
   まわりが、白くなり透明には、なりません。

Q透過GIFが表示されないんですが・・・

初めて自分のホームページに透過GIFを使い、いざアップロードしてみたら表示されていませんでした。他の普通の画像は問題なく表示されています。参考になるかと画像のプロパティを見たところ、使用不可とありました。透過GIFには使用できる環境が決まっているのでしょうか?

参考までに、OSはMEを使用、ブラウザはIE5.5です。

宜しくお願いします。

Aベストアンサー

普通のアップロードが駄目ということはありませんよ。。
前回はアップロードした場所が違ったために、
たぶん表示されなかったんでしょう。
オフラインできちんと表示されているのであれば、
そのままのファイル構造でアップロードすればいいわけです。

何で違う場所にアップロードしたのか???
画像はフォルダの中にあるのに、アップロードはHTMLファイルと同じ場所に・・・
なんてことはないですか?
フォルダの中にあるのなら、そのフォルダも作ってあげなくてはいけません。
FFFTPで、左でフォルダを選択して「↑」ボタンを押せば、
フォルダごとアップロードしてくれます。

また、左の画面(PC側)でフォルダを開いたら、
右(サーバー側)のフォルダも開いて・・・。とやっていますか?
何となく、違う場所にアップロードしちゃったんじゃあないかな~
って思いましたので、。

今回の問題は、透過、ミラーリングアップロード、の問題ではなく、
HTMLのファイルの記述と画像ファイルのある場所が一致しているかどうか?
の問題だと思います。
では、頑張ってくださいね。

↓ここからは蛇足です。

これを機会に、パスの記述を覚えては?
※width,height,border="0"は省略

■ファイルと同じ場所に画像
<img src="画像"> 例:<img src="gazou.gif">

■同じ階層のフォルダ(imageとする)の中
<img src="フォルダ名/画像"> 例:<img src="image/gazou.gif">

■1つ上の階層
<img src="../画像"> 例:<img src="../gazou.gif">

■1つ上の階層にあるフォルダ(image2とする)の中
<img src="../フォルダ名/画像"> 例:<img src="../image2/gazou.gif">

普通のアップロードが駄目ということはありませんよ。。
前回はアップロードした場所が違ったために、
たぶん表示されなかったんでしょう。
オフラインできちんと表示されているのであれば、
そのままのファイル構造でアップロードすればいいわけです。

何で違う場所にアップロードしたのか???
画像はフォルダの中にあるのに、アップロードはHTMLファイルと同じ場所に・・・
なんてことはないですか?
フォルダの中にあるのなら、そのフォルダも作ってあげなくてはいけません。
FFFTPで、左でフォル...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QJPGを背景を透明にする方法

フォトショップでJPGの背景をキレイに透明にしたいんですが、早くできる方法ありませんか?
消しゴムで地道に消すしかありませんか?

Aベストアンサー

単純に背景を透明にしたいのならアルファチャンネルなんて難しいことをしなくても、残したいモノ(サンプル画像の場合い車椅子)を投げ縄ツールなどで選択・コピーし、新規キャンバスに貼り付ければ選択された以外のところは透明になります。まずは簡単に矩形や楕円で試してみてください。

ただし、保存する時にJPEGにすると透明になるはずの部分は「白」になります。

「透明」が出来るのは「GIF,PNG,PSD」です。

使用しているPhotoshopのバージョンが不明なので出来ないかもしれませんが、「クイックマスクツール」を使用すれば色を塗る感覚で必要な部分だけを選択可能です。このツールはPhotoshopLEやElementsにはありません。
LEやElementsしか持っていないなら、[選択範囲] - [色域指定]で大雑把に選択して不要な部分を消しゴムで消していくしかありません。

更に作業効率を上げるためのアイテムとして「ペンタブレット」をお奨めします。ワコムの製品だとペンの頭がデフォルトで消しゴムになっているのでどのような作業状態でも「消しゴム」ツールがペンを持ち替えるだけで使用できます。

単純に背景を透明にしたいのならアルファチャンネルなんて難しいことをしなくても、残したいモノ(サンプル画像の場合い車椅子)を投げ縄ツールなどで選択・コピーし、新規キャンバスに貼り付ければ選択された以外のところは透明になります。まずは簡単に矩形や楕円で試してみてください。

ただし、保存する時にJPEGにすると透明になるはずの部分は「白」になります。

「透明」が出来るのは「GIF,PNG,PSD」です。

使用しているPhotoshopのバージョンが不明なので出来ないかもしれませんが、「クイックマス...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。


人気Q&Aランキング

おすすめ情報