- ベストアンサー
CSSのテーブルについて教えて下さい。
- CSSのテーブルについて教えて下さい。h1が適用されず、表の枠線が黒になりません。また、(休診)を赤にしたいのですが表示されません。どこをどう直したらいいのか教えて下さい。
- CSSのテーブルについて質問があります。h1が適用されず、表の枠線が黒にならない問題があります。また、(休診)を赤にしたいのですが表示されません。解決策を教えてください。
- CSSのテーブルに関する質問です。h1が適用されない問題と、表の枠線が黒にならない問題が発生しています。さらに、(休診)を赤にしたいのですが表示されません。修正方法を教えてください。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
CSSの設置方法で、どこかでミスしているだけでしょう。 CSSが効かない事はありえないので、単純なミスしか考えられません。 １、 CSSファイルが適応されていない。 例えば、 <link rel="stylesheet" href="sample.css" type="text/css"> このsample.cssの部分の名前と、実際のファイル名の相違・・・ または、表記ミスなど。 ２、 CSSへのパス（保存場所）のミス ３、 キャッシュが効いている・・・ リロードやスーパーリロード！ ４、 #1さんが云う、DOCTYPEは無関係。どっちでも良い。 CSSの内容自体にミスは無いようです。下記ソースでお試しを。 <html> <head> <style type="text/css"><!-- h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-size: large; } caption{ color: #996666; padding-bottom: 14px; } table{ border: solid 2px; border-collapse: collapse; text-align: center; } th,td { width: 70px; padding: 5px; border: solid 1px #000000; } th { background-color:silver;} em { color: red; font-weight: bold; } th.col01{ width: 100px; } --></style> </head> <body><div> <h1>外来診療のご案内</h1> <table> <caption>外来診療 予定表</caption> <tr><th class="col01">診察科</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th><th>日</th></tr> <tr><th>一般歯科</th><td rowspan="4"><em>休診</em></td><td colspan="5">◯</td><td rowspan="4"><em>休診</em></td></tr> <tr><th>小児歯科</th><td>◯</td><td> </td><td>◯</td><td> </td><td>◯</td></tr> <tr><th>歯列矯正</th><td> </td><td>◯</td><td> </td><td>◯</td><td> </td></tr> <tr><th>審美歯科</th><td> </td><td>◯</td><td> </td><td> </td><td>◯</td></tr> </table> <p>border: solid 2px;にborder-colorを設定しないとデフォ色になる</p> </div></body> </html>
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
table[summary="schedule"]{ line-height:2em; } line-heightを加えておいたほうがよいかも。td,thにpaddingでも。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いや、HTMLもスタイルシートもとってもまずい。 スタイルシートを利用する一番の目的は文書構造を記述するHTMとプレゼンテーションを指定するスタイルシートの役割分担ですよ。そのHTMLはプレゼンテーション目的で書かれているから意味不明ですし、スタイルシートを文書構造を利用できないから複雑なものになってしまう。 スタイルシートに誤りはないので、他の部分でより詳細度が高い設定があり、上書きされているのでしょう。(ひょっとしてリセットスタイルを書いているとか） ★class名に文書構造上意味のないものは書かない!! ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済みのHTML4.01strict+CSS2.1です。 ★スマホでも利用できるように幅は指定してありません。(ウィンドウ幅を縮めて確認) ★セレクタやカスケーディングと言う大事な部分が身についていないようです。 それを知らないとカスケーディングスタイルシートを使えません。 ⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) ★タブは＿に置換してあるので戻す。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header h1{ margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; } table[summary="schedule"]{ width:80%; max-width:800px; margin:0 auto; border: solid 2px black; border-collapse: collapse; text-align:center;/* 継承されるプロパティ */ } table[summary="schedule"] th,table[summary="schedule"] td{ border: solid 1px black; } table[summary="schedule"] th{background-color:silver;} table[summary="schedule"] em{color:red;font-weight: bold;font-style:normal;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>外来診療のご案内</h1> ＿</div> ＿<div class="section"> ＿＿<table summary="schedule" border="1"><!-- summaryは必須です。 --> ＿＿＿<caption>外来診療 予定表</caption> ＿＿＿<tbody><!-- 必須です。 --> ＿＿＿＿<tr> ＿＿＿＿＿<td>診察科</td> ＿＿＿＿＿<th abbr="Mon">月</th><!-- thにabbrは必須です。 --> ＿＿＿＿＿<th abbr="Tue">火</th> ＿＿＿＿＿<th abbr="Wed">水</th> ＿＿＿＿＿<th abbr="Thu">木</th> ＿＿＿＿＿<th abbr="Fri">金</th> ＿＿＿＿＿<th abbr="Sat">土</th> ＿＿＿＿＿<th abbr="Sun">日</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="generalPractice">一般歯科</th> ＿＿＿＿＿<td rowspan="4"><em>休診</em></td> ＿＿＿＿＿<td colspan="5">◯</td> ＿＿＿＿＿<td rowspan="4"><em>休診</em></td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="pedodontics">小児歯科</th> ＿＿＿＿＿<td>◯</td> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td>◯</td> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td>◯</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="orthodontics">歯列矯正</th> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td>◯</td> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td>◯</td> ＿＿＿＿＿<td></td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="cosmeticDentistry">審美歯科</th> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td>◯</td> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td></td> ＿＿＿＿＿<td>◯</td> ＿＿＿＿</tr> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- DrFell
- ベストアンサー率55% (305/551)
すごく細かい指定のｃｓｓですね？ Cssは継承するのをご存知でしょうか？おそらく他の親要素の指定が有効で、tableにした指定が詳細度で負けているので、反映されないのでは？と推察します。拝見したｃｓｓは詳細度昔の言いかたで言うと、１～11点でかなり弱い指定となります。今の言い方だと（0,0,0,1）～（0,0,1,1）。 Cssは指定する為に、すべてclassをつけるという物ではありません。親要素の継承やセレクタをきちんと理解して使う事により、classを有効につけ、簡単にhtmlやCssの管理をすることができます。 拝見したソースがそのページのすべてだとすると、私ならこう組みます。そのまま、コピペして、このソースのみの新しい、テストｈｔｍｌファイルを作り表示してみてください。 <html> <head> <style> h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-weight: bold; font-size: large; } /*hyou*/ caption{ color: #996666; padding-bottom: 14px; text-align: center; } table{ width: 800px; border: solid 2px ; border-collapse: collapse; table-layout: fixed; } tbody th{width:100px;} th,td { border: solid 1px #000000; text-align:center; } th { background-color:silver; font-weight: bold; } em { color: red; font-weight: bold; } </style> </head> <body> <div class="sofubo">/*これ、本来は不要だけど、後述の為*/ <div class="oya" id="oya">/*これ、本来は不要だけど、後述の為*/ <h1>外来診療のご案内</h1> <table> <caption>外来診療 予定表</caption> <thead> <tr> <th>診察科</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> <th>日</th> </tr> </thead> <tbody> <tr> <th>一般歯科</th> <td rowspan="4"><em>休診</em></td> <td colspan="5">◯</td> <td rowspan="4"><em>休診</em></td> </tr> <tr> <th>小児歯科</th> <td>◯</td> <td> </td> <td>◯</td> <td> </td> <td>◯</td> </tr> <tr> <th>歯列矯正</th> <td> </td> <td>◯</td> <td> </td> <td>◯</td> <td> </td> </tr> <tr> <th>審美歯科</th> <td> </td> <td>◯</td> <td> </td> <td> </td> <td>◯</td> </tr> </tbody> </table> </div></div>/*これ、本来は不要だけど、後述の為*/ </body> </html> さて、本題ですが、他にCssを指定していませんか？その表の親要素、や親の親要素おそらくdivがhtmlにあり、その要素に、idや、複数のclass指定がありませんか？そうすると、class1つの弱い指定では前の指定に負けてしまう、どういうことかというと、以下のｃｓｓを先のテストhtmlに足してみてください。 .sofubo #oya{color:green;}/*ここ詳細度 [0,1,1,0] 110点*/ #oya em {/*ここ詳細度 [0,1,0,1] 101点*/ color: blue; font-weight: bold; } #oya table,#oya td,#oya th{ /*ここすべて詳細度 [0,1,0,1] 101点*/ border:2px pink solid; } すると、さっきの指定が違う物に化けてしまうと思います。継ぎたした物の方が詳細度が高いからです。 こういう現象が、wanchu さんの今回提示されていない部分で起こっている可能性が高いと思われます。ご自分の理解されていない、テンプレートなど使っておられませんか？詳細度を理解したうえで、確認されると原因が見つかる筈です。詳細度はCssの根幹部分に当たりますので、勉強されるとことお勧めします。
