gifでボタンやイラストを作成し、HTMLLのテキストにはめ込むと、そのgifの絵は表示するのですが、周囲も表示され違和感があります。
(例えば、○のボタンを作成すると、その4隅の部分がブラウザの背景色とならずにgifのボタンの背景色となる)
POWER POINTかPHOTOSHOPかPAINTを使って、このgifの背景色を透明にして、ブラウザの背景色となるようにできませんか?
それとも別のソフトが必要ですか?
分かる方がおられたら教えてください。

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

A 回答 (4件)

こんにちは。


ペイントでgifを扱えるのならOffice2000がインストールされていると思いますので、Officeツールの『Microsoft Photo Editor』を使った簡単なやり方も出来ると思います。

『プログラム』→『Microsoft Office ツール』→『Microsoft Photo Editor』を起動して、そこに透過処理したいgifファイルを開きます。

上部にメニューアイコンがあると思いますが、右端の画像サイズのパーセンテージを表示するボックスの左がわに、3つアイコンが並んでいると思います。
その真ん中の青いペンのようなアイコン(マウスカーソルを合わせると『透過色に変更』という説明ポップアップが出ます)をクリックしたあと、gif画像の透明にしたい場所をクリックすればOKです。

ただしその場所と同じ色を他にも使っていると、そこまで透明になってしまいます。
予め、絵に使っていない色で透明にしたい場所を塗りつぶしておきましょう♪

……でもせっかくPhotoshopという素晴らしいソフトをお持ちなのなら、そちらでのやり方をマスターされたほうが、良いかな~~っとは思います(汗/笑)。
    • good
    • 0
この回答へのお礼

さっそくのアドバイスの通り行ってみました。確かに極めて簡単に透明になりました。たいへんありがとうございました。

お礼日時:2001/04/23 23:18

私のところでは未だにPhotoshop5.0なので、


Mac版の5.0で説明しますが、まず、GIFにするところ
まではできているんですよね?
そうしましたらまず、四隅の透明にしたい部分を、
ボタンなど、必要な部分で使っていない色にします
(ボタンに白を使っていなければ白でも可)。
次に、『ファイル』>『別名で保存』でGIFにする・・・
のではなくて、『ファイル』>『データ書き出し』>
『GIF89a書き出し』にしてやります。
すると、さらにいくつかの設定項目が出て来ますので、
そこから『透明』と言うのをチェックしてやります。
すると、任意の1色を透明として扱う、選択ができる
様になりますので、四隅に使った色を選択してやります。
これでオッケーです。もし、間違ってボタンに使って
いる色を四隅に使ってしまうと、ボタンの中のその色
の部分も、一緒に透明になってしまいます。
    • good
    • 0
この回答へのお礼

さっそくのアドバイスありがとうございます。Photoshopにそのような便利な機能があるのですね。活用させていただきます。

お礼日時:2001/04/23 23:25

photoshopはいくつのバージョンを使っていますか?


5.5ならば、自分がやっている方法を紹介します。

1)新規作成で、背景色をなしにしてキャンバスをだします。
2)絵を書きます。
3)ファイル(F)→Web用に保存→自分の希望のサイズになるように減色したり。

ってカンジでしょうか。
よかったら試してみてください。
    • good
    • 0
この回答へのお礼

さっそくのアドバイスありがとうございます。Photoshopにそのような便利な機能があるのですね。活用させていただきます。

お礼日時:2001/04/23 23:26

Photoshopを使った方法を紹介します。



1.レイヤーを作り、そこに絵を描く。
2.背景を不可視に。
3.ファイル(F)→データ書き出し(R)→GIF89a書き出し
    • good
    • 0

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

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

Qbodyの背景と異なる背景色で、同じ文字色の見出し

例えば、以下

body{background-color:lightskyblue}
h1{background-color:blue;color:lightskyblue}

のように、bodyの背景色とh1の文字色が全く同じながらも、h1の背景色が文字色より濃くて暗い色なため、h1の文字が十分に認識できるときでも、スパムとして認識されるのでしょうか?

Aベストアンサー

