HP制作 スタイルシートに関してwin


<table>
<tr>
<td>
テーブル
<table>
<tr><td>1</td><td>いち</td></tr>
<tr><td>2</td><td>に</td></tr>
</table>
</td>
</tr>
<tr>
<td>
上はテーブルです
</td>
</tr>
</table>

「質問です」
上記はテーブルの入れ子です。
ここに出てくる文字(テーブル、1、2、いち、に、上はテーブルです)を全て
font 11px
カラー red
にするにはどういうクラスにすればいいですか?

divで挟む下記はだめなんでしょうか?だめならどうしてですか?
------------------------
.setei:{
font-size11;
font-color red;
}

<div class="setei">
<table>
<tr>
<td>
テーブル
<table>
<tr><td>1</td><td>いち</td></tr>
<tr><td>2</td><td>に</td></tr>
</table>
</td>
</tr>
<tr>
<td>
上はテーブルです
</td>
</tr>
</table>
</div>
------------------------

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/05/30 22:07:50
  • 終了:2007/06/06 22:10:03

回答(5件)

id:jack_sonic No.1

じゃっくそにっく回答回数123ベストアンサー獲得回数252007/05/30 22:44:18

ポイント27pt

こんにちは。

tdに対して設定する必要があります。

div で囲む場合は、

tdはdivの中に入っているので、包含関係を考慮して、

.divのクラス名 td { }

という風に、記述する必要があります。

(半角空白を間にあけます)


  • tdすべてに設定するケース
<html>
<head>
<style>
td{
	font-size :11px;
	color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
テーブル
<table>
<tr><td>1</td><td>いち</td></tr>
<tr><td>2</td><td>に</td></tr>
</table>
</td>
</tr>
<tr>
<td>
上はテーブルです
</td>
</tr>
</table>
</body></html>
  • seiteiクラスのdiv の中に含まれる td に設定するケース
<html><head>
<style>
.setei td{
	font-size :11px;
	color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
テーブル
<table>
<tr><td>1</td><td>いち</td></tr>
<tr><td>2</td><td>に</td></tr>
</table>
</td>
</tr>
<tr>
<td>
上はテーブルです
</td>
</tr>
</table>
</body></html>

http://www.seo-equation.com/html/css/box

id:rrr3

ありがとうございます!

>>seiteiクラスのdiv の中に含まれる

こちらはどのように設定すればいいですか?

全てのtdに

<td class="setei">と記述必要でしょうか?

2007/05/31 13:25:33
id:tezcello No.2

tezcello回答回数460ベストアンサー獲得回数692007/05/30 23:43:31

ポイント27pt

前半の回答は、

<style>
<!--
table {
  font-size: 11px;
  color: red;
}
-->
</style>

を head タグ内に記述すればよいでしょう。


後半の回答はDOCTYPE宣言が正しくなされていない為、旧来の(CSS的に正しくない)表示になってしまうのでしょう。

試しに、HTMLファイルの先頭に

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

を入れてやると正常に表示されると思います。

尚、質問文中の記述は誤りの様ですね。

div タグでくくるのならこんな感じです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html>
<head>
<title></title>
<style>
<!--
.setei {
  font-size: 11px;
  color: red;
}
-->
</style>
</head>
<body>
<div class="setei">
<table border="1">
<tr>
  <td>テーブル<br>
    <table border="3">
      <tr><td>1</td><td>いち</td></tr>
      <tr><td>2</td><td>に</td></tr>
    </table>
  </td>
</tr>
<tr>
  <td>上はテーブルです</td>
</tr>
</table>
</div>
</body>
</html>

参考

http://www.seo-equation.com/www/cat25/doctype_switching

http://www.mozilla.gr.jp/standards/webtips0014.html

id:jack_sonic No.3

じゃっくそにっく回答回数123ベストアンサー獲得回数252007/05/31 15:30:31

ポイント26pt

seteiクラスのdiv の中に含まれる

こちらはどのように設定すればいいですか?

全てのtdに

<td class="setei">と記述必要でしょうか?

いえ、

<div class="setei"> ~ </div>

の範囲の中に含んでいれば、

ブラウザが自動で包含関係を判断し、

seteiのDIVの中に入っているtdにだけスタイルを適用

してくれます。

 .setei table td { font-size:11px; color:red; }

=seteiというクラス名がついたタグの中にある、

table の中にある、td タグに対してスタイルを適用する。


<html><head>
<style>
.setei table td{
	font-size :11px;
	color:red;
}
</style>
</head>
<body>

<div class="setei">
<table>
<tr>
<td>
setei(div)内に含まれるテーブル
<table>
<tr><td>1</td><td>いち</td></tr>
<tr><td>2</td><td>に</td></tr>
</table>
</td>
</tr>
<tr>
<td>
上はテーブルです
</td>
</tr>
</table>
</div>

<table>
<tr>
<td>
setei(div)内に含まれないテーブル
<table>
<tr><td>1</td><td>いち</td></tr>
<tr><td>2</td><td>に</td></tr>
</table>
</td>
</tr>
<tr>
<td>
上はテーブルです
</td>
</tr>
</table>

</body></html>

適用した表示サンプル

http://f29.aaa.livedoor.jp/~morg/wiki/sample/tablex.html

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 naleringar 110 105 5 2007-05-30 22:40:36
2 Q-A 106 99 16 2007-05-30 23:34:48

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません