HTMLを始めたばかりの初心者です。
スタイルシートを使ってメール用のひな形を作っているのですが、わからないところがあるので教えてください。

どの本やサイトを見ても背景色を2種類表示させる指定が載ってないのです。
そういったことは可能ですか?
たとえば上から70ピクセルをAの色で表示させ、その下から全てをBの色で表示させたいのです。さらにAの色の上に背景透過性の画像を横並びで表示させたい・・(画像の背景色は使いたくないので)。
メールのひな形ですのでテキストは一切入力しません。画像のみです。

稚拙な質問ですみません。よろしくお願いします。

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

A 回答 (2件)

ひとつの要素に二つの背景色を与えることはできません。



ですから、BODY要素に背景色Bを与え、上から高さ70pxのDIV要素(スタイルコンテナ)を用意して、そこに背景色Aと背景画像(透過指定したGIFになるでしょうね)を与えてください。

<BODY style="background-color:#000000;color:#FFFFFF">
<DIV style="height:70px;background-color:#FFFF00;color:#000000">
<P>背景色A</P>
</DIV>
<P>背景色B</P>
</BODY>

#例では背景画像入れてません。書くの面倒だったので(^_^;)
    • good
    • 0
この回答へのお礼

ありがとうございました。
なにせ初心者なので書いてあることはわかっても、いざ自分で画像入れて入力文字位置をいれて~となると、なかなかうまくいかなくて時間がかかってしまいました。
でも、なんとか完成できました。ありがとうございました。

お礼日時:2001/11/19 21:51

 


  それは、テーブルで可能です。
  ただ、テーブルだと、左右上下が、4ピクセルだったかデフォルトで開きますから、これを詰めるため、スタイル・シートで、マージンをゼロ・ピクセル指定してください。指定法は、スタイルシートの本に載っていると思います。
 
  こうして、四隅のマージンをゼロにしたあと、次のスクリプトでテーブルを造ります。

=====================================
 
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr width="100%" height="70" bgcolor="#0000ff" background="back1.gif">
<td width="100%" height="70"> </td>
</tr>
<tr width="100%" height="1000" bgcolor="#00aa00" background="back2.gif">
<td width="100%" height="1000"> </td>
</tr></table>

</body>
</html>

=====================================
 
  back1.gif と back2.gif は、最初から「透過GIFファイル」でなければなりません。htmlを使っても、CSSを使っても、javascriptを使っても、画像の背景を透明にすることはできません。(なお、テーブルの幅指定は間違いないですが、高さ指定は、テーブルについての解説を見て、確認してください。二重に指定しているのですが、うまく行かない可能性があります(わたしはスペーサか透明画像をサイズ指定して普通入れます)。
 
  これは、画像を背景として並べています。(第一の高さ70ピクセルのセルは、背景の色が青です。第二の高さ1000ピクセルのセルは、背景が緑です)。
 
    • good
    • 0

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

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

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

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

Qはがきの大きさの背景イラストを無料でダウンロードしたい!!

こんばんわ

最近、はがきにて懸賞に応募しているのですが、
白地のはがきに黒のボールペンで書いても味気ないので
PCで背景を印刷してから応募内容を書いて見ようと思いますが。。。

うまく無料でダウンロードできて「はがき大の背景イラスト」なのが
見つかりません。
どなたか詳しい方いらっしゃいましたらよろしくお願いします

Aベストアンサー

イラストではないですが、こちらのサイトの左下にある「背景」は使えると思いますよ。
「ファミリー」「フォーマル」「和風」と種類があります。
年賀状用のサイトなのですが「背景」には文字が入っていないので、いろいろな使い方ができると思います。
http://cp.c-ij.com/japan/otasuke/nenga/

Q画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい

よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。

通常ならその画像をcssで背景画像に出来るのですが、
画像に順番ずつじんわり表示させるjavascriptの指示をしており、
その画像をcssで背景画像とするわけにいかないのです。

現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、
実際にブラウザで確認すると、何も表示されていないように見えます。

下記がソースです。
よろしくお願いします。
------------------------------------------------------------
【HTML】
<div id="containerTop">
<div id="titleTop">
<h1><a href="index.html">タイトル</a></h1>
<h2>サイト説明</h2>
<ul>
<li id="profile"><a href="#">プロフィール</a></li>
<li id="photo"><a href="#">写真</a></li>
<li id="blog"><a href="#">ブログ</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div id="topbgphoto" class="pics">
<img src="img/top/001.jpg" />
<img src="img/top/002.jpg" />
<img src="img/top/003.jpg" />
</div>
</div>

------------------------------------------------------------

【CSS】

/*
container [
----------------------------------------------------------- */
#containerTop {
width:1024px;
position:relative;
margin:106px auto auto 0;
}
/*
titleTop [
----------------------------------------------------------- */
#titleTop {
width:661px;
position: absolute;
top: 241px;
left: 0px;
height: 138px;
}
#titleTop h1 a{
display:block;
text-decoration:none;
text-indent:-7777px;
width:246px;
height:24px;
position: absolute;
top: 25px;
left: 370px;
padding:0;
font-size:12px;
}
#titleTop h2{
display:block;
text-decoration:none;
text-indent:-7777px;
width:310px;
height:16px;
position: absolute;
top: 70px;
left: 304px;
padding:0;
font-size:12px;
}