それはありません。
 どこから得たデマか知りませんが・・・

 ただ、{background-color:blue;color:lightskyblue}はアクセシビリティ(WAI)では、望ましいとは言えないでしょう。
 ⇒WAIガイドライン:ページ制作( http://www.doraneko.org/wai/contents10/19980918/Overview.html )

Q背景画像の上に透過GIF背景をのせる方法

はじめまして。

メモ帳にHTMLタグ打ち込みでWEBページを作ってるのですが、
bodyで背景画像を指定し、その上に透過GIFをおき、さらにその上にテキストを表示させるにはどうしたらよいのでしょうか。
具体的には、「テキストを表示させるブロック(tableやdiv)の部分」を半透明の透過GIFをフィルターみたいにかぶせて、その上に書くテキストを見やすくさせたい、という動機です。
divのなかのstyle、またはtableでbackgroundを定義しても、もとのbodyの背景が反映されなくなってしまうのですよね。
一応、自分で考えた策としては
・ブロックの背景そのものを、ある程度薄い色に変えた画像を用意してそれをtableの背景にする
というものがあるのですが、これはやはりつなぎ目の部分でズレてしまって見栄えがあまりよくないのです。

かなり細かいところにこだわりすぎな感じもするんですが、
ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。
よろしくお願いします。

Aベストアンサー

ブラウザの環境にある程度左右されない方法として、
私の場合、逆に非常にベタなやり方で同じ効果を狙ってページを作っています。
透明部分と白(画によっては背景画像のカラーと同系の薄い色が良いかと)の
市松模様GIFを作って、それをtable背景にしています。

QCSS リンクを枠で囲み背景色をつけてボタンのようにして、その中にpngアイコンを表示させたい。

やりたいことは、リンク先である Facebook とTwitter のURLに 囲み枠で丸くしグラデーションで背景色をつけたあとに、リンク先の文字の後ろにアイコンを表示したいと考えています。試行錯誤で試しいてますが、うまくいきません。もし分かりましたら宜しくお願いします。


【HTML】
<center><a href="http://www.xxxx.com" class="fb-b" >Facebook<div classs="fb-ic" ></div></a></center>

<center><a href="http://www.xxxx.com" class="tw-b" >Twitter<div class="tw-ic" ></div></a></center>

【CSS】
/* Facebookボタン */
.fb-b{
background-image: linear-gradient(-90deg, #043495, #984BB4);
color: #fff;
width: 200px;
padding: 5px;
border-radius: 5px;
border-style: solid; border-width: thin;
display: inline-block;
}


/* Twitterボタン */
.tw-b{
background-image: linear-gradient(-90deg, #F1F3F9, #EBFFF9);
/*color: #fff; */
width: 200px;
padding: 5px;
border-radius: 5px;
border-style: solid; border-width: thin;
display: inline-block;
}

/*アイコンボタン */
.fb-ic{
background: url(facebook.png) no-repeat right center;
background-size:30px 30px;
}
.tw-ic{
background: url(twitter.png) no-repeat right center;
background-size:30px 30px;
}

やりたいことは、リンク先である Facebook とTwitter のURLに 囲み枠で丸くしグラデーションで背景色をつけたあとに、リンク先の文字の後ろにアイコンを表示したいと考えています。試行錯誤で試しいてますが、うまくいきません。もし分かりましたら宜しくお願いします。


【HTML】
<center><a href="http://www.xxxx.com" class="fb-b" >Facebook<div classs="fb-ic" ></div></a></center>

<center><a href="http://www.xxxx.com" class="tw-b" >Twitter<div class="tw-ic" ></div></a></center>

【CS...続きを読む

Aベストアンサー

<center>なんて、とっくの前に使わなくなったし・・
<ul id="#SNS_Link">
 <li><a href="http://www.xxxx.com">Facebook</a></li>
 <li><a href="http://www.xxxx.com">Twitter</a></li>
</ul>
と文書構造以外書かない。書いてはならない。デザイン(プレゼンテーションに関わるものはHTMLには書かない。
 ましてや、<div class="tw-ic" ></div>なもの書かない!!!
・HTML5未満のHTMLはA要素内に<div>はおけない
・空の要素は書いてはならない
・デザインのためだけの要素は無論、classやidは書かない。後でワケワカメになる。

・・これは基本です。
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 idやclassを併用して文書構想を補完する。


 ここは、SNSへのリンクのリストですから・・

<ul id="SNS_Link"><!-- リンクのターゲットになるかもしれないのでidで構造を補完 -->
 <li><a href="http://www.fff.com">Facebook</a></li>
 <li><a href="http://www.ttt.com">Twitter</a></li>
</ul>

と記述したほうが良い。SEO(検索エンジン最適化)は無論、メンテナンス性も含めて、あらゆる面で優れている。
フレゼンテーションと切り離すことで、自由自在にデザインできるようになる。

スタイルシート

ul#SNS_Link{
margin:0.5em 1em;
padding:0;
list-style-type:none;
}
ul#SNS_Link li+li{
margin-top:20px;
}
ul#SNS_Link li a{
display:inline-block;
background: linear-gradient(white, gray);
border-radius:0.5em;
position:relative;
padding:5px;
text-decoration:none;
}
ul#SNS_Link li a[href]:after{
content:"";
position:absolute;
right:-40px;top:0;
display:inline-block;
width:30px;height:30px;
background-size:cover;
}
ul#SNS_Link li a[href="http://www.fff.com"]:after{
background-image:url(./images/icons/facebook.png);
}
ul#SNS_Link li a[href="http://www.ttt.com"]:after{
background-image:url(./images/icons/twitter.png);
}
ul#SNS_Link li a:hover{
background: linear-gradient(white, red);
}

