• ベストアンサー

CSS、Winで問題なく表示されるものがMacで不具合が

CSS初心者です。 左側にコンテンツの一覧（メニュー）を縦に表示させ、残りの右側の部分に内容を表示させるページを作っています。 （HTMLの「フレーム」を想像していただけると近いと思います） 当然メインコンテンツとメニューの文章量は違い、メニューの方が少ないのですが、Macの場合その２列の長さ（高さ）が変わってしまうのが困っています。 （文章量に合わせて四角で囲われてしまい、隣のメインコンテンツと四角の長さが揃わない） 参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈があるのですが、Winでは問題なくてもMacではうまくいっていません。 現在完成の期限が迫っていて、非常に困っています。 解決方法、どなたか思い当たることはありますでしょうか。

  • CSS
  • 回答数4
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • jakarta
  • ベストアンサー率38% (607/1597)
回答No.3

質問内容の確認ですが、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>

bari_saku
質問者

補足

＞質問内容の確認ですが、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;を入れればいいのか、ご教示いただけますでしょうか。 自分でも何カ所かためしに入れてみたのですが、いずれもうまくいかず、力尽きました。 すみません、現在はさほど急いでおりませんので、何卒よろしくお願いいたします…

その他の回答 (3)

  • jakarta
  • ベストアンサー率38% (607/1597)
回答No.4

body内に<div style="clear:both;"></div>を書き足すということは、<div>で具体的に領域を指定するということです。 ですので特定のクラスに書き足せばよいわけではありません。

bari_saku
質問者

お礼

なるほど、了解です。 何から何まで教えていただき、本当に感謝しております。 まだまだ初心者ですが、これから頑張ります。 ありがとうございました。

noname#39234
noname#39234
回答No.2

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と教えてねっとでも タブブラウズに向かない後者は、時として不便。

bari_saku
質問者

お礼

今回は、どうやら私の記述ミスが原因だったようです。 ですが、Winユーザーのみのサービスが横行しているのもまた事実で。 少数派はどうしても切りすてられる運命にあるようで、辛いものがありますね… ご回答ありがとうございました。

  • jakarta
  • ベストアンサー率38% (607/1597)
回答No.1

>参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈がある 参考にされている本の検証ブラウザのバージョンはどうなっていますか? チェックされている環境のMacOSとブラウザの種類および詳細なバージョンを明記して下さい。バージョンによっては無理なことをやろうとしている可能性もあります。 問題なければCSSの内容も補足してもらえるとよいです。

bari_saku
質問者

お礼

遅くなりました。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); }

bari_saku
質問者

補足

