- 締切済み
background-color ｃｓｓ
目的：社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!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{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </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> <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> </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="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </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> </tr> <tr > <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rev"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
【訂正】 ＞ また、透過色という方法はありませんが、特定の要素の背景に透過GIFで、背景色の上に重ねることは【不可能】です。もしくは、単純に重ねたような色をつけるしかありません。 は また、透過色という方法はありませんが、特定の要素の背景に透過GIFで、背景色の上に重ねることは【可能】です。もしくは、単純に重ねたような色をつけるしかありません。 ＞単純に重ねたような色をつけるしかありません。 背景色をサンプルを作られたように変えるだけ
- ORUKA1951
- ベストアンサー率45% (5062/11036)
問題が解決しないまま回答を締め切ると、利用者が迷ってしまいます。必要なときは、改めて質問をしてから、そのページへのリンクを記入してください。 拝見するソースでは、スタイルシートをはずしたとき、まったく意味を成さない表になってしまうので、携帯端末や読み上げブラウザは無論、スタイルシートを解除するとまったく意味不明になります。 また、透過色という方法はありませんが、特定の要素の背景に透過GIFで、背景色の上に重ねることは不可能です。もしくは、単純に重ねたような色をつけるしかありません。 結果的に、ある情報の入ったデータを色分けして表を作るには、XML+XSLTの組み合わせが一番良い方法ではあります。【後述】 さて、この場合HTMLを作成すると、勤務表部分は正しく作ると下記のようなものになると思います。 ★tableの横(行)は必ず関連したものであること(tableの入れ子はまずい。 他と区別させるために、必要ならスタイルシートで指定する。 ★表示させる、させないはスタイルシートで行う。 スタイルシートがなくても読み取れること セル内が空、ないし空白文字だけは禁止(空白を表示するかしないかはスタイルシートで) これができれば、あとは簡単ですね。・・・時間が取れたときに、スタイルシート(CSS)は作成します。 <table> <tr> <th>氏名1</th> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> <td><span class="rest"><del>勤務</del><ins>休み</ins></span></td> <td><span class="rest"><del>勤務</del><ins>休み</ins></span></td> <td><span class="rest"><del>勤務</del><ins>休み</ins></span></td> <td><span class="rest"><del>勤務</del><ins>休み</ins></span></td> </tr> <tr > <th>氏名2</th> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> <td><span class="open">休み</span></td> </tr> <tr > <th>氏名3</th> <td><span class="rev">予定</span></td> <td><span class="rev">予定</span></td> <td><span class="open">休み</span></td> <td><span class="rev">予定</span></td> <td><span class="rev">予定</span></td> <td><span class="open">休み</span></td> </tr> <tr > <th>氏名4</th> <td><span class="rest"><del>予定</del><ins>休み</ins></td> <td><span class="rest"><del>予定</del><ins>休み</ins></td> <td><span class="rest"><del>予定</del><ins>休み</ins></td> <td><span class="rest"><del>予定</del><ins>休み</ins></td> <td><span class="rest"><del>予定</del><ins>休み</ins></td> <td><span class="rev">予定</span></td> </tr> </table> 【XMLから】 たとえば、次のような簡単なXMLを作成し、XSLTによってHTML煮変換する。時間が取れたときにスタイルシート(XSLT)は作成します。CSSは前のものを使う予定。 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="./works.xsl"?> <worksTable> <works> <name>田中</name> <am timeFrom="1000">出</am timeFrom="1000"><am timeFrom="1030">出</am timeFrom="1030"> <am timeFrom="1100">出・休</am timeFrom="1100"><am timeFrom="1130">出・休</am timeFrom="1130"> <am timeFrom="1200">出・休</am timeFrom="1200"><am timeFrom="1230">出・休</am timeFrom="1230"> <am timeFrom="1300">出・休</am timeFrom="1300"><am timeFrom="1330">出・休</am timeFrom="1330"> <am timeFrom="1400">出・休</am timeFrom="1400"><am timeFrom="1430">出・休</am timeFrom="1430"> <am timeFrom="1500">出</am timeFrom="1500"><am timeFrom="1530">出</am timeFrom="1530"> </works> <works> <name>島村</name> <am timeFrom="1000">休</am timeFrom="1000"><am timeFrom="1030">休</am timeFrom="1030"> <am timeFrom="1100">休</am timeFrom="1100"><am timeFrom="1130">休</am timeFrom="1130"> <am timeFrom="1200">休</am timeFrom="1200"><am timeFrom="1230">休</am timeFrom="1230"> <am timeFrom="1300">休</am timeFrom="1300"><am timeFrom="1330">休</am timeFrom="1330"> <am timeFrom="1400">休</am timeFrom="1400"><am timeFrom="1430">休</am timeFrom="1430"> <am timeFrom="1500">休</am timeFrom="1500"><am timeFrom="1530">休</am timeFrom="1530"> </works> <works> <name>喜田村</name> <am timeFrom="1000">予</am timeFrom="1000"><am timeFrom="1030">予</am timeFrom="1030"> <am timeFrom="1100">出</am timeFrom="1100"><am timeFrom="1130">出</am timeFrom="1130"> <am timeFrom="1200">予</am timeFrom="1200"><am timeFrom="1230">予</am timeFrom="1230"> <am timeFrom="1300">予</am timeFrom="1300"><am timeFrom="1330">予</am timeFrom="1330"> <am timeFrom="1400">出</am timeFrom="1400"><am timeFrom="1430">出</am timeFrom="1430"> <am timeFrom="1500">予</am timeFrom="1500"><am timeFrom="1530">予</am timeFrom="1530"> </works> <works> <name>林義夫</name> <am timeFrom="1000">予・休</am timeFrom="1000"><am timeFrom="1030">予・休</am timeFrom="1030"> <am timeFrom="1100">予・休</am timeFrom="1100"><am timeFrom="1130">予・休</am timeFrom="1130"> <am timeFrom="1200">出・休</am timeFrom="1200"><am timeFrom="1230">出・休</am timeFrom="1230"> <am timeFrom="1300">出・休</am timeFrom="1300"><am timeFrom="1330">出・休</am timeFrom="1330"> <am timeFrom="1400">予・休</am timeFrom="1400"><am timeFrom="1430">予・休</am timeFrom="1430"> <am timeFrom="1500">休</am timeFrom="1500"><am timeFrom="1530">休</am timeFrom="1530"> </works> </worksTable>
お礼
遅くまで時間をかけて教えてくれてありがとうございました。 結果としてはなるべく添付画像のような感じになりたいですが、文字での表現ではない、xsltのやり方が全くわかりません、本当に初心者の初心者です。 ”＞単純に重ねたような色をつけるしかありません。”というのはどのような表現なのかな、もしまた時間があったら、また教えてお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
このソース自体はどうやって作成するつもりなのでしょうか？ CGIとかPHPで出力？ 人間的な感覚としては、上から被せるというのはわからないでもないですが、必ずしもその通りの処理をする必要はないのでは？ 元のデータがどこかにあるのでしょうから、緊急休みの処理（←これもなんらかのソフトを利用するのですよね？）するときに、予定が入っていなかったらクラスをrest_holidayとし、予定があったらrev_holiday（←仮に追加）とでもするようにしておいて、 rest_holidayもrev_holidayも他のクラスと同様にbackground-colorを設定しておけば良いだけでは？ もちろん、rev_holidayには重なったときのような色合いを設定しておきます。
お礼
ありがとうございました。 画像が使いたくないので、やっぱり思った通りには行かないだね。 複雑なると自分の能力外となるので、まず単純でスタートしようと思って、今度の件が一度締めきります。