人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>
????????????????????????

●質問者: rrr3
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:COLOR RED WIN カラー クラス
○ 状態 :終了
└ 回答数 : 3/5件

▽最新の回答へ

1 ● じゃっくそにっく
●27ポイント

こんにちは。

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

div で囲む場合は、

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

.divのクラス名 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>
<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

◎質問者からの返答

ありがとうございます!

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

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

全てのtdに

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


2 ● tezcello
●27ポイント

前半の回答は、

<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


3 ● じゃっくそにっく
●26ポイント

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