書き込みどうもありがとうございます。 本の検証環境は、バージョンは書いていないのですが、2005年3月現在のものだそうです。 MacOSは10.3.8、ブラウザはSAFARIの最新版です。 なおMacですとIE・ネスケ（記憶が定かでないですが、どちらも最新版かそれに近いはずです）でも同じ現象がおきます。 CSSはそのまま載せるのはまずそうなので、もう少しお待ち下さい。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • フレームとCSSの違い

    １ページを縦に2つに分けたデザイン（サイド部分とコンテンツ部分に区切られたページ）を作成します。 ページを作成する際、フレームで作成するのと、CSSでサイドとメインのレイアウトを作るのとでは、どちらがお勧めでしょうか。 見た目、左右に区切れてればいい（特定の人しか見ないので、ブラウザ表示はIEだけ確認できればOK）のです。 一般的にはどちらで作成したほうがよいでしょうか。 フレームとCSSとでの使い分けがよくわからないのです。 左側にリンク（メニューなど）を表示、右部分にコンテンツを表示する予定です。 初心者な質問ですみませんが、学び始めで少し混乱してしまっています。なんでもよいのでアドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのfloatについて

    ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。

  • FIREFOXでのCSS表示

    よろしくお願いします。 CSSのレイアウトで、よくある２カラムのオーソドックなもの 左側にメニュー、右側にメインコンテンツ、上下にヘッダ・フッタ <div id="wall"> <div id="header"></div> <div id="menu"></div> <div id="main"></div> <div id="footer"></div> </div> のような構造の場合、メインコンテンツは各ページによってボリュームが違うので、wall部分もmainのボリュームにあわせて変化させたいです。 IEならば問題ないのですが、FIREFOXだとmenuやmainの部分が増えると、wallの上から重なるように表示されてしまうケースがありました。はみ出ています。 このような場合、それぞれのheightの設定など、どのようにしたら良いのでしょうか？　mainの長さにあわせて最後にwallを1250pxのように具体的な長さ指定すると、見た目にはfirefoxでもうまく表示はされています （ただし、このやり方だと各ページのコンテンツの長さにあわせて、１つ１つ設定しないといけない） floatの設定なども含めて、どういった記述をすれば良いのか、どなたか教えてもらえませんでしょうか。

  • CSSでのページ構築について

    CSSでのページ構築について CSSでのサイト制作に挑戦しています。 まずは、テンプレートをつかってカスタマイズしてみようとおもい、テンプレートをDLしました。 「フッタ／左メニュー／メインコンテンツ／フッタ」というブログなどでよくあるものです。 （縦三段で、真ん中が左右２つに別れている2カラム） CSSファイルは、外部読み込み形式です。 トップページを作って、いざメニューからメインページのリンクを貼ろうと思ってつまずきました。 左ページのコンテンツメニューに設定したリンクを、右側の枠内に表示したいのですが、そういった場合は、どうすれよいでしょうか。普通に右側の内容をいれたHTMLにリンクすると、全画面がそのページになってしまって、ヘッダ／左メニュー／フッタは消えて（隠れて）しまいます。 ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすらコピーして、右側の要素部分だけを変更していくのでしょうか？ でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。 自分なりにCSS関連のサイトを検索して調べてみたのですが、どこも「トップページをそのままコピーしているようにしかみえない」のです。 右側ページ内容のHTMLに、ヘッダやメニューも読み込ませるような設定が必要なのでしょうか？ ソフトはDW　CS4を使っています。 どなたか、CSSの達人さま、教えてくださいませ。 お願い致します。

  • CSSでの擬似インラインフレーム

    CSSでの擬似インラインフレームでのサイトを作成しています。 ページ全体枠を900px×650pxで左右上下の中央表示にし、 左側にナビゲーション、右側にコンテンツを配置しています。 右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。 次に、クリックした際に右側のコンテンツ部分の表示移動が パッと入れ替わるのではなく、スルスルと画面が推移するなめらかスクロールで場面が移動しているように見せたいのですが スクロールのjavascriptはこちらのサイト（http://lab.centralscrutinizer.it/the-tiny-scrollings/）でダウンロードさせていただいたファイルを設置したのですがパッと画面表示が変わるのみでスルスルっと動いてくれません。。。 私はjavascriptの記述知識がないためどうすればよいのかわからず ご質問させていただきました。 どうすれば良いのでしょうか。 どなたかお助けくださいませ。 よろしくお願いします！

    • ベストアンサー
    • HTML
  • htmlとcssを使ったメニューバー

    ＨＰのメニューバーをhtmlとcssを使用して作成したいのですが、どういう風に調べてよいのかもわからないので、アドバイスだけでもいいので教えてもらえると助かります。 例えば下のようなメニューを作成するとします。 （「□トップ」という一つ一つの画像だと思ってください） □トップ □日記 □写真 □リンク これをフレームページの左側に表示させます。 トップページを右側に表示させている時、メニューのトップというところの画像がいれかわり、 ■トップ □日記 □写真 □リンク 上のように表示させ、日記ページを右側に表示させている時も同様に □トップ ■日記 □写真 □リンク と、現在見ているページのメニュー画像のみを入れ変えるという設定にしたいです。 できるのなら、cssとｈｔｍｌの記述例を教えてくださると大変助かります。 よろしくお願いします。

  • フレームを使用しているページで任意のコンテンツにリンクを張るには

    フレームを使用して、左側:メニュー、右側:コンテンツという構成をとっているページで、右側のコンテンツに任意のコンテンツを表示させた状態でのリンクを張りたいと思っています。具体的にどのようにすればよいのでしょうか?

    • ベストアンサー
    • HTML
  • CSSで「float: left;」の次にフッタをうまく表示させるには？

    http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。 が、実はもう一つ、新たに表示に際して困ったことが起きています。 現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。 さて。 このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。 この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。 もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。 ご指導、よろしくお願いします。

  • 【CSS】不具合の原因がわかりません。

    すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に　clear: both;　float: none;　をかけると不具合なく表示されます（縦に3つ並びます）。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 （企業によるガイドラインなので詳しくは書けません。すいません・・・。） 「フッタ」から　clear: both;　float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left　をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか？ よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }

  • ドリームウィーバーでｃｓｓのことについて困っています。

    一番上がヘッダー　左にサイドバー、この横」にコンテンツを製作しています。 このコンテンツの中を更に、右と左に分けたいのですが、右と左のＣＳＳスタイルを製作して、左側のＣＳＳセレクタのボックスの中のフロートを左に設定しましたが、右側のよこに並列しません！ どんなにがんばっても、縦に並んでしまうのですが、ヒントになるようなことでもいいので、わかる方あればよろしくお願いいたします。 説明が十分でないかもしれませんがよろしくお願いいたします。　

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する