- ベストアンサー
CSS、Winで問題なく表示されるものがMacで不具合が
CSS初心者です。 左側にコンテンツの一覧（メニュー）を縦に表示させ、残りの右側の部分に内容を表示させるページを作っています。 （HTMLの「フレーム」を想像していただけると近いと思います） 当然メインコンテンツとメニューの文章量は違い、メニューの方が少ないのですが、Macの場合その２列の長さ（高さ）が変わってしまうのが困っています。 （文章量に合わせて四角で囲われてしまい、隣のメインコンテンツと四角の長さが揃わない） 参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈があるのですが、Winでは問題なくてもMacではうまくいっていません。 現在完成の期限が迫っていて、非常に困っています。 解決方法、どなたか思い当たることはありますでしょうか。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
質問内容の確認ですが、side部分の背景が全体のコンテンツの高さに達しなくて途切れて見えるということでよいのでしょうか。質問の内容をとりちがえてなければよいのですが…。 .sideにposition:absolute;を追加、clear:both;で以下のように回り込みの設定。それとcontentsの幅の指定は必要かなと思います。 あとCSSは装飾用とレイアウト用の2つに分けておくと後で修正が楽です。 <BODY> <div class="contents"><div class="side">sideの内容・・・</div> <div class="main">mainの内容・・・</div> <div style="clear:both;"></div> </div> </BODY>
その他の回答 (3)
- jakarta
- ベストアンサー率38% (607/1597)
body内に<div style="clear:both;"></div>を書き足すということは、<div>で具体的に領域を指定するということです。 ですので特定のクラスに書き足せばよいわけではありません。
お礼
なるほど、了解です。 何から何まで教えていただき、本当に感謝しております。 まだまだ初心者ですが、これから頑張ります。 ありがとうございました。
IE7はCSSへの正確な対応が謳われている事実。 つまり、現状のIE6ではCSSの異常な処理が珍しくない。 このため、Windowsでしか使えないIEに特化した ウェブデザインが横行している。 共通規格であることが最重要であるHTML文書において 一方的にIEが避難されるべき立場にある。 この問題の複雑さは、Mac版のIEは、Windows版とは まったく別に作成され、まともなCSS処理を備えていることにもある。 そのため、同じIEを使ってもWindowsとMacで表示が食い違う。 いわんや、MOZILLA(Firefox)やOPERAなどの CSS準拠を謳うウェブブラウザーとの食い違い。 ひとつの解は、ウェブブラウザーを判断して 別々のHTMLファイルやCSSファイルを送信する方法。 もうひとつは、なんとか共存できるCSS表現を模索する方法。 対策に詳しい書籍やウェブサイトもあるとは思いますが 今の時期であれば、来年のIE7への対応に不安がありますから CSS準拠を重視して、Mozilla FirefoxやOPERAの Mac版とWindows版を基準に作成し IE6で問題が出る部分に対策を組み込むのが 今の時期の良い選択肢では無いかと思います。 もっとも、こっちはIEが動くようなOSは無いので どのくらい、IE6がCSSに弱いのかは知りません。 なお、旧世紀に設計されたIEの弱みのひとつにタブブラウズがあります。 IEコンポーネントを用いたSlipenir等でも利用され タブブラウジング人口は、非常に高くなっています。 (もちろんIE7にも盛りこまれます) 用途によっては、ウェブサイトのデザインに タブブラウジングを想定する必要もあると思います。 たとえば、同じ質問掲示板のOKWebと教えてねっとでも タブブラウズに向かない後者は、時として不便。
お礼
今回は、どうやら私の記述ミスが原因だったようです。 ですが、Winユーザーのみのサービスが横行しているのもまた事実で。 少数派はどうしても切りすてられる運命にあるようで、辛いものがありますね… ご回答ありがとうございました。
- jakarta
- ベストアンサー率38% (607/1597)
>参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈がある 参考にされている本の検証ブラウザのバージョンはどうなっていますか? チェックされている環境のMacOSとブラウザの種類および詳細なバージョンを明記して下さい。バージョンによっては無理なことをやろうとしている可能性もあります。 問題なければCSSの内容も補足してもらえるとよいです。
お礼
遅くなりました。CSSはこのような感じです。 ■ページの基本のデザイン部分 body { color: #666666; font-family: "ＭＳ Ｐゴシック", Osaka,sans-serif; background-color: #FFF7EE; text-align: center; } h1{ font-family: "ＭＳ Ｐゴシック", Osaka,sans-serif; font-size: 350%; margin: 0px; text-align: center; } （中略） h3 { font-family: "ＭＳ Ｐゴシック", Osaka,sans-serif; color: #666666; font-size: 125%; margin:1em 10px; background-color: #FFF7EE; border-top:double 3px #FF99cc; border-bottom:double 3px #FF99cc; text-align: left; clear:both; } p { font-family: "ＭＳ Ｐゴシック", Osaka,sans-serif; font-size: 90%; line-height: 150%; margin-right:15px; margin-left:15px; } p img { float: left; margin-right:5px; border: solid 1px #666666; } a { color: #666666; text-decoration: none; font-weight: bold; } h1 a { color: #FF99CC; line-height: 150%; } .side h2 { font-family: "ＭＳ Ｐゴシック", Osaka,sans-serif; font-size: 150%; text-align: left; margin:0px; } .side ul { font-size: 80%; margin-top: 0px; } .contents { background-color: #FFFFFF; border: solid 1px #CCCCCC; width: 750px; margin:auto; text-align: left; } ■ページレイアウト用部分 .main { width: 550px; float:right; padding-right: 0px; background-color: #FFFFFF; background-image: url(back.jpg); background-repeat: no-repeat; background-position: right top; } .side { width: 180px; margin-left: 10px; } .contents { background-image: url(side.gif); }
補足
書き込みどうもありがとうございます。 本の検証環境は、バージョンは書いていないのですが、2005年3月現在のものだそうです。 MacOSは10.3.8、ブラウザはSAFARIの最新版です。 なおMacですとIE・ネスケ（記憶が定かでないですが、どちらも最新版かそれに近いはずです）でも同じ現象がおきます。 CSSはそのまま載せるのはまずそうなので、もう少しお待ち下さい。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
＞質問内容の確認ですが、side部分の背景が全体のコンテンツの高さに達しなくて途切れて見えるということでよいのでしょうか。 そうです、まさにその通りです。ありがとうございます。 .side部分はこのように変更してみました。 .side { width: 180px; margin-left: 10px; position:absolute; } そして<BODY>部分にご指示のとおり、<div style="clear:both;"></div>を書き足すと…うまくいきました！！ ただ、CSSファイルは「ページの基本のデザイン部分」「ページレイアウト用部分」がそれぞれ独立した２つのファイルとなっており、HTMLを記述しているものと別になっています。 ご回答はHTMLファイルの<BODY></BODY>の間にclear:both;を書き込む形のようですが、実際はCSSファイルが分割されているので、その場合はもしかしてCSSファイルにclear:both;を書き込むのでしょうか。（何となくこの手の設定は、CSSファイルで一括して行うもののような気がしたので） 大変お手数ですが、この推量が正しい場合、CSSファイルのどこにclear:both;を入れればいいのか、ご教示いただけますでしょうか。 自分でも何カ所かためしに入れてみたのですが、いずれもうまくいかず、力尽きました。 すみません、現在はさほど急いでおりませんので、何卒よろしくお願いいたします…