• ベストアンサー

テーブルを半透明(または網掛け)

ジャンルがHTMLですが、他の言語が必要でしょうか? あるテーブルのみ透明度を落とす(半透明)または網掛けをするというのは可能ですか? 単にテーブルの色を変えるというのではなくテーブル上に有るデータ(画像・文字)の上にかかるという物です。 いわゆるWindowsで言うところの"選択できないですよ状態(灰色で選択不可能)"を表現したいのですが… CGI内部で使用し、網掛け部分は固定では有りません。 "<TR>に何かを追加することで…"というタイプが理想ですが、もちろん他の方法でもかまいません。 よろしくお願いします。

  • HTML
  • 回答数5
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
noname#10926
noname#10926
回答No.1

「透明度を落とす」はフィルタ効果だと思いますが、 スタイルシートのfilter:alphaを使えば? とりあえず下記を参考に。 http://tohoho.wakusei.ne.jp/css/reference.htm#FilterAlpha

参考URL:
http://tohoho.wakusei.ne.jp/css/reference.htm#FilterAlpha
master-3rd
質問者

お礼

返答ありがとうございます。 やりたいことはこの通りなのですが、どうやらブラウザによっては動作しないようですね。 使用するのは企業ページなので、ちょっと使用するのを迷っているところです。 しかし、情報として覚えておきます。 ありがとうございました。

その他の回答 (4)

回答No.5

filter:alphaはIE独自のものなので使わないほうがいいのですがどうせ使うならモジラ系ブラウザー(Netscape6以上など)独自のものも入れてみてはどうでしょう? -moz-opacity:0.4; filter:alpha(opacity=40); 該当ブラウザーが今ないので確認できませんが参考URLに背景や文字と書いてあるので背景も透過されると思います。

参考URL:
http://dhr.at.infoseek.co.jp/simple_style6.htm#mozopacity
master-3rd
質問者

お礼

返答ありがとうございます。 使用できないブラウザがあるということで利用するか検討中です。 参考URLはありがとうございました。

  • ron3
  • ベストアンサー率35% (7/20)
回答No.4

内容として、あるテーブル内の ・画像の背景を半透明にしたい。 ・TEXTAREAタグや、INPUTタグの入力をできなくしたい という二つあるということなのかな? とおもうのですが、 まず、半透明にするというのは、TRタグというのはあきらめたほうがよさそうです。 レイヤもしくはDIVタグでテーブルを囲み、そのテーブルに対しては有効にするってことはできそうですね。 <div style="width: 100%; filter: Alpha(opacity=50); "> <table > <tr><td>半透明です。</td></tr> </table> </div> といったかんじで。 それだけだと、入力はできるので、 TEXTAREAとINPUTタグを"選択できないですよ状態(灰色で選択不可能)" にする場合は、2番の方の回答のように <input type="text" name="hoge" value="" disabled> とdisabledを書いてやればなります。 色がすでに半透明なので、 <input type="text" name="hoge" value="" readonly> とかでもまあいいのかなぁともおもいます。 これは、そのテーブルに対して全部にかけるということはできないとおもうので、 あきらめてCGI内で半透明にするときの条件で 追加して書くようにしてください。 この方法ってブラウザ依存した気がするんで、いろいろ確かめたほうがよいかもしれません。

master-3rd
質問者

お礼

返答ありがとうございます。 #2の方のお礼にも書きましたが、実際その機能が必要なわけではなかったです。 あのイメージで"灰色で薄く表示"ということが出来ればと思っていました。 ただ、ブラウザによって表示できないとのことですので使用するかは検討中です。

  • nekobaka
  • ベストアンサー率36% (8/22)
回答No.3

#1の方と同意見です。こちらも参考になさってみてください。

参考URL:
http://www.sky.sannet.ne.jp/masapine/homepage/table7.html
master-3rd
質問者

お礼

返答ありがとうございます。 わかり易いページを紹介していただいてありがとうございます。

  • kaz_iwa
  • ベストアンサー率27% (10/37)
回答No.2

inputタグの属性disabledを使えばいいかもしれません。 たとえば <input type="button" value="無効" disabled><br> <input type="text" value="無効" disabled> のようなタグだと入力が無効になります

