ある要素の中身を全部グレーアウトするには

質問

HTMLとJavascriptでちょっと困っておりまして、助けていただけましたら嬉しいです。

テーブルのあるセルの中の要素を全てグレーアウトして使えなくしたいのですが、
どのようにするのが一般的でしょうか？

例えば以下のようなコードがあるとしますと、
id="message"に対して上からがばっと半透明のカバーをかけて
やりたいといった感じです。
なので文字も赤の部分は薄赤、黒の部分はグレーにしたいです。
画像も同様です。selectはクリックできない感じです。

<td id="message">
　<font color="#ff0000">こんにちわ</font>
　良い天気ですね。<br>
　<select name="food">
　　<option value="apple">apple</option>
　　<option value="orange">orange</option>
　</select>
　<img src="...">
</td>

よろしくお願いしますm(_ _)m

回答No.2

LancerVII · ベストアンサー

こんにちは。

No.1さんの言うとおりJavaScriptの動かない環境ではフォームが選択できたりしてしまいますのでおすすめしませんが、サンプルを作ってみました。
(jQueryを併用しています)

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7413146/

動作原理としましては
指定されたtrのtd内のdivに半透明のオブジェクトを絶対指定で配置し、覆い被せています。
またselectタグにdisable属性を付与し、選択不可としています。

実用にはもうちょっといろいろ加味しなければいけないと思いますので参考までに。

お礼

ありがとうございます！
まさに私がやりたいことです。
サンプルまで作っていただきまして心から感謝致します。
大変勉強になりました。

回答No.1

ORUKA1951

＞selectはクリックできない感じです。
　これが目的でしたら、disabled属性を使用すべきです。javascriptはユーザーの制限がありますし、スタイルシートを解除されたら利きませんから。
17.12 選択不能指定と読み出し専用指定 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#h-17.12 )
<td class="readonly">
　<select name="food" readonly>
　　<option>・・・

[CSS]
td.readonly{color:red;}
select[readonly]{color:gray;}

なお、<font>要素は、代表的な非推奨要素です。
★FONT要素とBASEFONT要素は推奨しない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-FONT )

1999年のHTML4.01strictの勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』となっていて、HTML4.01と同じXHTML1.0はともかく、それ以降のXHTML1.1・・次期HTML5では、これらプレゼンテーションに関わる一切の要素・属性が廃止されています。

　とりあえず、
★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　は、一通り目を通しておきましょう。必要な情報は正確で正しいものが手に入るはずです。

　なお、推奨しませんが、z-indexないし、後から出てくる要素をposition:absoluteで覆い隠すとか、CSS3のopacityなどを使う方法もあります。ただ、今回のようにformの値を変更させないために使うのはお勧めしません。