HPを作っています。CSSを使って作っているんですけど、ブラウザがFirefoxやOperaだとレイアウトが崩れてしまいます。どうすれば、これらのブラウザでもきちんと表示されるようになるでしょうか?教えてください。よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/12/19 07:40:31
  • 終了:--

回答(9件)

id:szkn No.1

szkn回答回数15ベストアンサー獲得回数02004/12/19 07:59:46

ポイント15pt

具体例がないと何とも言えませんが、IEと違い、FireFoxもOperaも仕様(ルール)にかなり忠実です。

仕様通りにCSSを記述し、IEのバグに対応するように小技を使うのがベストだと思います。

もしくは、マイノリティ(FireFox、Operaを切り捨てるか)

IEでキレイに表示されるのを第一に記述し、それがFireFoxなどで表示されるようにするのはかなり難しいです。

ごく簡単な例としては、

body { color: black;}

* html body { color: blue;}

とすれば、IEでのみ文字色が青になります。

* htmlにマッチする要素は本来は存在しない(htmlはルート要素だから、親要素は存在しない)ので、これもIEの有名なバグです。

ただし、CSSの内容によります。IE用に記述したモノに1、2点手を加えるだけで、FireFoxなどでも使えるようになることもあります。

例えば、

body { color: blue;}

[lang] body { color: black;}

とすれば、IEが対応しない属性セレクタ[lang]に対応したブラウザ(firefox, Opera)でのみ、文字色が青になります。(html要素にlang属性が指定してある必要があります。XHTMLの場合[xmlns]がよく使われます)

上記の例と見た目は同じですが、どちらを基本の記述とするかという点で異なります。

この質問では、この程度の一般論としてしかお答えできないと思います。すみません。

URLは、各ブラウザのバグをリストアップしてあるページ、ボクが分かりやすいと思うCSSのリファレンスです。

http://hp.vector.co.jp/authors/VA022006/css/index.html

正しい知識を得たい人の爲のCSS2リファレンス

id:hatemorizo

回答ありがとうございます。具体的には、質問のURLをFirefoxなどでごらんいただければわかると思うのですが、idブロックで指定したカラムがまったく無視されてしまいます。

2004/12/19 08:24:53
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582004/12/19 08:16:18

ポイント15pt

崩れている、だけでは答えようがありませんが、Firefox や Opera のほうがスタイルシートの解釈を正しく行っている確率が高いです。

基本的に Firefox や Opera に合わせ(Operaもなんか変なところがあるような気もしますが)、

<!--[if gte IE 5]> 〜 <![endif]-->

を使うなどして IE 用に別のスタイルを用意してみてはいかがでしょうか。

id:hatemorizo

あぁ、そういうタグもあったのですね!知りませんでした。よろしければ質問文のURLをfirefoxなどで見てください。カラムが成り立たないんです。

回答ありがとうございました。

2004/12/19 08:25:45
id:virtual No.3

virtual回答回数1139ベストアンサー獲得回数1282004/12/19 08:44:29

ポイント15pt

>質問文のURLをfirefoxなどで見てください。

質問文にURLが見当たらないのですが。

私のこの回答のコメントにURLを書くと以降の回答がつきやすくなると思います。

id:hatemorizo

あれれ、書いたと思ったんだけど。。。

私のURLはこれです。http://future-links.net よろしくおねがいします!

2004/12/19 09:01:27
id:szkn No.4

szkn回答回数15ベストアンサー獲得回数02004/12/19 09:44:36

ポイント15pt

http://jigsaw.w3.org/css-validator/

The W3C CSS Validation Service

CSSでのコメントは

<!-- コメント -->

ではなく

/* コメント */

形式です。

完全な不正なCSSなのでCSS自体が認識されてません。

コメントを上記のように修正すれば、概ね表示されます。

一部、IEとは表示が異なりますが、それについては、先の回答のURLを参照されてはどうでしょうか。

細部まで拝見していませんが、CSSの検証は以下のURLでできます。

id:hatemorizo

そうだったんですね!!

回答ありがとうございました!

2004/12/19 10:39:53
id:fake234 No.5

fake234回答回数197ベストアンサー獲得回数02004/12/19 10:22:30

ポイント14pt

style.css内のコメントアウトの仕方が間違っています。

<!-- -->ではなく

/* */を使ってください。

細かい部分は他の方の回答を参考にされればいいと思います。

id:hatemorizo

回答ありがとうございます!

2004/12/19 10:40:06
id:tredue No.6

tredue回答回数23ベストアンサー獲得回数02004/12/19 12:28:32

ポイント14pt

ざっとみさせていただきましたが、訂正しようとするとほとんど

書き直さないといけなくなり、回答する方も大変な部分(書ききれない)があるので、気になった点を変えるだけでもきれいになると思います。

class と id の使い方が逆です。

学級と生徒の関係を考慮して書換えて下さい。

class と id の名前にタグに使われる名前を重複させない。

head table link タグ、left right bottom top

(要素としてスタイル決める用語)を id の名前にしない。

