/* CSS･スタイルシート質問スレッド【36】 */

このエントリーをはてなブックマークに追加
929 ：Name_Not_Found：04/10/23 02:07:50 ID:???
ふんにゃか。ふんにゃか。
930 ：Name_Not_Found：04/10/23 02:20:31 ID:???
質問させてください。
CSSで
div.boxbox h1,h2,h3 {
color: #FF0000 ;
}

HTMLで
<div class="DekaBox">
<div class="boxbox">
<h2>たいとーる</h2>
</div>
<div class="boxbox2">
<h3>２ちゃんねるについて</h3>
<p>あひゃひゃひゃひゃひゃひゃ<br />あひゃひゃひゃ</p>
</div>
</div>

と記述すると、"boxbox2"の部分のh3も赤くなってしまいます。

div.boxbox h1 {
color: #FF0000 ;
}
div.boxbox h2 {
color: #FF0000 ;
}
div.boxbox h3 {
color: #FF0000 ;
}
と記述すると正常（"boxbox"内のh1〜3だけ赤）になります。

これはSafari 1.2で発生していて、Netscape、Firefoxなどでは発生しませんでした。
これはSafariのバグでしょうか？
931 ：Name_Not_Found：04/10/23 02:41:09 ID:???
div.boxbox h1,h2,h3 {
color: #FF0000 ;
}

は