★ スタイルシートを書く前に、HTMLのチェックしましょう。
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )」
・HTMLのチェックは
 Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
  の右上の[DATA]が便利
・Unicorn( https://validator.w3.org/unicorn/ )

下記サンプル(全文)はチェック済み!!
*タブは_に置換してあるので戻す
*文字コードはShit_JIS

<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
ul#SNS_Link{
margin:0.5em 1em;
padding:0;
list-style-type:none;
}
ul#SNS_Link li+li{
margin-top:20px;
}
ul#SNS_Link li a{
display:inline-block;
background: linear-gradient(white, gray);
border-radius:0.5em;
position:relative;
padding:5px;
text-decoration:none;
}
ul#SNS_Link li a[href]:after{
_content:"";
_position:absolute;
_right:-40px;top:0;
_display:inline-block;
_width:30px;height:30px;
_background-color:red;
_background-size:cover;
}
ul#SNS_Link li a[href="http://www.fff.com"]:after{
background-image:url(./images/icons/facebook.png);
}
ul#SNS_Link li a[href="http://www.ttt.com"]:after{
background-image:url(./images/icons/twitter.png);
}
ul#SNS_Link li a:hover{
background: linear-gradient(white, red);
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<ul id="SNS_Link"><!-- リンクのターゲットになるかもしれないのでidで構造を -->
___<li><a href="http://www.fff.com">Facebook</a></li>
___<li><a href="http://www.ttt.com">Twitter</a></li>
__</ul>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

<center>なんて、とっくの前に使わなくなったし・・
<ul id="#SNS_Link">
 <li><a href="http://www.xxxx.com">Facebook</a></li>
 <li><a href="http://www.xxxx.com">Twitter</a></li>
</ul>
と文書構造以外書かない。書いてはならない。デザイン(プレゼンテーションに関わるものはHTMLには書かない。
 ましてや、<div class="tw-ic" ></div>なもの書かない!!!
・HTML5未満のHTMLはA要素内に<div>はおけない
・空の要素は書いてはならない
・デザインのためだけの要素は無論、classやidは書かない。後でワケ...続きを読む

Qbullet_s.gif という名前の小さい赤球のGIF画像の他の色探しています。

bullet_s.gif をGOOGLE などで検索すると
この画像を使っているページがたくさん見つかります。

この赤球の画像のほかの色を探しているのですが、
黄色、オレンジ、青色、紫色を発見したのですが、

そのほかの色も探しています。
できれば、青色のもう少し色の薄い色を・・・。

というか、なぜこの画像が全く同じ名前で
数多く存在しているのでしょう?
出所はどこなのでしょうか?

Aベストアンサー

似たようなので
http://www.bingo-ev.de/graphic/bullets/cy_ball.gif
こんなのはいかがでしょう

参考URL:http://www.bingo-ev.de/graphic/bullets/cy_ball.gif

QHPの背景画像や背景色が印刷時印刷されない

HPの背景画像や背景色が印刷時印刷されない

最近HPを作成しはじめの初心者です。

IEのデフォルトで背景を印刷しない設定になっているのですが、
これはどんな意味があるのでしょうか?

私としては、画面と印刷が同じ方がしっくりくるのです。

質問があります。
質問1:デフォルトで背景が印刷OFFになっていることのメリット
質問2:画面と印刷を同一にする一般的な方法

以上、よろしくお願い致します。

Aベストアンサー

私としては、画面と印刷が同じ方がしっくりくるのです。

==>それが、まさに人それぞれです。
 私としては、背景無しで印刷された方がうれしいです。
なぜなら、印刷するのはページ内容をメモ代わりに、パソコンの無い時でも
見たい時だけですから。

 さらに、欲を言えば印刷用のCSS(media="print")も予め作っておいて、
そちらでは、ごちゃごちゃしたレイアウトや飾りの画像、バナーやナビゲーション
を排除した。箇条書きのような印刷スタイルが、最もしっくりします。


人気Q&Aランキング

おすすめ情報