/*
menu [
----------------------------------------------------------- */
#titleTop ul {
position: absolute;
top: 87px;
left: 0x;
padding:0px;
list-style:none;
}
#titleTop li {
}
#titleTop li a {
display:block;
text-decoration:none;
text-indent:-7777px;
height:17px;
width:59px;
}
#titleTop li a:hover {
background-image: url(../img/top/menu_ov.jpg);
}
#titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;}
#titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;}
#titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;}
#titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;}

/*
ゆっくり表示させる背景画像 [
----------------------------------------------------------- */
.pics {
width:1024px;
height:587px;
padding: 0;
margin: 0;
}

よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。

通常ならその画像をcssで背景画像に出来るのですが、
画像に順番ずつじんわり表示させるjavascriptの指示をしており、
その画像をcssで背景画像とするわけにいかないのです。

現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、
実際にブラウザで確認すると、何も表示されていないように見えます。

下記がソースです...続きを読む

Aベストアンサー

:hoverに設定されている画像のパスは正しいでしょうか。
こちらで確認するかぎり、cssを変更してもリンク先に飛べますし、
ロールオーバーも問題なく動きました。

Qフリーのイラストを集めたいのですが、背景が邪魔です

無料の素材サイトから、人物や物(電話機、自動車など)のイラストを集めたいのですが、背景が邪魔です。

素材集では、ほとんどの素材の背景は白になっていると思いますが、背景がクリア(無色)の素材はどこかにありますか?

それとも、やはり、一つずつ切り抜いていかなければならないのでしょうか?

Aベストアンサー

こんにちは。

時々フリーの素材サイトでも、透過ファイルで提供しているサイトがありますよ。
下記はいずれも、商用利用・加工可能です。

http://www.emstudio.jp/
http://sozaizchi.com/index.html
http://sozai.7gates.net/info/kiyaku.html


ちなみに、Photoshopですと、次の方法で背景を削除できます。

1.背景色が1色の場合
 自動選択ツールで背景をどこか選択 → 削除

2.背景が複雑な場合
 フィルタメニュー→抽出、で画像全体を選択


他にもいろいろな方法で画像のみ、残すことができます。

下記のようなサイトもありますので、ご参考まで。
http://www.dougamanual.net/photoshop.html

QPNG画像の背景色をIEでも透明に表示するには?背景画像でリピートして使いたいです。

背景色チャンクをコントロールする方法。
http://www.minc.ne.jp/~konda/new/png/way01.html
これだと、背景色を透明に設定する方法が判りませんでした。RGB値で透明が設定できればいいような気もしたのですが、無理なような気もしました。


AlphaImageLoaderで背景色を透明にする方法は背景リピートでは使えませんでした。

これを改善した方法か、これ以外の方法がありましたら、ご教授下さい。
宜しくお願いします。

Aベストアンサー

IE6までは透過PNGは対応してないってのが仕様なんだから諦めようよ。
透過GIFで。

私は諦めたよ。気持ちは分るけど。まさにしようがない。

Qイラストの背景が黒くなる

インターネットでイラストをダウンロードしていました。マイピクチャーの中に気に入ったイラストを入れておくと便利なので。ところが、「開く」で見るとイラストの背景が白なのに、「保存」すると背景が黒になってしまいます。さっきまで他のイラストは平気だったのに急にそうなり、それ以降はみんな同じ現象です。何か設定が変わっちゃたのでしょうか? どうすれば白い背景にもどりますか? OSはXPです。イラストをダウンロードしていたサイトはプリントアウトファクトリーというサイトです。

Aベストアンサー

プリントアウトファクトリーというサイトは、http://www.printout.jp/
ですよね?

で、どのイラストからそのような現象が起きてるのでしょうか?
また、それまで正常だったイラストも、背景が黒になってしまいますか?

考えられる対処方は、ブラウザの一時ファイル(キャッシュ)のクリアを試してください…改善されるかも。

または、元々そのイラストには、背景色は無く透明だった…と云う可能性もありませんか?

Q背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。
4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。


【現状】
1,2,4は出来ています。
ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。


【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}
#wrapper_index_up,
#wrapper_index_bottom {
margin: 0 auto;
text-align: left;
}
#wrapper_index_up,
#wrapper_index_bottom,
#header,
#contents,
#footer {
width: 1000px;
}
#header {
background-color:red;
}
#top_img_wrapper {
background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif);
background-repeat:no-repeat;
background-position: center;
}
-->
</style>
</head>
<body>
<div id="wrapper_index_up">
<div id="header">ヘッダー</div>
</div>
<div id="top_img_wrapper">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" />
</div>
<div id="wrapper_index_bottom">
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

どうかよろしくお願いします。

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツ...続きを読む

Aベストアンサー

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ(画面)に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。
まずは下記のサンプルを試してみて下さい。
----------------------------------------------------------------------
【修正版サンプル(2)】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}

#top_img_wrapper,
#wrapper_index_up,
#wrapper_index_bottom {
width: 1000px;
margin: 0 auto;
text-align: left;
}

#header {
background-color: red;
}

#top_img_wrapper {
background: url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif) center center no-repeat;
}

#top_img {
position:absolute;
width: 139px;
height: 92px;
top: 0;
left: 50%;
margin-left: -70px;
}
-->
</style>
</head>
<body>

<div id="wrapper_index_up">
(wrapper_index_upの領域 ここから)
<div id="header">ヘッダー</div>
(wrapper_index_upの領域 ここまで)
</div>

<div id="top_img_wrapper">
(top_img_wrapperの領域 ここから)
<div id="top_img"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="中央固定表示させる画像X" width="139" height="92" /></div>
<p class="hoge">top_img_wrapper内で画像Xの下に表示する最初の子要素(テキストなど)</p>
(top_img_wrapperの領域 ここまで)
</div>

<div id="wrapper_index_bottom">
(wrapper_index_bottomの領域 ここから)
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
(wrapper_index_bottomの領域 ここまで)
</div>

</body>
</html>
----------------------------------------------------------------------
前回のサンプルからの修正点は以下のみです。

【1】背景画像を指定する#top_img_wrapperとは別個に、中央固定表示画像を挿入する為だけのブロック#top_imgを追加。
【2】#top_img内で、画像Xをbodyに対しての絶対配置として指定。(ここの手法については参考サイトにポイントの解説が載っているので各プロパティの設定の理屈は省略します)

