- 締切済み
background-color ｃｓｓ
あるテーブルの<td>タグに2色のbackgroundcolorを指定し、Aの場合はA色のbackgroundcolorを指定し、Bの場合はA色の上にB色のbackgroundcolorを重ねたいですが、ソースは下記の要となっていますが、私にわかるのが<div>での指定しか分からなくて、それ以外の方法があれば教えていただきたいです。<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>新規予約</title> </head> <body> <style> .test{ position:relative; width:100px; height:100px; z-index:2; background-color:rgb(255,0,255); } .test_2{ position:relative; top:-20px; width:50px; filter: alpha(opacity=50); opacity:0.5; } .test_3{ position:relative; color:rgb(255,255,255); height:100px; background-color:rgb(0,0,255); z-index:1; } .test_4{ position:relative; color:rgb(0,0,0); weight:100px; z-index:2; } </style> <div class="test"> <div class="test_4"> <a href="test">テスト</a> </div> <div class="test_2"> <div class="test_3"> </div> </div> </div> </body> </html>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと時間が取れたので サンプルとして、HTMLソースを最低限のものに変更して素の状態にしました。デザインは後でどうにでもなりますから。 (表の意味にしたがって氏名欄をthにし、その横にセルをならべあります。) (プレゼンテーションに関わる要素はstylesheetで指定するようにしてあります。) (文字コードはShift_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 http-equiv="Content-Style-Type" content="text/css"> <style> <!-- table{border: solid 2px black;border-collapse: collapse} table tr td, table th{ border: solid 1px black;padding:5px;} table tr.time td{ width: 6em;text-align:center;} table tr td.latter{ border-left-style: dotted;} table tr td.first{ border-right-style: dotted;} --> </style> </head> <body> <table> <tr class="time"> <th>名前</th> <td colspan="2">10時</td> <td colspan="2">11時</td> <td colspan="2">12時</td> <td colspan="2">13時</td> </tr> <tr > <th class="name">田中</th> <td class="holiday first"></td><td class="holiday latter"></td> <td class="holiday first"></td><td class="holiday latter"></td> <td class="holiday first"></td><td class="holiday latter"></td> <td class="holiday first"></td><td class="holiday latter"></td> </tr> <tr> <th class="name">木藤</th> <td class="open first"></td><td class="open latter"></td> <td class="open first"></td><td class="open latter"></td> <td class="open first"></td><td class="open latter"></td> <td class="open first"></td><td class="open latter"></td> </tr> <tr > <th class="name">藤山</th> <td class="open first"></td><td class="open latter"></td> <td class="open first"></td><td class="open latter"></td> <td class="open first"></td><td class="open latter"></td> <td class="open first"></td><td class="open latter"></td> </tr> </table> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLソースの一部しか示されていないので、質問の内容が読み解けません。 A,とかBは何のことですか？ テーブルのタグと書かれていますが、table内の、td要素の内容のことだとは思いますが、HTMLソースにそれらしきものはありません。 そもそもdixは汎用ブロック要素なのでこのような使い方はしません。きちんとセレクタを使えば必要ないと思います。 簡単でよいですから、該当部分のHTMLを記載してください。 ・table(表)でないものをtableでマークアップするのは良くないです。 ・charset=windows-31jは、Windows環境でないと利用できない可能性があるので、せっかくのXHTMLですから、UTF-8(unicodeにしましょう。
お礼
失礼しました。 補足には添付できないのが知らなかったため、補足文にある ”添付ファイルも見てお願いします。”無視してください。
補足
ありがとうございました。正確のソースは以下の様となります。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> .open{ position:relative; z-index:2; background-color:rgb(255,255,255); } <!-- 出勤の色 --> .open{ background-color:rgb(255,0,255); } <!-- 休みの色 --> .holiday{ background-color:rgb(171,171,171); } <!-- 半休の色 --> .half holiday{ filter:alpha(opacity=50); background-color:rgb(171,1911,191); } </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"> <td>田中</td> </tr> <tr align="center"> <td>木藤</td> </tr> <tr align="center"> <td>藤山</td> </tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> <td width="100" height="23" colspan="2">13時</td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> 半休の時が緑の色を出勤のセールの重ねる。 ★：半休の色は必ずセールの半部じゃんなくてもいいが、重ねた出勤の部分も見せたいので他の方法あれば、教えてお願いします。 添付ファイルも見てお願いします。
お礼
ありがとうございました、 私のやりたいことちゃんと伝えてないと思いますので、 書いていただいたソースを使って、色付けをしてみたが、思った結果ではなかった。 また新しいの質問するので、もしよかったらまたよろしくお願いします。今度はちゃんと画像を添付ますので。