img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

半透明部品


テーブルやボックスを半透明にする

  ie6 

<table>タグや<div>タグに半透明のフィルターをかけると、テーブルやボックスを半透明にすることができます。
テーブル・ボックス内の文字や画像も全て半透明になるので、透明度を高くしすぎると文字が読みづらくなってしまいますので、テーブル・ボックスに表示する文字色は濃いめの色をオススメします。

<table style="background-color:色名;filter:alpha(opacity=A);-moz-opacity:B;opacity:C;">
<tr>
<td>テーブル内に表示する文字</td>
</tr>
</table>


sample 60% の半透明です

background-color:色名;" で、テーブルの背景色を必ず指定してください。しないと半透明になりません。^^;

filter:alpha(opacity=A) →IEの透明度を指定
  → 0〜100 0に近いほど透明に、100に近いほど不透明になります。
-moz-opacity:B →NNとFirefoxの透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。
opacity:C →OperaやSafari、GoogleChromeなどwebkit系の透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。

ほとんどのブラウザで半透明を実現するには、3つとも指定する必要があります。


■ ページ全てのテーブルを半透明にする

<head></head>の中に下記のソースを入れてください。





半透明のボタン

  ie6 nn7


<input type="button" value="ボタンの文字" style="background-color:ボタンの背景色;color:文字色;filter:alpha(opacity=A);-moz-opacity:B;opacity:C;">

filter:alpha(opacity=A) →IEの透明度を指定
  → 0〜100 0に近いほど透明に、100に近いほど不透明になります。
-moz-opacity:B →NNとFirefoxの透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。
opacity:C →OperaやSafari、GoogleChromeなどwebkit系の透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。

ほとんどのブラウザで半透明を実現するには、3つとも指定する必要があります。

styleに 枠の太さpx 枠の種類 枠の色 などを追加して枠を装飾することができます。(詳しくは その他の小技→プッシュボタン を参照してください。)
ボタンを透過(背景を見えるように)する方法は その他の小技→透過部品 を参照して下さい。



半透明のテキストエリア

  ie6 nn7

   

<textarea cols="横幅" rows="縦幅" style="background-color:テキストエリア背景色;color:文字色;filter:alpha(opacity=A);-moz-opacity:B;opacity:C;">
テキストエリアに表示する文字
</textarea>


filter:alpha(opacity=A) →IEの透明度を指定
  → 0〜100 0に近いほど透明に、100に近いほど不透明になります。
-moz-opacity:B →NNとFirefoxの透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。
opacity:C →OperaやSafari、GoogleChromeなどwebkit系の透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。

ほとんどのブラウザで半透明を実現するには、3つとも指定する必要があります。

styleに 枠の太さpx 枠の種類 枠の色 などを追加して枠を装飾することができます。(詳しくは テキストエリアの項を参照してください。)
テキストエリアを透過(背景を見えるように)する方法は その他の小技→透過部品 を参照して下さい。



半透明のテキストボックス

  ie6 nn7


<input type="text" size="テキストボックスの幅" value="ボックスに表示する文字" style="background-color:テキストボックス背景色;filter:alpha(opacity=A);-moz-opacity:B;opacity:C;">

filter:alpha(opacity=A) →IEの透明度を指定
  → 0〜100 0に近いほど透明に、100に近いほど不透明になります。
-moz-opacity:B →NNとFirefoxの透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。
opacity:C →OperaやSafari、GoogleChromeなどwebkit系の透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。

ほとんどのブラウザで半透明を実現するには、3つとも指定する必要があります。

styleに 枠の太さpx 枠の種類 枠の色 などを追加して枠を装飾することができます。(詳しくは テキストエリア→テキストボックス を参照してください。)
テキストボックスを透過(背景を見えるように)する方法は その他の小技→透過部品 を参照して下さい。