これで#top_img_wrapperの位置や幅とは関係なく、#top_imgは常に画面の左上を基点とした絶対配置になる為、水平方向はウィンドウ幅に対して常にセンタリングされる事になります。ただし、質問者様の場合は参考サイトと違って、画像Xの上下にヘッダー・コンテンツ・フッターというブロックが存在していますから、それらと、画像Xが(参考サイトの様に制限なく)重なってしまっては困るのでは?現に、上記サンプルでは、垂直方向に対する絶対位置を0にしてしまっているので、画面の上端にくっついてしまい、ヘッダーの上に画像Xが重なってしまう状態になっています。

これらを回避する為には、更にいくつかの条件を明確にして頂く必要があります。

(1)#top_imgの描画開始位置は、上からどれだけの位置にあればよいのか?例えば、ヘッダーを収める#wrapper_index_upの高さが50pxと決まっており、画像Xはそのすぐ下に、という事であれば、topプロパティの位置を指定する。
#wrapper_index_up {
height: 50px;
}
#top_img {
top: 50px;←修正
}
(2)#top_img_wrapperに表示させたい要素は、実は背景画像しかないのか?そうであれば、背景画像の全体像が必ず描画される様に、#top_img_wrapperに背景画像と同じ高さを指定しておく必要がある。例えば質問文中のソースの実寸通りであれば、下記の様に。
#top_img_wrapper {
height: 92px;←追加
}
(3)(2)と違い、#top_img_wrapperにはテキストなどの子要素があり、画像Xの下から表示させたい、というのであれば、#top_img_wrapperの高さの確保を最低92px以上に変更した上で、#top_img_wrapperの中で画像Xの下に配置する要素にはmargin-topなどで画像X分の余白を上方向に取ってから描画を開始する様にする。
#top_img_wrapper {
min-height: 92px;←追加
_height: 92px;←min-heightが無効なIE6用ハック
}
#top_img_wrapper p.hoge {
margin: 92px 0 0 0;
}

…という感じですが。いかがでしょうか。

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"...続きを読む

Qイラストの背景を透明にしたい

イラストの背景を透明にしたい

初歩的な質問かもしれませんが、よろしくお願いします。

フォトショップのイラスト(背景が白)をインデザインに貼り込んだ際、
背景が白いままでなく透明になるようにするには、
どうしたらよいでしょうか?

例えば添付画像で示した★の部分がイラストとして、
インデザイン上で背景に色をしいて、★をのせるようなことをしたいのですが。

よろしくお願いします。

Aベストアンサー

レイヤーをダブルクリックしてレイヤー0にする
背景が白とか単色だったら色域選択して、編集→消去してPSD形式で保存

>イラストの微妙なエッジがなくなるのは覚悟することになるでしょうか?
エッジが白で無い限り、エッジは無くなりません

エッジが白の部分は選択範囲を足せばいいんだし

Qリストを2つに分割して、それぞれに違う色の背景色を表示させたい。

サンタともうします。
1-6までリストがあります。リストでボタンを作りました。1-3までは赤、4-6までは青の背景色を設定したいのですが、上手く行きません。
実行したことは、listが2グループあるので1-3と4-6それぞれ別々のDIVを用意して、#ao #akaを用意して、それぞれに別べつに背景色を設定しました。上手く行かなかったので、さらにliにclassを設定しbtn_aka,btn_aoで背景色を適用してみましたが、背景色が設定できませんでした。

何か方法はございますでしょうか?DIVを分けて適用する前には、Divなしでlistへのclass記述だけしてみましたが、それも適用されませんでした。

なぜ出来ないのでしょうか?また、もっと簡単な方法があるのでしょうか?
CSSボタンを作成しております。
宜しくお願いいたします。
失礼致します。

<di>v id="aka">
<ul>
<li class="btn_aka"><a href="/">1</a></li><!--それぞれボタンです-->
<li class="btn_aka"><a href="/">2</a></li>
<li class="btn_aka"><a href="/">3</a></li>
</ul>
</div>
<div id="ao">
<ul>
<li class="btn_ao"><a href="/">1</a></li><!--それぞれボタンです-->
<li class="btn_ao"><a href="/">2</a></li>
<li class="btn_ao"><a href="/">3</a></li>
</ul>
</div>