これが備わっていないと多分回答がつかないように思います。

id:hatemorizo

回答ありがとうございます。

idは要素が単独の場合、classは要素が複数あった場合に使うと聞いたので、このようになりました。

2004/12/19 19:44:49
id:Spawapawa No.7

Spawapawa回答回数54ベストアンサー獲得回数02004/12/19 12:54:44

ポイント14pt

別々にCSSファイルを作ってJavaScriptでブラウザ別に読み込みというのはだめですか?

-----<例>-----

<!-- IEのときのCSSファイル -->

<link rel=”stylesheet” type=”text/css” href=”msie.css”>

<script language=”JavaScript” type=”text/javascript”>

<!--

str = navigator.userAgent.toUpperCase();

if (str.match(’FIREFOX’)) {

// FIREFOXのときのCSSファイル

document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”firefox.css¥”>”);

} else if (str.match(’OPERA’)) {

// OperaのときのCSSファイル

document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”opera.css¥”>”);

} else if (str.match(’NETSCAPE’)) {

// NetscapeのときのCSSファイル

document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”netscape.css¥”>”);

} else if (str.match(’MSIE’)) {

} else {

// 上記4つすべて当てはまらないときのCSSファイル

document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”none.css¥”>”);

}

// -->

</script>

-----<例>-----

ちなみにIEはdocument.writeをすると白紙ページになる(<link 〜>のみ書かれる)のでJavaScriptより前に定義しています。

id:hatemorizo

回答ありがとうございます!

2004/12/20 05:27:23
id:tredue No.8

tredue回答回数23ベストアンサー獲得回数02004/12/19 23:21:33

ポイント14pt

<body id=”body”> → <body> ※body{}

<div id=”total”> なくして body に入れる ここはなくても影響はない

#head → .header か .atama 等

※ div.header{},div.header h2{},div.header p{},div.header img{}

<ul id=”menu”>

<li class=”menu”></li>

:

:

</ul>

→ ここはmenuが重複しているので一つ上に div を作り、

<div class=”osina”> ※div.osina{}

<ul> ※div.osina ul{}

<li> ※div.osina ul li{}

とこのような形で書くとセレクタの継承が上手くいく。

<div id=”leftside”> → <div class=”hidarigawa”>

<div class=”lefttitle”> → <span class=”hidaridai”>

<table class=”table”></table> ← class=”table” から kensaku 等にかえる

ここまで来て疲れてしまったので、続きはあした。

問題点まで来ていないので、終了してもいわしに書きます。

id:hatemorizo

回答ありがとうございます!

メールも読ませていただきました!!

2004/12/22 10:10:25
id:hamutaro_usi No.9

hamutaro_usi回答回数1ベストアンサー獲得回数02004/12/20 07:35:52

ポイント14pt

http://itpro.nikkeibp.co.jp/free/ITPro/USNEWS/20041126/153104/

「Webブラウザのシェア,IEが5ポイント減,Mozillaが5ポイント増」,オランダOneStat.comの調査:ITpro

Javaスクリプト等でブラウザ毎にcssを切り替える方法や、共通する仕様だけで作るという方法があります。 MozillaやOperaが絶対正しいということは無いですよ(笑)

しかし、50%以上のシェアを有するブラウザに合わせて作るれば良いという考え方もあります。

私は、現在のところはMozillaやOperaに合わす必要はないと私は考えます。 つまり無視しして良いという事。

Firefox 1.0は使えると感じてますが、IEに取って代わるような魅力はありません。

個人サイトで50%、オフィシャルは20%のシェアを超えたブラウザには配慮すべきかと思っていますので、今はIEでよければ全てし・・・かな。

id:hatemorizo

回答ありがとうございます!

2004/12/22 10:11:25
  • id:tredue
    訂正と補足

    修正したサンプルを書きましたが、訂正しようとして二回までの回答し
    か出来ないのを忘れてしまいました。捕捉します。
    問題点は、html タグの付け方、各ブラウザでのスタイルの記入の仕方、
    スクリプトでの振分け(確実に再現性を高める場合)
    ※スクリプト部分は出ていますのでそちら参考に

    ウェッブページを作る上で役に立つ総合リンク
    ウェブデザイン関連リンク集
    http://hp.vector.co.jp/authors/VA022006/links.html

    人力検索はてなでの回答で参照すると役に立つ質問群
    異なるブラウザ間での表示に強いCSSの書き方
    http://webmaster.hatena.ne.jp/1096819177
    CSSのセレクタ(#)とclassの賢い使い分け、組み合わせ方
    http://webmaster.hatena.ne.jp/1096602664
    HP制作でナビゲーション部分を右側に配置する理由って何
    http://webmaster.hatena.ne.jp/1097043443

    ページ制作の学習に参考にすると良いと思われるページ
    そろそろスタイルシートで ウェブデザイナーにおくる、HTML+CSSデザインのすすめ
    http://w3j.org/articles/cssready/cssready02.html
    BOXES
    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません