- ベストアンサー
CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- fujisato29
- お礼率36% (18/50)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2です。ANo.1様へのレスを読みました。やはり○付数字部分そのものの表示ができていない、という事だったのですね。 具体的なポイントについては既にANo.3様がご指摘ですので省略させて頂いて、オリジナルを最低限手直したサンプルにしようかと思ったのですが、やはり現状のマークアップは「あまりにも」お奨めができないので、ちょっとマークアップから変えさせて頂きました。基本、入れ子構造とHTMLタグの属性の記述を減らしただけで、”テーブル・コーディング”である点についてはそのままにしてあります。 ※以下のサンプルは便宜上head内にまとめてスタイルを記述していますが、先程も申し上げた様にできるだけ外部ファイルでの管理にする方法をお奨めします。 ※ちなみにfilterはIEにのみ有効な効果ですので、IE以外のブラウザで見ると、○付数字の背景の部分は単なる緑色100%塗りつぶしの■で表示されます。 ---------------------------------------------------------------------- 【サンプル1】 ---------------------------------------------------------------------- <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <style type="text/css"> <!-- body { background: url(dolp2.gif) #ffffff; color: #000000; } table { border-collapse: collapse; border: 2px #c0c0c0 solid; background-color: #ffffff; } table.hoge { width: 800px; } table.hoge th, table.hoge td { padding: 5px; border: none; font-size: 25px; } table.hoge th { width: 40px; text-align: center; background: #009500; color: #ffffff; font-weight: bold; filter: Alpha(opacity=100,finishopacity=0,style=2); } table.hoge td { vertical-align: top; } --> </style> </head> <body> <div> <table class="hoge" cellspacing="0" summary="概要"> <tr> <th>１</th> <td>＝＝＝ここに文章を書いて下さい１＝＝＝</td> </tr> （以下、<tr>～</tr>の間をコピペして繰り替えし） </table> </div> </body> </html> ---------------------------------------------------------------------- 上記だと、th全体に対して○付数字の背景のスタイルが与えられている為、tdに入る文章量が長く複数行に渡った場合、背景もthのセルの高さに合わせてびょーんと縦長になります。それではカッコ悪い、というのであれば、thの中にspanでも入れ子にしてそのspanに対して背景と指定してやるやり方もあります。ただし、本来spanはインライン要素ですので、そのままだとfilterの効果は適用されない様です。そこで、spanをブロック要素化して幅を与えるスタイルを追加します。 ---------------------------------------------------------------------- 【サンプル2】 ---------------------------------------------------------------------- （省略、サンプル1と同じ） <style type="text/css"> <!-- （省略、サンプル1と同じ） table.hoge th { width: 40px; text-align: center; } table.hoge th span { display: block; width: 40px; background: #009500; color: #ffffff; font-weight: bold; filter: Alpha(opacity=100,finishopacity=0,style=2); } （省略、サンプル1と同じ） --> </style> （省略、サンプル1と同じ） <th><span>１</span></th> （省略、サンプル1と同じ） ---------------------------------------------------------------------- いかがでしょうか？不具合やわからない点がある様でしたら補足して下さい。
その他の回答 (3)
- askaaska
- ベストアンサー率35% (1455/4149)
> 肝心の緑の丸が写らないのをどうにかしたいと思っているのですが だったら最初からそういいなさい。 白くなって困ると言われたら 黒くしたくなるわよ。 だとしたら簡単よ table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} により設定が上書きされているからよ。 スタイルシートの優先度は タグの属性＜<style>タグ内＜タグのstyle属性よ。 結果次のようになっているわ。 丸ナンバーのテーブルで まず style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);" が設定されるわ。 そこに対し、丸ナンバーの<Td>に<style>で設定している background-color: #ffffff; が上書きされているわけ。 解決方法はパッと思いつくだけで３つ。 ・丸ナンバーをテーブルにしない ・スタイルシートをタグに適用するのではなく、ちゃんとclass名をつける ・丸ナンバーのTdにスタイルシート：背景色を適用する 他にもいろいろあるかもしれないけど 今思いついたのはこのくらいね。
お礼
askaaskaさん、ありがとうございます。 うまくいかなかった原因が分かり、助かりました。
- abril
- ベストアンサー率69% (388/560)
「肝心の数字の部分が真っ白になって」しまった、というのはANo.2様の様に”数字の色を白にするつもりがなかったのに白になってしまった”という意味ですか？であればご指摘の通りですが、添付画像が”本来質問者様が理想とする表示結果”なのであれば、スタイルを含めた○付数字の部分が”全く表示されない”という意味ですか？ もし後者であるなら、細かく検証していないのですが、HTMLの記述にちょこちょこ間違い（ぱっと見ただけでも、divの閉じタグの位置が間違っているとか、cellspacing属性が二重に指定されているとか…）がありますので、一度文法チェッカーにかける事をお奨めしておきます。 あと、スタイルの指定についてですが： > このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 「このようなタイプ」というのが何の事を仰っているのか理解しかねますが、HTMLのマークアップもスタイル指定も適切で間違いがない、という条件を満たしたしているのであれば、外部CSSファイルにして参照しようが、head内に記述しようが、タグ毎にstyle属性で記述しようが、同じ表示結果は得られます。 ただし、特に理由がないのであれば、通常は外部にCSSファイルを置いてスタイル指定は全てそこに記述し、HTMLからはそのCSSファイルを参照するだけにするのがメンテナンスの上で最も効率の良い仕様です。 現状の様に、一部はhead内、一部はタグに直接style属性で記述、というのは不必要にソースがごちゃごちゃしますし、修正が入るとあちこちに手を入れなければならないので非常に効率が悪く、お奨めできないですね。メンテナンスの効率以外の他の問題（継承やセレクタの有効活用、HTML文書としての本来の姿…等々）も含みますが、メンテナンスの効率の点だけを着目しても、 1. 外部CSSファイルに記述して参照する 2. 1ファイル毎にhead内にまとめて記述する 3. 1要素（タグ）毎にstyle属性で記述する …という順位です。1と2の間でも相当な差がありますし、1と3の間などはもはや比べものにならない程の開きがあります。 例えば、以下の3箇所の記述などは1の方法を採用すれば、そこで指定されている全てのスタイル（style属性の部分だけではなく）をまとめる事ができます。 <table border="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#000;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <td align="center" valign="middle">１</td> <td width="350">＝＝＝ここに文章を書いて下さい１＝＝＝</td> その結果、HTML側の記述はそれぞれ単に： <table cellspacing="0"> <td>１</td> <td>＝＝＝ここに文章を書いて下さい１＝＝＝</td> とまでシンプルにする事ができ、スタイルを変えたい場合も、CSSファイル側の指定を変更するだけで、HTML側の全ての対象箇所に一瞬にして反映される事になります。きちんと基礎を押さえて知識を整理して適切な方法を習得すれば一石二鳥以上のものが得られますよ。
- askaaska
- ベストアンサー率35% (1455/4149)
style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);" 自分で文字色を白に指定しているじゃない。
お礼
＞askaaskaさん、ありがとうございます。 これは数字を白抜きにしたいので、あえて白にしてあります。 肝心の緑の丸が写らないのをどうにかしたいと思っているのですが…。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
abrilさん、ありがとうございます。 思い通りに作れました。 やはりスタイルシートにあげたほうがよいのですね。 今後に活かしていきます。