- ベストアンサー
CSSのレイアウトについて・・・
現在CSSでウェブサイトのデザインをしているのですが、どうしてもネットスケープやFirefoxで見るとデザインが大幅に崩れてしまいます。 参考書なども見ているのですが、考えられる理由を教えてもらえませんでしょうか。 抽象的すぎる質問で申し訳ありませんがお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
※ 直接関係ない記述を一部削除しています。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TITLE</title> <style type="text/css"> * {margin:0; padding:0;} #kikaku { width: 133px; height: 200px; padding: 3px; border-right: solid 1px #666666; } #kikaku ul { margin-left:10px; margin-bottom:5px; } #kikaku li { list-style:none; list-style-position:outside; margin-top: 5px; background-image:url(../image/left_navi/li_on.gif); background-repeat:no-repeat; background-position:left center; } #kikaku li a { letter-spacing:0.1em; padding-left:12px; font-size:12px; } </style> </head> <body> <div id="kikaku"> <p><img src="#" alt="" width="130" height="15"></p> <ul> <li><a href="#">テキストリンク1</a></li> <li><a href="#">テキストリンク2</a></li> </ul> <p><a href="#"><img src="#" alt="" border="0" width="120" height="20"></a></p> </div> </body> </html> ■■■ 解説 ■■■ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ▲ 一部のブラウザが Standard mode で解釈できるように明記した方が賢明です。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> ▲ 適切な文字コードを指定してください。Shift_JISでなければ変更してください。 <meta http-equiv="Content-Style-Type" content="text/css"> <title>TITLE</title> <style type="text/css"> * {margin:0; padding:0;} ▲ 全称セレクタを用いて全ての要素の margin 及び padding を初期化しています。 ▲ クロスブラウザの定石です。 ▲ 他の要素のデフォルトスタイルシートを適用させたいのであればセレクタを変更してください。 #kikaku { width: 133px; ▲ 同一要素に適用されうる margin, padding, border 値を差し引く必要があります。 height: 194px; ▲ padding 値を引いています。 padding: 3px; ▲ 四方向一括指定しています。 border-right: solid 1px #666666; } #kikaku ul { margin-left:10px; ▲ ul 要素のインデントを指定しています。不要であれば指定する必要はありません。 margin-bottom:5px; } #kikaku li { list-style:none; list-style-position:outside; ▲ list-style:none であれば、position:outside にすることで、 ▲ li 要素に対する左余白が margin-left + border-left + padding-left に一致します。 margin-top: 5px; background-image:url(../image/left_navi/li_on.gif); background-repeat:no-repeat; background-position:left center; ▲ 関係ありませんが、位置を変更したい場合に数値を扱えるよう、キーワードではなくパーセンテージで指定することを推奨します。 ▲ キーワードと数値（単位付実数値、パーセンテージ値）は混用できませんので。 } #kikaku li a { letter-spacing:0.1em; ▲ 関係ありませんが、letter-spacing の利用には注意が必要です。 padding-left:12px; ▲ text-indent プロパティが記述されていましたが、ブロックレベル要素にしか適用できません。 ▲ リストマーカーを画像で代用する際のインデントは padding-left が定石です。 font-size:12px; ▲ 関係ありませんが、font-size の絶対値指定は好ましくありません。 } </style> </head> <body> <div id="kikaku"> <p><img src="#" alt="" width="130" height="15"></p> ▲ インラインは適当なブロック要素で括りましょう。 ▲ Transitional では問題ありませんが。 ▲ img 要素には alt 属性が必要です。ただし属性値については場合によります。 <ul> <li><a href="#">テキストリンク1</a></li> <li><a href="#">テキストリンク2</a></li> </ul> <p><a href="#"><img src="#" alt="" border="0" width="120" height="20"></a></p> ▲ 関係ありませんが、img 要素の border 属性は非推奨とされています。 ▲ border:none; と class 属性及びクラスセレクタを用いることで解消できるかもしれません。 </div> </body> </html> 理想とされている構成を実現するには十分なソースだと思いますが、 実際にページとして作成されたとき、文字の大きさを大きくされた際に内容が崩れる可能性があります。 ブラウザによって文字の大きさを変える方法が異なるため、絶対値指定のサイズが保証されることはありません。 どうしてもそのような表示をさせたいのであれば、画像を用いましょう。 画像を利用できないブラウザを考慮する場合は、内容が改行された際にも対応できるような構成にする必要があります。 が、ここまで対応できる人は、そもそもそんな構成を考えないかもしれません。 何か不明な点があればコメントしてください。 また、私の示したソースに不適切な点がある可能性は否めません。
その他の回答 (4)
- quads
- ベストアンサー率35% (90/257)
> paddingはIEとその他では認識が違い、Firefox等ではその分ボックスの幅が広がってしまうような事がネットのページに書いてありました。 http://hp.vector.co.jp/authors/VA022006/css/box.html http://www.kanzaki.com/docs/html/htminfo17-2.html#box width 値及び height 値が content 領域を与えるとすれば、 少なくとも Quirks mode に於ける IE は margin 領域までを content 領域として解釈しています。 > また、リストマーカーもIE以外では表示されてしまい、今の僕の知識ではどうしたらいいかわかりません。 > リストのマーカーは画像に置き換える指定をしており、その後に続くテキストはインデント10pxで文字を後ろへずらしております。 具体的なスタイルシート指定を示してください。 CSSでの『テキストをインデント』というと、text-indent プロパティを想定します。 ul, olリストに関するクロスブラウザ手法は、margin 値及び padding 値を再定義します。 --> margin:0; padding:0 とした上で、 --> margin-left:32px; などを指定するのが一般的でしょうか。 また、list-style-potision も指定します。 ブラウザによってマーカーの inside, outside が異なるとズレが生じます。 理想形に合わせて指定します。 その上で、マーカーを消したいのであれば、 --> list-style:none; とでも指定してください。 何か分からなければコメントしてください。
補足
ご回答ありがとうございます！ やはりまだまだ勉強不足ですね＾＾； 下記に実際に記述したCSSの一部を記載します。 ul{ margin:0px;} #kikaku { width: 138px; float:left; height: 200px; padding: 3px 3px; text-align:left; border-right: solid 1px #666666; } #kikaku ul { margin-bottom:5px; } #kikaku li { list-style:none; background-image:url(../image/left_navi/li_on.gif); background-repeat:no-repeat; background-position:left center; display: block; margin-top: 5px; } #kikaku li a { letter-spacing:0.1em; text-indent:12px; font-size:12px; } #kikaku li a:link { color: #333333; } #kikaku li a:hover { color: #009999; } 概要としましては、幅140pxのボックスの中に、リストタグでテキスト を表示させたいのです。 IEでは綺麗に表記されるのですが、他のブラウザでは、大きく幅が広がってしまい、リストマーカーに差し替えた画像もテキストに重なってしまいます。 参考書を片手に作ったものですので、知識のある方からすれば、なんだ！これ笑 と思われるかもしれませんが、アドバイスいただければ幸いでございます。 ----htmlはこんな感じです---- <div id="kikaku"><img src="#" width="130" height="15"><br> <ul> <li><a href="#">テキストリンク1</a></li> <li><a href="#">テキストリンク2</a></li> （・・・省略） </ul> <a href="#"><img src="#" border="0"></a> </div>
- quads
- ベストアンサー率35% (90/257)
基本的に利用されているブラウザは WinIE6 と考えて宜しいのでしょうか。 他の方が、CSSが対応していないと仰られていますが誤解が生じそうなので回答させていただきます。 CSSの各プロパティはCSSの仕様によって定められています。 現在は CSS level 2 が勧告されており、多くの（いわゆる）ブラウザはこのバージョンのCSSを実装しています。 しかし、ブラウザはCSSの仕様に対して正しく実装できていない部分があります。 この実装不備がブラウザ間での実装差異となり、同じ HTML+CSS であるにもかかわらず、異なる表示結果となってしまっています。 実装差異は、いうなればブラウザの個性ですからそれほど問題になりませんが、 実装不備による実装差異は、理想通りの表示結果とならないため問題があります。 最も利用されている Internet Explorer は特に実装不備が多いです。 しかしながら、IEの利用者が多い故、このIEに合わせたCSS記述が増えてしまっています。 そんなIEに合ったCSSが適用されたページを他のブラウザで表示すれば、理想的な表示がされない可能性が高いです。 CSSの仕様に従えば、恐らくIEでの表示が崩れます。 これを標準とし、IEでもある程度は理想的な表示ができるようにCSSを書くのがクロスブラウザの手法です。 深い話をすると長引いてしまうのでこの辺で失礼します。
補足
ご回答ありがとうございます。 下記でお応えいただいた方にも再度ご質問したのですが、例えば、Aという170px幅のボックスを作ります。 Aはパディングに左右10px、ボーダーを実践で1pxとそれぞれ指定をしており、その中に、リストでテキストを打ち込んであります。 リストのマーカーは画像に置き換える指定をしており、その後に続くテキストはインデント10pxで文字を後ろへずらしております。 IEでは思ったとおりに表示されるのですが、それ以外のブラウザではずれてしまうどころか、リストマーカーも表示されています。 IE以外ではAのボックス170pxプラスで、パディングとボーダーの幅も加算されて、幅が192pxとなってしまうのでしょうか。
- EFA15EL
- ベストアンサー率37% (2657/7006)
原因は既に出ている様にブラウザごとのCSS対応の違いによるものです。 一般的な解決方法としては、ワンソースでこなすというより、jsなどを使ってブラウザ判定（OS判定含む）をして、それぞれ別のCSSファイルを読み込ませるという手法があります。 当然ながらこれを行う為にはCSSの知識もさることながら、それぞれの環境での表示結果を確認出来る必要があります。 もちろん個人レベルであれば、自分が無理無く確認出来る範囲で充分ですけどね。
お礼
ありがとうございます。 まだCSSの勉強自体を始めたばかりですので、これからまだまだ勉強していきたいと思います。 お忙しい中ありがとうございました＾＾
- SegawaRui
- ベストアンサー率38% (100/261)
使っているCSSがInternet Exploreに対応していても他のブラウザでは対応していないために崩れることが考えられます。 あと同じブラウザでもバージョンによって対応するかどうかが変わってきますね。 対策としては出来るだけ幅広く対応しているcssを使用し、多数のブラウザでこまめに確認しながら作成して言ってください。 確かHTMLだけでも非対応のものがいくつかあったように思います。 タグ打ちならリファレンスを片手にそういった点に注意し、作成ソフトでは少なくとも非対応のものを使用していないか確認、修正できるくらいの知識が必要じゃないでしょうか。
補足
SegawaRui様 ご回答ありがとうございます。 リファレンス等を見て、対応していないタグはhtml・css共に使用していないはずなのですが、おそらくはpaddingが原因ではないかと思います。 paddingはIEとその他では認識が違い、Firefox等ではその分ボックスの幅が広がってしまうような事がネットのページに書いてありました。 また、リストマーカーもIE以外では表示されてしまい、今の僕の知識ではどうしたらいいかわかりません。 （最近独学でCSSの勉強を始めたばかりでして・・・） 例えば、Aという170px幅のボックス内に、リストを制作し、リストのマーカーを画像に置き換えた場合、paddingでテキストの余白を取っているのですが、そのようなやり方は間違っているのでしょうか。 左右のpaddingを10pxとした場合、IE以外では190pxの幅が取られてしまうのでしょうか。（ちなみにボーダーの太さ分もIE以外ではプラスで幅が広がってしまうとの事です） ページを見てもらうのは一番いいのかとは思いますが、アドレスは載せてはいけないようですので・・・。 ご回答いただけましたら幸いでございます。
お礼
遅い時間にも関わらずご回答いただき本当にありがとうございました！ 詳細にお教えいただきましたおかげで、CSSの方を修正し、IEではもちろん問題なく、また他ブラウザでも、修正前はグチャグチャで見れたものじゃなかったページも、まだ問題はある物のなんとか普通には見れる状態にまでなりました＾＾ 本当にありがとうございました！ また分からない事がありましたら、新しくスレッドを立てて質問させていただくかと思いますので、その時にまたみかけましたらご回答をいただきたいと思います。 ご丁寧にご回答をいただきまして本当に感謝いたしております。 ありがとうございました。