master-3rd
質問者

お礼

返答ありがとうございます。 実際"Windowsの選択できません状態"にするのではなく、あのイメージで"灰色で薄く表示"という感じが必要でした。 別に選択できないようにするとかそういうものではないです。 しかし、返答はありがとうございました。

関連するQ&A

  • 条件付書式で、「網掛け」ってどれ?

    試験で条件付書式を使う問題で「網掛け」「薄い黄色」とういような表現で出題されました。網掛けとは、塗りつぶしのところの下のほうの▼をクリックすると「○%」とかいう網掛けのことだと思いますが、そうだとすると、なんだか出題に納得がいきません。網掛けといえるものが、その網の細かさの割合に応じて「○%」といろいろあり、そのどれを選択したらいいか迷うからです。 出題の「網掛け」とは私の指すそれでしょうか?

  • テーブルwidthで指定したのに幅が広がる

    ↓のようなHTMLをCGIで出力しました。 <TABLE width="500" cellpadding="10" bgcolor="wheat"> <TR> <TD>2006年9月6日(水)20時48分 </TD><TD><B>2/12求人広告結果</B></TD><TD> 広告</TD> </TR><TR><TD colspan="3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TD></TR> <TR><TD colspan="3"><A HREF="./outsider01.cgi?mycmd=edit&view_page=328"><P align="right">編集</A>|<A HREF="./outsider01.cgi?mycmd=delete&view_page=328">削除</A></P></TD></TR> </TABLE> すると、テーブルの幅が広がるのです。 aaaaaaaaaaaaaaaaaaaa・・・ ではなく、ふつうの全角の文章ですとwidth500で固定されるようです。 なぜ小文字のaaaaaaaaaaaaaだとwidthが固定されないのでしょうか?

    • ベストアンサー
    • HTML
  • WORDの網掛け部分に追記も削除もできません

    Wordで、定められたフォーマットがメールにて添付されてきたものに、内容を追記しているのですが、灰色に網かけされている部分に追記しようとしても、その網掛け部分には手を加えることができません。 とりあえず、切り取りは操作可能ですが、横線が入るだけで内容が消えない上、 「選択範囲は削除された文字列として記録されています」 と表示されるだけで、上書きも追記も不可能です。 この網掛け部分にあらかじめ記載してある文字列を削除した上で、新たに追記する方をご存知の方、教えてくださらないでしょうか?

  • テーブルのセルの高さ

    テーブルのセルの高さを設定するには、HEIGHT=で設定すればいいと思うのですが、 たとえば、わかりやすい例でいうと、 <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top">セルA</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルB-1</TD><TD>セルB-2</TD></TR> <TR><TD>セルB-3</TD><TD>セルB-4</TD></TR> <TR><TD>セルB-5</TD><TD>セルB-6</TD></TR> <TR><TD>セルB-7</TD><TD>セルB-8</TD></TR> <TR><TD>セルB-9</TD><TD>セルB-10</TD></TR> <TR><TD>セルB-11</TD><TD>セルB-12</TD></TR> <TR><TD>セルB-13</TD><TD>セルB-14</TD></TR> </TABLE> </TD></TR> <TD VALIGN="top">セルC</TD></TR> </TABLE> </BODY> </HTML> というテーブルの場合、セルAとセルCの境界はセルBの高さの真中くらいに なると思います。 それで、セルAとセルCの内容は固定なのですが、セルB内のテーブルはcgiからの 書き出しで可変長です。 実現したいことは、セルBの大きさにかかわらず、セルAの高さを固定したいのです。 セルCはセルBの高さと連動して可変するようにテーブルを組みたいのですが、 どのように指定すれば実現できるでしょうか? セルAにHEIGHT指定してもなぜか、無視(?)されてしまいます・・・ よろしくお願いします。

  • HTMLでテーブルをfloatで中央配置に並べたい

    よろしくお願いします。 floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。 並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。 テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。 ■HTML <body> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </body> ■CSS table{   float: left;   width: 100px;   border: 1px solid #000000;   margin: 0px 10px 0px 10px; } よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • TABLEの高さの固定、TABLEの高さの変動を固定について

    TABLEの高さの固定できずに困っています。 【(2)】に縦500程度の画像掲載(又は複数回改行)をすると、 【(1)】の50pxで固定している縦幅が変動してしまいます。 【(3)】の<TD>にheight=500pxのような大きな値を入れると 【(1)】の縦変動を固定できるのですが、【(2)】の縦幅が大きくなると、 その都度、【(3)】の<TD>のheightの値を書き換えなければなりません。 CSS等で【(1)】のheight:50px;の指定をしても、 【(2)】の縦幅の上昇より【(1)】が50px以上になってしまいます。 【(1)】のheightを【(2)】の縦の変動に左右されず固定する方法を 出来ればCSSを使用した方法でわかる方がいらっしゃいましたら ご回答宜しくお願い致します。 【-------HTML START---------】 <TABLE style="WIDTH: 500px;HEIGHT:100%" cellSpacing=0 cellPadding=0 border=1> <TR> <TD colSpan=2 height="20px"></TD></TR> <TR> <TD height="50px">【(1)】</TD> <TD vAlign=top width="165px" rowSpan=2>【(2)】</TD></TR> <TR> <TD vAlign=top>【(3)】</TD></TR></TABLE> 【-------HTML END---------】

    • ベストアンサー
    • HTML
  • テーブルの途中からcellspacingを変更したい、もしくは途中から背景色を変えたい

    (1)テーブルの途中からcellspacingを変更したい、「もしくは」、(2)途中から背景色を変えたいと思っているのですが、これは可能でしょうか。 例: (1)たとえばはじめの二行(<TR></TR><TR></TR>)においては、cellspacingが0、それ以降はcellspacingが1。 (2)全てcellspacingが1。ただし初めの二行は背景色が白。それ以降は灰色。これにより初めの二行は枠線が内容に見える。 なぜこのようなことをしたいかと申しますと、手元に背景色を灰色にしてcellspacingを1にすることにより枠線を表示しているプログラムがあり、ある行に関しては枠線を消したいのです。 たくさんのプログラムがこの方法に基づいているため、一つだけ違う方法で枠線を表示することは困難可と思っています。 お手数ですが、お分かりになる方、教えて頂けると助かります。

    • ベストアンサー
    • HTML
  • table のバックグラウンドカラー

    background-color は継承されないものだと認識しております。 ・HTML内容 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>検証</title> </head> <table border="1" background="red"> <tr> <th>授業内容</th> <th>講義</th> </tr> <tr> <td>1時間目</td> <td>国語</td> </tr> <tr> <td>2時間目</td> <td>数学</td> </tr> <tr> <td>3時間目</td> <td>英語</td> </tr> <tr> <td>4時間目</td> <td>科学</td> </tr> </table> </body> </html> ====ここまで==== ボタンを押す。⇒setStyleが動く⇒tableの背景が赤色で塗られる。動作までは分かるのですが、 td、thの部分の背景まで赤色になっています。 これは、テーブルと言う枠に、赤色が塗られ、その上にtd、thが置かれる。 結果、td、thの背景赤色は (1)「td、thのbackgroundは指定していないため、デフォルトのtransparentが有効で、 テーブルの背景赤色が透けて見えている」 (2)「td、thに、tableのbackgroundが継承されて、赤く塗りつぶされていないということ」 の考えに間違いがないか確認させて頂きたいのです。 ご教授お願いします。

    • ベストアンサー
    • CSS
  • OracleDBのテーブルのリンクについて

    Oracleテーブルのリンクについて教えてください。 OracleDBのテーブルをACCESS97からリンクして見ているのですが、 OracleテーブルのレコードをACCESSから削除や挿入しようとすると 出来るテーブルと出来ないテーブルがあります。 ACCESSからレコードを選択し、右クリックを押すと通常、そのメニューの 中に「新しいレコード」、「レコードの削除」などが出ますが、 レコードが削除できないテーブルはその項目が灰色になり選択できません。 更新出来ないテーブルと出来るテーブルの違いは何が考えられますか? 申し訳ないですが、宜しくお願い致します。

  • テーブル内のスクロール

    初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか?どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>

    • ベストアンサー
    • HTML