CSS***************
#aka


#nav ul{
margin: 0;
padding: 0;
list-style: none;
}
#nav li{
display: inline;
padding: 0;
margin: 0;
}
#nav li a{
display: block;
border-left: 8px solid #39B146;
background-color: #FEFE98;
padding: 7px 10px;
text-decoration: none;
color: 333;
width: 200px;
margin: 1px 0px;
text-align: left;
font-size: 1.5rem;
font-weight:600;
}

#nav li a:hover{
border-left: 8px solid #39B146;
background-color: #39B146;
color:#fff;
font-weight:600;
}

サンタともうします。
1-6までリストがあります。リストでボタンを作りました。1-3までは赤、4-6までは青の背景色を設定したいのですが、上手く行きません。
実行したことは、listが2グループあるので1-3と4-6それぞれ別々のDIVを用意して、#ao #akaを用意して、それぞれに別べつに背景色を設定しました。上手く行かなかったので、さらにliにclassを設定しbtn_aka,btn_aoで背景色を適用してみましたが、背景色が設定できませんでした。

何か方法はございますでしょうか?DIVを分けて適用する前には...続きを読む

Aベストアンサー

スタイルシートを期待通りに動作させるためにはHTMLがよくないと・・
<div class="nav"><!-- classやidはデザインのためじゃなく文書構造を示すため -->
 <ul>
  <li><a href="/A">A</a></li>
  <li><a href="/B">B</a></li>
  <li><a href="/C">C</a></li>
 </ul>
 <ul>
  <li><a href="/D">D</a></li>
  <li><a href="/E">E</a></li>
  <li><a href="/F">F</a></li>
 </ul>
</div>
div.nav{
text-align:center;/* 継承される */
line-height:20px;/*継承される */
font-size:2px;/* ボタン間の間隔 */
width:60%;margin:0 auto;/* 幅60%,左右中央 */
position:relative;/* 以下の一屋サイズの基準 */
}
div.nav ul,div.nav ul li{
list-style-type:none;
margin:0padding:0;
}
div.nav ul li{
display:inline-block;
width:30%;
position:relative;
}
div.nav ul li a{
display: block;
border-left: 8px solid #39B146;
background-color: #FEFE98;
width:100%;height:100%;
text-decoration: none;
color: 333;
}
div.nav ul li a:hover{
border-color:#39B146;
background-color: #39B146;
color:#fff;
}
div.nav ul+ul li a{
border-color: red;
background-color: lime;
}
div.nav ul+ul li a:hover{
border-color: blue;
background-color: green;
}

スタイルシートを期待通りに動作させるためにはHTMLがよくないと・・
<div class="nav"><!-- classやidはデザインのためじゃなく文書構造を示すため -->
 <ul>
  <li><a href="/A">A</a></li>
  <li><a href="/B">B</a></li>
  <li><a href="/C">C</a></li>
 </ul>
 <ul>
  <li><a href="/D">D</a></li>
  <li><a href="/E">E</a></li>
  <li><a href="/F">F</a></li>
 </ul>