div.boxbox h1 { color:#FF0000; }
h2 { color:#FF0000; }
h3 { color:#FF0000; }

と等価。
だが Netscape、Firefoxなどでは発生しないというのは……。
他のところで何か指定してあるのが効いてるというのでなければ
嘘くさいな。
932 ：Name_Not_Found：04/10/23 03:09:04 ID:???
>>930
MozillaでもNetscapeでもFireFoxでも発生したよ。
933 ：930：04/10/23 03:34:35 ID:???
え、マック版だとならないんですが、、、。

>>931
なるほど、
(div.boxbox h1）、(h2）、（h3）と解釈されてしまうわけですね。

div.appleboxtop h1,div.appleboxtop h2,div.appleboxtop h3 {ごにょごにょ;}
と記述したら治りました。

ありがとうございました。
934 ：Name_Not_Found：04/10/23 03:47:45 ID:???
>>933
>え、マック版だとならないんですが、、、。
そんなはずはないんですが……。
大事なことだから、最小限のソースで実験して、報告してくれませんか。
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
935 ：Name_Not_Found：04/10/23 10:50:55 ID:???
>>916
見出しに使うならdisplay:inlineにすればいいんじゃね?
複数行にならなければblockと同じに見える。
936 ：Name_Not_Found：04/10/23 13:24:39 ID:K3Wlf5eM
>>904
<h1></h1>内に下線を入れたいと言うことならば、
h1{text-decoration:underline;}
でいいんでない？
borderでなければというのならば、
h1{display:inline;border-bottom:1px solid #000}
だけれど。
937 ：930=933：04/10/23 13:59:23 ID:???
>>934
何度やっても同じ結果だったのですが、再起動したら
すべてのブラウザで同じ動作をしました。どうやら
何度もリロードしたにもかかわらずキャッシュが残っていたようです。
お騒がせしました。
938 ：Name_Not_Found：04/10/23 14:13:26 ID:???
ふんにゃか。ふんにゃか。
939 ：Name_Not_Found：04/10/23 15:23:30 ID:???
>>936
無事できました。有り難う。
940 ：Name_Not_Found：04/10/23 16:03:10 ID:???
ふんにゃか。ふんにゃか。
941 ：Name_Not_Found：04/10/23 16:34:10 ID:???
ぬるぽ ぬるぽ。
942 ：Name_Not_Found：04/10/23 18:05:13 ID:???
ふんにゃか。ふんにゃか。
943 ：Name_Not_Found：04/10/23 19:23:56 ID:???
ここではそれは要らんよ
944 ：Name_Not_Found：04/10/23 20:23:09 ID:???
左側は画像、右側はテキストの様にボックス２つ並べてるんですが、
ウインドウサイズの幅を縮めると、右側のボックスが左のボックスの下に
潜っちゃいます。

潜らない様に、固定させるにはどーすりゃいいんですか？
945 ：Name_Not_Found：04/10/23 20:26:00 ID:???
ソース出しなさいよ。
946 ：Name_Not_Found：04/10/23 21:40:02 ID:???
URL出せ
947 ：Name_Not_Found：04/10/23 23:15:12 ID:???
>>944
スタイルシートではないけれど
<IMG SRC="1.jpg" ALIGN="left" HEIGHT="50%" WIDTH="50%" HSPACE="10">
948 ：Name_Not_Found：04/10/23 23:21:16 ID:???
HSPACEって何？
949 ：Name_Not_Found：04/10/23 23:30:22 ID:???
知らんのか。とほほでも見てきな。
950 ：Name_Not_Found：04/10/23 23:33:11 ID:???
普通にimg border:0px;でやってるし。
951 ：Name_Not_Found：04/10/24 00:17:14 ID:???
日本語変だぞ。
952 ：Name_Not_Found：04/10/24 00:27:17 ID:???
>>944
画像にfloat:leftで右にテキストを流し込むようにする。
画像はwidthで幅固定。テキストは画像の幅の分だけ左マージンを空ける。
てか>>6
953 ：Name_Not_Found：04/10/24 09:00:38 ID:???
えーっと、結局ボックスを使っちゃ俺の思ってる通りにはならんよ、
って事なんでしょうか。

DWのサンプルの場合、左ボックスに75%の幅を設定、
右のボックスには幅を指定せず、左マージンに79%のマージン設定して
二つが並ぶ様にしてあるんだけど、あれは一体どういう意味の工夫なんでしょうか？

アフォな俺の頭では、左75％なら右も25%のボックスをフロートで並べて終わり
なんだけど…。
954 ：944：04/10/24 09:01:06 ID:???
あ、953はあっしの書き込みでやんす。
955 ：Name_Not_Found：04/10/24 09:05:33 ID:???
>>953
左右ボックスを含む親ボックスの幅を指定する。
956 ：944：04/10/24 09:17:03 ID:???
>>955
親ボックスに幅100%、
オーバーフローは非表示にしてるんですけど…。
それとも幅は%指定じゃ駄目なんでしょうか。

右側のボックスが、スルリと左のボックスの下に逃げ込んじゃうの。
なんとかしてー。

ところでソース出せって、どこまで出したら良いんでしょ？
957 ：Name_Not_Found：04/10/24 09:38:02 ID:???
>>956
幅100%だとビミョウにはみ出すよ。
マージンとかパディングとかボーダーとか、スクロールバーの幅とかあるから。
幅95%あたりにしてみたら？

>スルリと左のボックスの下に逃げ込んじゃうの。
改行って言え。
958 ：Name_Not_Found：04/10/24 09:41:22 ID:???
>>953
> アフォな俺の頭では、左75％なら右も25%のボックスをフロートで並べて終わり
> なんだけど…。

それが、まさしく「右側のボックスが、スルリと左のボックスの下に逃げ込んじゃう」
ようにするやり方。自らその方法を積極的に取り入れておいて何がご不満か？
floatでフワフワ浮いてる状態なんだから、ウィンドウサイズが変わると移動するに
決まっておるだろ。

DWのサンプルは、>>952の説明と同じ。

てか>>6

952も6もちゃんと読んだ上での再質問か？
959 ：944：04/10/24 10:43:14 ID:???
わかりました。わかりました。これですね。
正直FAQ読んでもアフォだからピンと来ませんでした。すんません。
---------------------------------------------------------------------------------------------
ブロック自体を横並びにするには、後続要素にも“float:left;”なり
“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。
WinIEの間違った実装で誤解が多いので注意。
---------------------------------------------------------------------------------------------
親ボックスに幅95%
左コンテンツは550ピクセル幅指定、flolat;left
右ボックスはmargin-left:560ピクセル
safari では"改行" しない様になりましたが、
右ボックス内の内容が表示されません。

右ボックスはmargin-left:を指定しないと割と思った通りなんだけど、
おかしいですよね？？
960 ：Name_Not_Found：04/10/24 11:13:47 ID:???
自分のサイトデザイン変え様かと思うけど(・∀・)ｲｲ!!デザイン思い浮かばない・・・
カッコ(・∀・)ｲｲ!!サイトｵｼｴﾚ。
961 ：Name_Not_Found：04/10/24 11:38:41 ID:???
>>959　情報小出し、よくない。HTMLとCSSのソースを出せ。でないと修正してやれないぞ。
962 ：Name_Not_Found：04/10/24 12:18:16 ID:???
すいません。自己解決しました。
963 ：Name_Not_Found：04/10/24 12:50:18 ID:???
ん、>>962は>>960か？
964 ：944：04/10/24 13:49:30 ID:???
>>961
度々すんません。HTMLは以下の様な感じです。
先日教えてもらった情報を参考にほぼいい感じなんですが…。
<body>
<div id="container">
<div id="topnav">
</div>
<div id="content">
<p><img src="img/***1.jpg" width="120" height="200"><img src="img***2.jpg" width="400" height="360"></p>
</div>
<div id="links">
<div class="newLinks">
<h3>トピックス</h3>
<ul>
<li><a href="http://*******" title="内容" target="_self">内容の説明分</a></li>
</ul>
</div>
</div>
<br style="clear:both;">
<div id="footer">
<img src="img/*******.gif" width="125" height="20"> ©2001-2004 ******** co.ltd.</div>
</div>
</body>
</html>
965 ：944：04/10/24 13:53:11 ID:???
CSSは抜粋しました。

body{font-family: Arial,sans-serif;
color: #333333;line-height: 1.166;margin: 0px;
padding: 0px;overflow: auto;
}

#container {background-color: #669900;white-space: nowrap;
width: 95%;overflow: hidden;
border: medium solid #000000;margin: 10px 2%;
}

#topnav{border-bottom: medium solid #000000;
background-color: #FFFFCC;
white-space: nowrap;padding-bottom: 5px;
}

966 ：944：04/10/24 13:55:30 ID:???
#content{background-color: #FFFFFF;
border-right: medium solid #333333;
width: 550px;overflow: hidden;white-space: nowrap;
height: auto;padding: 20px 10px;text-align: center; float: left;
}

#links{background-color: transparent;
padding-top: 5px;padding-bottom: 5px;white-space: nowrap;
overflow: hidden;height: auto;width: auto;
padding-left: 10px;margin-left: 560px;
}


#footer{font-size: small;
color: #333333;text-align: center;background-color: #FFFFCC;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
padding-top: 5px;padding-bottom: 5px;
vertical-align: bottom;white-space: nowrap;
border-top: medium solid #333333;
}
967 ：Name_Not_Found：04/10/24 15:11:45 ID:???
すみません、教えてください。
下記のようなページを作成したのですが、ネスケ6でみると青(#0000FF)の部分が表示されません。
ネスケ7やIE6、Opera6では正常に表示されました。
ネスケ6でも青(#0000FF)の部分を表示させるにはどうすればよろしいでしょうか？


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
#1 {width:500px; background-color: #0000FF;float: left;}
#2 {width:200px; background-color: #FF0000;float: left;}
#3 {width:300px; background-color: #00FF00;float: right;}
-->
</style>
</head>
<body>
<div id="1">
<div id="2"> id "2" の内容がここに入ります</div>
<div id="3"> id "3" の内容がここに入ります<br><br><br><br><br></div>
</div>
</body>
</html>
968 ：Name_Not_Found：04/10/24 15:38:19 ID:???
>>967
1.内容が全てフロートしたら高さ0になるので、表示されないのが正常。
　:afterでdisplay:block;clear:bothすれ。
2.idは数字から始めることはできない。

969 ：Name_Not_Found：04/10/24 16:20:32 ID:???
このスレでカッコ(・∀・)ｲｲ!!っていうデザインｵｼｴﾚ。
970 ：Name_Not_Found：04/10/24 17:52:43 ID:???
>>967
ネスケ6のことは忘れろ。
971 ：Name_Not_Found：04/10/24 21:04:33 ID:???
文章が左上に寄りすぎてるので、右下にずらしたいのだが
どうすればいいんだ？
972 ：Name_Not_Found：04/10/24 21:31:36 ID:???
marginかpadding使え。

　って　もっと詳しく書けぃ
973 ：Name_Not_Found：04/10/24 21:38:53 ID:???
てぃてぃ(・∀・)ﾉ てぃ〜
974 ：Name_Not_Found：04/10/24 22:00:29 ID:???
padding って上左下右の位置指定できるが右と下って指定しても意味ないよな？？
975 ：944：04/10/24 22:03:25 ID:???
今日一日、あーたらこーたらやってましたが
結局思う様にならず…つД`)･ﾟ･｡･ﾟﾟ･*:.｡
976 ：Name_Not_Found：04/10/24 22:33:47 ID:???
>>974
borderで囲ったときなんかは、右も下も隙間開けないと読みにくくなるよ。
977 ：Name_Not_Found：04/10/24 22:38:11 ID:???
>>974
表とかの時は、右と下は指定しないと読みにくい。

それと、指定した位置で改行するにはどうすればいいんだっけ？
デザイン変えてたら横にスクロールするようになって、デザインｶﾞﾀｶﾞﾀだよ（泣
978 ：Name_Not_Found：
>>965-966
なんか、要らん指定が多い感じ。もっとスッキリしようや。
#linksへのoverflow: hidden; ってなんのために指定してるのさ？
それを削ればSafariでも正常に表示される。