/* CSS・スタイルシート質問スレッド【47px】 */
952 ：Name_Not_Found：2005/10/12(水) 14:48:59 ID:???
>>941 >>949
余分な指定がいっぱいあるが、目をつぶる。
margin-right: auto; margin-left: auto;は標準モードでしか効かないよ。
各widthも合計が 200px＋550px＝750px にしては並ばない。
これをコピペしてやってみて
まず、標準モードにする。 ページのtopに
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
#wrapper{width: 800px;line-height: 100%;
margin-right: auto;margin-left: auto;
padding: 0px;text-align: left;
background-image:url('shadow.jpg');
background-repeat: repeat;}
#container {width: 750px;line-height:100%;margin-right: auto;margin-left: auto;
padding: 0px;text-align: left;background-color: #ffffff;}
#left {
width: 200px;padding-top: 10px;background-color: #FFFFFF;
text-align:center;float:left;
}
#right{width:540px;padding: 15px 10px 15px 0px;
background-color: #FFFFFF;float:right;}
少しずつ勉強してがんばれ。
余分な指定がいっぱいあるが、目をつぶる。
margin-right: auto; margin-left: auto;は標準モードでしか効かないよ。
各widthも合計が 200px＋550px＝750px にしては並ばない。
これをコピペしてやってみて
まず、標準モードにする。 ページのtopに
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
#wrapper{width: 800px;line-height: 100%;
margin-right: auto;margin-left: auto;
padding: 0px;text-align: left;
background-image:url('shadow.jpg');
background-repeat: repeat;}
#container {width: 750px;line-height:100%;margin-right: auto;margin-left: auto;
padding: 0px;text-align: left;background-color: #ffffff;}
#left {
width: 200px;padding-top: 10px;background-color: #FFFFFF;
text-align:center;float:left;
}
#right{width:540px;padding: 15px 10px 15px 0px;
background-color: #FFFFFF;float:right;}
少しずつ勉強してがんばれ。
953 ：Name_Not_Found：2005/10/12(水) 14:50:40 ID:???
改行が多いと・・・ つーのは不便だにゃぁ・・・
954 ：Name_Not_Found：2005/10/12(水) 15:25:27 ID:???
955 ：Name_Not_Found：2005/10/12(水) 16:04:50 ID:???
>>947
http://www.quirksmode.org/browsers/multipleie.html
ここでIE３〜5.5まで落とせる。
インストールとかは必要なし。アイコンクリックするとふつーに各ブラウザ開きます。
ただ多少不具合があるし(お気に入りを押すと落ちるとか)
どういう理屈で動いてるのかとかはわかんないので自己責任でおながいします。
でも便利ﾖ。
http://www.quirksmode.org/browsers/multipleie.html
ここでIE３〜5.5まで落とせる。
インストールとかは必要なし。アイコンクリックするとふつーに各ブラウザ開きます。
ただ多少不具合があるし(お気に入りを押すと落ちるとか)
どういう理屈で動いてるのかとかはわかんないので自己責任でおながいします。
でも便利ﾖ。
956 ：Name_Not_Found：2005/10/12(水) 16:05:28 ID:???
直リンしちゃった・・・ｽﾏｿ
957 ：Name_Not_Found：2005/10/12(水) 16:08:31 ID:???
IE3・・・ナツカスィ。
当時はNN4の圧勝だったんだがなぁ。
いや今も機能的にはN7のがずっと上か。
当時はNN4の圧勝だったんだがなぁ。
いや今も機能的にはN7のがずっと上か。
958 ：918：2005/10/12(水) 17:11:51 ID:/3MUS260
>>919
遅れましたが、ありがとうございました。
さらに質問したいのですが、
IE5.Xとかでコンテナに指定した値にpaddingとかborderに指定した値を含んでしまう問題で、
width: IE用のborderとpaddingに指定した値を含んだコンテナ幅;
voice-family: "\"}\"";
voice-family: inherit;
width: 他の正しく理解するブラウザ用コンテナ幅;
とすることで回避できる、と本(WEB標準デザインテクニック即戦ワークブック)に書いてありました。
今いじってるCSSで、border-leftに5pxを指定しているコンテナについて、
FireFoxとSleipnir（IE）で差があったので、この方法を用いたのですが、結果に差がみられませんでした。
この方法は現在有効ではないのでしょうか？
また、有効でないとしたら、これ以外にこの問題を回避する方法はあるでしょうか。
よろしくおねがいします。
遅れましたが、ありがとうございました。
さらに質問したいのですが、
IE5.Xとかでコンテナに指定した値にpaddingとかborderに指定した値を含んでしまう問題で、
width: IE用のborderとpaddingに指定した値を含んだコンテナ幅;
voice-family: "\"}\"";
voice-family: inherit;
width: 他の正しく理解するブラウザ用コンテナ幅;
とすることで回避できる、と本(WEB標準デザインテクニック即戦ワークブック)に書いてありました。
今いじってるCSSで、border-leftに5pxを指定しているコンテナについて、
FireFoxとSleipnir（IE）で差があったので、この方法を用いたのですが、結果に差がみられませんでした。
この方法は現在有効ではないのでしょうか？
また、有効でないとしたら、これ以外にこの問題を回避する方法はあるでしょうか。
よろしくおねがいします。
959 ：Name_Not_Found：2005/10/12(水) 17:14:27 ID:???
CSSハックを学んで来い。
960 ：Name_Not_Found：2005/10/12(水) 17:16:05 ID:???
961 ：Name_Not_Found：2005/10/12(水) 17:33:25 ID:???
ていうか今時IE5に対応せなあかんの？orz
962 ：Name_Not_Found：2005/10/12(水) 17:41:48 ID:???
>>961
俺のサイトでの結果を参考までに・・・
解析対象ヒット回数2220118(期間は1年)
# Microsoft Internet Explorer 6 2098603 (94.53%)
# Microsoft Internet Explorer 5 68749 (3.10%)
# Mozilla 26477 (1.19%)
# Opera 13867 (0.62%)
# Netscape 7 4128 (0.19%)
# Netscape 4 2687 (0.12%)
# Sleipnir 2029 (0.09%)
# Netscape 3 1306 (0.06%)
# Safari 764 (0.03%)
# Microsoft Internet Explorer 4 446 (0.02%)
俺のサイトでの結果を参考までに・・・
解析対象ヒット回数2220118(期間は1年)
# Microsoft Internet Explorer 6 2098603 (94.53%)
# Microsoft Internet Explorer 5 68749 (3.10%)
# Mozilla 26477 (1.19%)
# Opera 13867 (0.62%)
# Netscape 7 4128 (0.19%)
# Netscape 4 2687 (0.12%)
# Sleipnir 2029 (0.09%)
# Netscape 3 1306 (0.06%)
# Safari 764 (0.03%)
# Microsoft Internet Explorer 4 446 (0.02%)
963 ：Name_Not_Found：2005/10/12(水) 17:45:18 ID:???
個人なら充分切り捨てていい数値だと思うけどな。＞IE5
ウチはIE6の次がDoCoMoだったよ…どう見えてるんだか。
ウチはIE6の次がDoCoMoだったよ…どう見えてるんだか。
964 ：Name_Not_Found：2005/10/12(水) 17:48:54 ID:???
>>961
IE6でもxml宣言してると5と同じ仕様でやっちゃうらしいです。
IE6では文書型宣言に基づいてレンダリングモードを切り替える機能が実装されたのですが、
その場合に、標準準拠モードだと正しい解釈をするんですが、
XHTMLにおいてxml宣言をした場合、後方互換モードでレンダリングされる、ということらしいです。
xml宣言しなきゃいいのか…。
IE6でもxml宣言してると5と同じ仕様でやっちゃうらしいです。
IE6では文書型宣言に基づいてレンダリングモードを切り替える機能が実装されたのですが、
その場合に、標準準拠モードだと正しい解釈をするんですが、
XHTMLにおいてxml宣言をした場合、後方互換モードでレンダリングされる、ということらしいです。
xml宣言しなきゃいいのか…。
965 ：Name_Not_Found：2005/10/12(水) 18:13:30 ID:???
それ、常識
966 ：Name_Not_Found：2005/10/12(水) 18:15:58 ID:???
>>964
ちょ、待っ
ちょ、待っ
967 ：Name_Not_Found：2005/10/12(水) 19:24:11 ID:???
<span style="width : 200px;background-color : LightSteelBlue;">文字列</span>
とやってもIEでは200pxに固定されますがFireFox等では無視されるのは仕様でしょうか？
もし解決策があれば教えていただけませんでしょうか。宜しくお願いします。
とやってもIEでは200pxに固定されますがFireFox等では無視されるのは仕様でしょうか？
もし解決策があれば教えていただけませんでしょうか。宜しくお願いします。
968 ：Name_Not_Found：2005/10/12(水) 19:32:20 ID:???
うん、仕様
969 ：Name_Not_Found：2005/10/12(水) 19:49:39 ID:???
970 ：Name_Not_Found：2005/10/12(水) 20:02:04 ID:???
質問です。
下記のソースでcss_leftの要素とcss_rightの要素の高さをそろえるには
どうすればよいのでしょうか？何回試行錯誤してもcss_rightが下に下がってしまいます。
どうかよろしくお願いします。
<div class="css_left">
css_left
</div>
<div class="css_right">
css_right
</div>
</div>
.css_left {
top: 0px;
left: 0px;
background-color: #00ffff;
width: 20%;
margin: 0;
}
.css_right {
position: relative;
top: 0px;
left: 20%;
width: 80%;
background-color: #66cdaa;
margin: 0;
}
下記のソースでcss_leftの要素とcss_rightの要素の高さをそろえるには
どうすればよいのでしょうか？何回試行錯誤してもcss_rightが下に下がってしまいます。
どうかよろしくお願いします。
<div class="css_left">
css_left
</div>
<div class="css_right">
css_right
</div>
</div>
.css_left {
top: 0px;
left: 0px;
background-color: #00ffff;
width: 20%;
margin: 0;
}
.css_right {
position: relative;
top: 0px;
left: 20%;
width: 80%;
background-color: #66cdaa;
margin: 0;
}
971 ：Name_Not_Found：2005/10/12(水) 20:32:44 ID:???
>>970
css_rightはposition: relativeじゃなくposition: absolute;
css_rightはposition: relativeじゃなくposition: absolute;
>>971
おお〜ありがとうございます〜無事できましたヽ( ´ー｀)ノ
おお〜ありがとうございます〜無事できましたヽ( ´ー｀)ノ
973 ：Name_Not_Found：2005/10/12(水) 22:26:40 ID:???
>>972
FireFox opera で見るとどうなっているかな？
FireFox opera で見るとどうなっているかな？
974 ：Name_Not_Found：2005/10/12(水) 22:56:13 ID:???
次スレﾏﾀﾞｰ？
975 ：Name_Not_Found：2005/10/12(水) 23:01:09 ID:???
おら、いやんって言われた。 誰か・・・
976 ：Name_Not_Found：2005/10/12(水) 23:53:25 ID:???
977 ：Name_Not_Found：2005/10/12(水) 23:55:20 ID:???
>976
いいんでない
いいんでない
978 ：Name_Not_Found：2005/10/13(木) 00:06:03 ID:???
>>952
遅くなりましたが、やってみました。
う〜ん、やっぱ
（1）wrapperにfloat指定しないと、
背景画像が表示されないし、
（2）containerにfloat指定しないと、
背景色が表示されない。
（2）は、Win IE以外はそうだと、どこかで読んだことがあるんですが、
（でもうろ覚えでスイマセン）、（1）はなんでなんだろ...
文章全部削除して、divと数文字だけ入れて（骨格だけで）表示させても
そうなんですよね......
もちょっと、根本的なところからがんがってみます。
遅くなりましたが、やってみました。
う〜ん、やっぱ
（1）wrapperにfloat指定しないと、
背景画像が表示されないし、
（2）containerにfloat指定しないと、
背景色が表示されない。
（2）は、Win IE以外はそうだと、どこかで読んだことがあるんですが、
（でもうろ覚えでスイマセン）、（1）はなんでなんだろ...
文章全部削除して、divと数文字だけ入れて（骨格だけで）表示させても
そうなんですよね......
もちょっと、根本的なところからがんがってみます。
>>973
余白が確認できたので
BODY {margin: 0px;}で隠すということにしました..（解決になってないかもです
あともう一つ質問させてください。
http://12321.client.jp/のページについてなのですが、
css_topに記述した赤オレンジの画像の下に余白ができてしまうのですが
この余白を無くすにはどうすればよいのでしょうか？(css_topを無くしてdiv1の下に直に
おいても余白がでてしまいます。）
CSSでページを組んでみたのですが、div3の部分がdiv2の下に表示するには
どうすればよいのでしょうか？
今回はdiv2に対してdiv3をrelativeで配置したので
「 right_menu2」の下に背景色が黄色のdiv3要素がくると思ったのですが
思うようにいきませんでした。
組み方はこのようになっております。
<div class="all">
div1
top
div2
left
right
div3
</div>
（いつも使ってる鯖は広告は出ないのでサンプルページの
下部の広告は気に方向でお願いします。）
自分の今の力ではむりでしたので、どうかみなさん力を貸してください。
上記リンク先にソースを載せておきましたので是非お願い致します。
どうかよろしくお願いします。m(_ _)m
余白が確認できたので
BODY {margin: 0px;}で隠すということにしました..（解決になってないかもです
あともう一つ質問させてください。
http://12321.client.jp/のページについてなのですが、
css_topに記述した赤オレンジの画像の下に余白ができてしまうのですが
この余白を無くすにはどうすればよいのでしょうか？(css_topを無くしてdiv1の下に直に
おいても余白がでてしまいます。）
CSSでページを組んでみたのですが、div3の部分がdiv2の下に表示するには
どうすればよいのでしょうか？
今回はdiv2に対してdiv3をrelativeで配置したので
「 right_menu2」の下に背景色が黄色のdiv3要素がくると思ったのですが
思うようにいきませんでした。
組み方はこのようになっております。
<div class="all">
div1
top
div2
left
right
div3
</div>
（いつも使ってる鯖は広告は出ないのでサンプルページの
下部の広告は気に方向でお願いします。）
自分の今の力ではむりでしたので、どうかみなさん力を貸してください。
上記リンク先にソースを載せておきましたので是非お願い致します。
どうかよろしくお願いします。m(_ _)m
980 ：Name_Not_Found：2005/10/13(木) 00:23:25 ID:???
>>978
とりあえず、おまいの環境を書きなよ。
とりあえず、おまいの環境を書きなよ。
981 ：Name_Not_Found：2005/10/13(木) 00:26:15 ID:???
982 ：Name_Not_Found：2005/10/13(木) 00:28:25 ID:???
>979
う〜〜む 徐々に「ビルダーどこでも配置」に近づいておるな
う〜〜む 徐々に「ビルダーどこでも配置」に近づいておるな
983 ：Name_Not_Found：2005/10/13(木) 00:31:21 ID:???
>>979
div3が下に来ないのは、css_rightがposition:absoluteになってるんだから当然。
div3が下に来ないのは、css_rightがposition:absoluteになってるんだから当然。
スマソ949宛じゃなくて>>979宛。
赤オレンジの画像のほうの話ね。
赤オレンジの画像のほうの話ね。
>>983
absoluteに指定するとrelativeが働かないということですね。
明日からここらへんについてもっと勉強しようと思います。
>>981
できました〜 画像はインライン要素だからmarginではなく
vertical-alignを使うのですね。理解しました。
みなさまレスありがとうございます。
あともう一つ疑問ができてしまったので質問させて頂きます。
http://12321.client.jp/に新しいソースで書いたサンプルページを上げてみました。
IEだとdiv1の下にdiv2要素が隙間無く入るのですが、
firefoxで確認したところdiv1とdiv2の間に隙間ができてしまいます。
このようなことは指定してないので起きないと思うのですが
これはfirefoxがなにかのタグに対応していないために起こるのでしょうか？
再度の質問となりますが、
どうかよろしくお願いします。
absoluteに指定するとrelativeが働かないということですね。
明日からここらへんについてもっと勉強しようと思います。
>>981
できました〜 画像はインライン要素だからmarginではなく
vertical-alignを使うのですね。理解しました。
みなさまレスありがとうございます。
あともう一つ疑問ができてしまったので質問させて頂きます。
http://12321.client.jp/に新しいソースで書いたサンプルページを上げてみました。
IEだとdiv1の下にdiv2要素が隙間無く入るのですが、
firefoxで確認したところdiv1とdiv2の間に隙間ができてしまいます。
このようなことは指定してないので起きないと思うのですが
これはfirefoxがなにかのタグに対応していないために起こるのでしょうか？
再度の質問となりますが、
どうかよろしくお願いします。
986 ：Name_Not_Found：2005/10/13(木) 01:14:56 ID:???
>>985
マージン関連の設定がいい加減だからじゃね？
マージン関連の設定がいい加減だからじゃね？
987 ：Name_Not_Found：2005/10/13(木) 01:17:10 ID:???
折角ソース貼るなら、
文章のところにdivのclass名書いた方がCSSと見比べるだけで一目で分かるから分かりやすい。
文章のところにdivのclass名書いた方がCSSと見比べるだけで一目で分かるから分かりやすい。
988 ：Name_Not_Found：2005/10/13(木) 01:27:06 ID:???
>>985
＞画像はインライン要素だからmarginではなくvertical-alignを使うのですね
違う違う。マージンとは別物。
>>925のvertical-alignプロパティとbaselineを参照。
＞画像はインライン要素だからmarginではなくvertical-alignを使うのですね
違う違う。マージンとは別物。
>>925のvertical-alignプロパティとbaselineを参照。
989 ：Name_Not_Found：2005/10/13(木) 01:27:37 ID:???
>>1000
おさはハゲじゃないって！！ハゲ隠ししてるだけだって！！
おさはハゲじゃないって！！ハゲ隠ししてるだけだって！！
990 ：Name_Not_Found：2005/10/13(木) 01:31:07 ID:???
未来レスとか くだらねぇ（ﾌﾟｩ
991 ：Name_Not_Found：2005/10/13(木) 01:33:47 ID:???
>>987
ごもっともなご意見です。今直させて頂いてます。
で直してる最中に解決致しました。。
<div class="css_right_menu_1">
<p>
あ<br>
<a href="sorce.txt">このページのソース</a><br>
<a href="css.txt">CSSのソース</a><br>
</p>
</div>
を
<div class="css_right_menu_1">
あ<br>
<a href="sorce.txt">このページのソース</a><br>
<a href="css.txt">CSSのソース</a><br>
</div>
<p></p>を省いたら余白がなくなりました。
css_right_menu_1はrightの入れ子なのになんでそれに影響するんだろう・・？
ちょっと勉強してきます。
>>988
誘導どもです。こちらも勉強してきます。
ごもっともなご意見です。今直させて頂いてます。
で直してる最中に解決致しました。。
<div class="css_right_menu_1">
<p>
あ<br>
<a href="sorce.txt">このページのソース</a><br>
<a href="css.txt">CSSのソース</a><br>
</p>
</div>
を
<div class="css_right_menu_1">
あ<br>
<a href="sorce.txt">このページのソース</a><br>
<a href="css.txt">CSSのソース</a><br>
</div>
<p></p>を省いたら余白がなくなりました。
css_right_menu_1はrightの入れ子なのになんでそれに影響するんだろう・・？
ちょっと勉強してきます。
>>988
誘導どもです。こちらも勉強してきます。
992 ：Name_Not_Found：2005/10/13(木) 01:33:54 ID:???
何故IEは:beforeや:afterに対応してくれないんですか？
993 ：Name_Not_Found：2005/10/13(木) 01:34:46 ID:???
突撃だから
994 ：Name_Not_Found：2005/10/13(木) 01:35:49 ID:???
>>991
いや、そこはpを抜くんじゃなくて、pのマージンを調節した方が良い。試しにゼロとか。
いや、そこはpを抜くんじゃなくて、pのマージンを調節した方が良い。試しにゼロとか。
995 ：Name_Not_Found：2005/10/13(木) 01:41:03 ID:???
もういいや
997 ：Name_Not_Found：2005/10/13(木) 02:00:57 ID:???
取り敢えず一区切りついたようなので埋め。
998 ：Name_Not_Found：2005/10/13(木) 02:02:00 ID:???
うめ
999 ：Name_Not_Found：2005/10/13(木) 02:04:27 ID:???
どく
1000 ：Name_Not_Found：2005/10/13(木) 02:04:52 ID:???
1000px
1001 ：１００１：
このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
もう書けないので、新しいスレッドを立ててくださいです。。。