</div>
div.nav{
text-align:center;/* 継承される */
line-height:20px;/*継承される */
font-size:2p...続きを読む

Qイラストの背景を純白の白にするにはどうしたらいいですか?

イラストの背景を純白の白にするにはどうしたらいいですか?

今、知人が書いたイラストを自分のパソコン(Windows Vista)を使ってスキャンしています。スキャンするソフトウェアはEPSON Scanを使っています。複合機本体の型番は「PM-A900」を使用しています。

そこで質問なんですが、イラストをスキャンすると何故か背景が薄ピンクがかった色になります(白い背景の時もあります)
イラスト自体の背景の色は白なんですがスキャンするとこうなります。
特にイラストをピンク色で染めて書くと背景まで薄ピンク色になります。
これは何故でしょうか?

そして背景を純白色にする方法(ソフトウェアでも構いません)は何かありませんか?
宜しくお願い致します。

Aベストアンサー

どの方法についてでしょうか?

・スマート修正の場合、白くしたいポイントはいくつでも増やすことが可能です。(どちらかというとワンタッチ)
・背景消しゴムの場合、こするようにドラッグしつつ動かすことによってエッジにある微妙なカス(?)も一緒に消えてくれます。
・メークオーバーツールの場合、クリックすればするほどその範囲が広がっていきます

先ほどの方法とは違う方法もあげてみます。
◆カーブを使う方法
・方法1
 1.[調整(A)]→[明るさとコントラスト]→[カーブ]を選択
 2.ウィンドウ右下の白いボタンをクリック後、その画像で一番明るく指定したい部分をクリック
 3.ウィンドウ右下の黒いボタンをクリック後、その画像で一番暗く指定したい部分をクリック
・方法2
 1.RGBとなっている部分を「赤」にし、少し右下の方にカーブを動かしてあげると赤の出力が減る

◆カラーチェンジャー
 1.ラーニングセンターより「画像をレタッチ・復元する」より「カラーチェンジャー」を選ぶ
 2.色を白を選択し、白くしたいところに流し込む

画像によってベストポイントは違うので、良い感じのポイントをみつけるまで
スポイト→リセットをしてみてください。
実際、どれぐらい画像が赤くなっているかがわからないのでこんな形の説明になってしましたが、
また分からなければ補足願います。

どの方法についてでしょうか?

・スマート修正の場合、白くしたいポイントはいくつでも増やすことが可能です。(どちらかというとワンタッチ)
・背景消しゴムの場合、こするようにドラッグしつつ動かすことによってエッジにある微妙なカス(?)も一緒に消えてくれます。
・メークオーバーツールの場合、クリックすればするほどその範囲が広がっていきます

先ほどの方法とは違う方法もあげてみます。
◆カーブを使う方法
・方法1
 1.[調整(A)]→[明るさとコントラスト]→[カーブ]を選択
 2.ウィンドウ右...続きを読む

QIE6と7で1ピクセル分、背景画像がずれます

IE6、7で背景画像が横(右)に1ピクセルずれてしまいます。
ブラウザのお気に入りなどの欄を表示する(固定表示)とキッチリ表示されます。
ソースは以下の通りで、特別なことはしていませんが、これはIEのバグなのでしょうか? 他のブラウザはMacも含め問題ありません。
よろしくお願いします。

background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;

Aベストアンサー

こんにちは。

IE6の有名なバグです。

background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;
を、仮にbodyに適用したとすると、

body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
padding-left: 1px;
}

と、強引に反対側に1ピクセルずらしてやればOKなのですが、
当然のごとくIE以外のブラウザでは逆に左に1ピクセルずれてしまいます。

そこで、スマートなやり方ではないのですが、ハックを利用します。
このバグは仰るとおりIE7でも生じるので、

body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
}

/* ↓IE6以下に適用 */
* html body {
padding-left: 1px;
}

/* ↓IE7に適用 */
*+html body {
padding-left: 1px;
}


ハックの使用は出来る限り避けたいのですが。。
たかが1ピクセル、されど1ピクセルですよね(笑

参考URL:http://www.lucky-bag.com/archives/2006/06/css-hacks.html

こんにちは。

IE6の有名なバグです。

background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;
を、仮にbodyに適用したとすると、

body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
padding-left: 1px;
}

と、強引に反対側に1ピクセルずらしてやればOKなのですが、
当然のごとくIE以外のブラウザでは逆に左に1ピクセルずれてしまいます。

そこで、スマートなやり方ではないのですが、ハックを利用します。
このバグは仰るとおりIE7でも生じるので、

...続きを読む


人気Q&Aランキング

おすすめ情報