掲示板/スタイルシート質問板/過去ログ/一覧/ スタイルシートが効かないタグ？

0 名前： ００８ ： 2006/05/08（月） 18:14 ID:JgV3gdTm: 初歩的な質問なのかも知れないのですがよろしくお願いいたします。

サイトを作る際にCSSでデザイン面を統一しているのですが、タグによってCSSのwidthやheightの効かない物があるような気がするのですがどうなのでしょうか？

テーブルタグに対してheight１００％を効かせたくてCSSで指定してみても効かず、タグで直接指定したら効いたり、インラインフレームにwidth指定を効かせたくてCSSで指定しても効かず、タグで直接指定したら効いたりします。

極力見た目のサイズ指定などの設定をCSSで一括して指定して、ボディ部分はタグとクラス指定のみで構成しようとがんばっているのですが、上記のような事があって気になったので質問させていただきました。

そういうものなんでしょうか？

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/05/08（月） 18:14 ［URL］ ID:O5hEMlpW

まず、CSSが適用できる／できない対象は、要素であってタグではありません。タグは、ここからここまでが要素である、という目印です。

さて、適用できる／できない要素ですが、公式ルールに書いてあります。

width：
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#the-width-property

適用対象：非置換の行内要素，表行及び行集合を除くすべての要素
　→要するに、a, em, dfn などのインライン、tr、tbodyなどには適用されない

http://www.y-adagio.com/public/standards/tr_css2/visudet.html#the-height-property

適用対象: 行内非置換要素，表要素及び列集合を除くすべての要素
　→要するに、a, em, dfn などのインライン、table、colgroup などには適用されない

> テーブルタグに対してheight１００％を効かせたくてCSSで指定してみても効かず

はい、効きません（ブラウザ独自拡張で良ければ、他のテクニックと組み合わせて可能）。

> タグで直接指定したら効いたり、

table要素の height属性は、公式には存在しません（ブラウザ独自拡張です）。

> インラインフレームにwidth指定を効かせたくてCSSで指定しても効かず

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
iframe{
	width: 50%;
}
</style>
</head>
<body>
<p><iframe src="http://www.google.co.jp/"><a href="http://www.google.co.jp/">google</a></iframe></p>
</body>
</html>

効きますが？

2 名前： ００８ ： 2006/05/08（月） 18:14 ID:JgV3gdTm

カヅサツさん、お返事ありがとうございます。

そうなんですね。CSSを適用できる／できないというのが要素ごとに決まっていると言う事なんですね。そういうのがあると言う事を知っていると、今後CSSが効かない場面に遭遇しても納得できます。

<!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"> 
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>ああああ</TITLE>
<META NAME="Keywords" CONTENT="キーワード">
<META NAME="Description" CONTENT="コメント">
<STYLE TYPE="text/css">
<!-- 

 /* 案内文テーブル */

.mein_table {
 width: 445px;
 line-height: 1.3em;
 border-collapse: collapse; 
 border: 2px #87CEFA solid;
 margin: 3px 0px 20px 0px; } 

.mein_table th {
 text-align: center;
 background-color: #C8F1FF;
 border: 1px #87CEFA solid;
 padding: 1px 0px 0px 0px; }

 /* 案内文本文バック　左右 */

.box_table {
 width: 100%;
 border-collapse: collapse; 
 margin: 5px 0px 5px 0px; } 

.box_td_left {
 width: 50%;
 text-align: center;
 vertical-align: top;
 border-right: 1px #6495ED dashed;
 padding: 0px 0px 0px 0px; } 

.box_td_right {
 width: 50%;
 max-width: 50%;
 text-align: left;
 vertical-align: top;
 padding: 0px 0px 0px 0px; } 

 /* 案内文本文テキスト */

.txt {
 text-align: left;
 margin: 0px 0px 0px 0px;
 padding: 5px 5px 5px 20px; }

iframe {
 white: 100%; }

--> 
</STYLE> 

</head>
<body>
	<table class="mein_table" summary="table">
		<tr>
			<th>ああああ</th>
		</tr>
		<tr>
			<td>
				<table class="box_table" summary="table">
					<tr>
						<td class="box_td_left">
							<div class="txt">
      							<a href="">ああああ</a><br>
       							<a href="">ああああ</a><br>
      						</div>
						</td>
						<td class="box_td_right">
							<iframe frameborder="1" src=""></iframe>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

インラインフレームにwidth指定なんですが、以上のようにCSSを指定しても効きません。
要素にwidth属性を直接指定すると効きました。

本来はCSSでの指定でOKということなのでしょうがなぜ上記のようだと効かないのか、わからないです。カヅサツさんの示してくれたタグだとちゃんと５０％になっていました。

3 名前： Z ◆XTzyosZXcL ： 2006/05/08（月） 18:14 ID:v5nGHgzA: 　慌てない慌てない(^^;

>> white: 100%; }
「白１００％」になってますよ(^^;

4 名前： ００８ ： 2006/05/08（月） 18:14 ID:JgV3gdTm: ああああ！！！！！！

すみません！！

英語の勉強から出直します。

Zさん、ありがとうございました！

天然ボケですみませんでした。