かれこれ三時間が過ぎてしまいました。
現在CSSを使ってブロックレイアウトをしているのですが、なかなかうまく行きません!ブラウザごとに違って見えちゃいます。
質問1です。
上から3つのブロックを作っています。
ブロックごとにボーダーの色などを指定するのですが、ブラウザによって表示が違ってしまいます。ボーダーなどの指定ってブラウザによって非推奨とかあるのでしょうか?
質問2です。
こちらもブラウザの問題なのですが、InternetExplorerだときちんと中央に表示されるのですが、netscapeなどでは左によってしまいます。ブロックなどの表示位置をCSSで指定できないのでしょうか?やはりHTML部分に、直接センター表示を明記した方がいいのでしょうか?
宜しくお願いします。
No.5ベストアンサー
- 回答日時:
えと、これは単に<br>です。
それにスタイルシートでclear:bothしてるだけ。
ただこれははっきり言っちゃうと文法違反です。
clear:bothはブロックレベルにしか使えない(BRはインライン)んだけど、上手く表示されちゃうので結果オーライみたいな。
あとは、空のdivを作ってそこでfloatをクリアしたりとかでもできる。
ようは、floatしてるブロックレベルの後に、floatしてないものがあって、そこでfloatをクリアするということです。
たぶん、これでも良く分からないなら、本を買って勉強した方がいいです。
スタイルシートはまだまだ理屈では上手くいかない部分やブラウザ対応が必要ですし、HTMLの知識もしっかりしたものがないと組めません。
cssも辞書なくてもすらすら手書きできるくらいがベストです。
頑張ってね。
coderさん本当に有難うございました。
CSSもまだまだ発展中ですし、追いかけるのが精一杯です。色々分からないことが沢山ありますが、がんばって勉強していきたいと思います。
No.4
- 回答日時:
1.「borderについて」
borerは初期設定では「none」になってますので、0であるならばいらないです。
---------------------------------------
2.「float時の背景について」
例えば、
<div style="width:500px;background:#cccccc;">
<div style="float:left;width:300px">左側</div>
<div style="float:right;width:200px">右側</div>
</div>
これだと、最初のDivの背景がしっかりと続いてくれないですよね?この理由というのは、
「必要な高さ算出に参考にするのはfloatしていないインライン要素とブロックレベル要素の高さであるということです。」だからなんです。
だからfloatされた左のDivと右のDivが親要素であるDIVの高さに影響を与えることができず、#000000の背景がfloatしたdivの下端まで伸びないんです。
これを解決するには、
<div style="width:500px;background:#cccccc;">
<div style="float:left;width:300px">左側</div>
<div style="float:right;width:200px">右側</div>
<br style="clear:both;">
</div>
みたいにfloatの後にbrでclear:bothしてください。こうやってfloatを解除してあげないければ親要素の背景は流れないんです。
coderさん、本当にたびたびありがとうございます。
>これだと、最初のDivの背景がしっかりと続いてくれないですよね?
まさに、その通りです・・・、
>「必要な高さ算出に参考にするのはfloatしていないインライン要素とブロックレベル要素の高さであるということです。」だからなんです。
こんな暗黙があったなんて、全然知りませんでした。
ちなみに<br style="clear:both;"></div>こんなタグもはじめてみました。brって強制開改行のbrなんでしょうか??不思議なタグです。
もう少し調べてみたいと思います。
No.3
- 回答日時:
なんかちょっと↓で誤解をまねく書きかたしてしまったので訂正。
text-alignは、インライン要素に対しての指定です。あと、忘れてた。borderは1pxって指定すれば太さはダイジョブだと、思う。。
このborderで気をつけること。~IE5.5以前では、borderやpadding、marginに0以外の値を設定すると、他のブラウザと幅の計算の仕方が変わってきます。
詳しくはネットで、ボックスとか検索するといっぱいヒットすると思うから、調べてみて。
あと、いくつか気づいた点。
1)operaのボディの余白は、marginとpaddingを共に0にしないと消えません。なので、bodyの余白の指定は、必ずmargin:0;padding:0;みたいにして下さい。
2)floatしたものや絶対配置したものを親要素(入れ子にしてるおおもと)の中に入れても、親要素の高さに影響しません。つまりこのままでは上手くborderあるいは背景が流れません。floatしたものの後にfloatしないものが来ない場合は、だからfloatしたやつの最後に<br style="clear:both">って入れてください。それでダイジョブ。
3)footerのところ。floatを解除なら、clear:bothなり、clear:leftを入れよう。
参考URL:http://www.mozilla.gr.jp/standards/webtips/index …
coderさん、ご丁寧にありがとう御座います。
>このborderで気をつけること。~IE5.5以前では、borderやpadding、marginに0以外の値を設定すると、他のブラウザと幅の計算の仕方が変わってきます。
なるほど、そのような決まりがあるのですね!ボーダーを使わないレイアウトでも背景と同系色でボーダーを指定しておいた方がいいのでしょうか?
>1)operaのボディの余白は、marginとpaddingを共に0にしないと消えません。なので、bodyの余白の指定は、必ずmargin:0;padding:0;みたいにして下さい。
operaですか、対象にしたことも無かったのですがこれからは気にしてチェックしてみたいと思います。
>だからfloatしたやつの最後に<br style="clear:both">って入れてください。それでダイジョブ。
すみません、ここのところがよく分からないのですが・・・、確かに現在ではfirefoxでみると親のボックスmainboxの高さがつぶれて変な表示になっています。
具体的に、"clear:both"はどこに入れたら良いのでしょうか?
No.2
- 回答日時:
text-align:centerというのは、そもそもブロックレベル要素の位置指定をするのに使うものでは、ありません。
テキストを真中揃えしたりするのに使うものです。IEが真中によってしまうのは、IEのバグです。その他のブラウザでも真中寄せするには、bodyに今回のようにtext-align:center;
さらに真中寄せするdiv(bannerとmainbox)に対して、marign:0 auto;みたいな形で、左右のmarginを共にautoにして下さい。これで寄ります。
ちなみにCSSデザインをするなら、まず検証の基準ブラウザにIEを使うのをやめるべきです。IEはミスに対して寛大すぎるので、今回のような間違った記述でもうまくいってしまいます。その結果他のブラウザはめちゃめちゃってなってしまいます。第一の検証はfirefoxとか最近のブラウザを使い、その上で、最後にIE検証がベストだと思います。
あとcssデザインだと、どうしても理屈ではないエラーも出てきます。ですので、それぞれのブラウザにだけ適用させるという方法も必要になってきます。
例えば、~IE5.5とIE6(互換モード)は、ボックスの概念というCSSには欠かせないものを間違えて解釈しています。その為にIE5.5だけにCSSを適用させる方法も必要になってきます。その辺も勉強しないと、ブラウザごとにずれが出るかと思います。
coderさん、ありがとう御座います。
>text-align:centerというのは、そもそもブロックレベル要素の位置指定をするのに使うものでは、ありません。テキストを真中揃えしたりするのに使うものです。IEが真中によってしまうのは、IEのバグです。
そうですか・・、バグなんですね。初めてしりました。私はバグに合わせていたんですね。
>bodyに今回のようにtext-align:center;
さらに真中寄せするdiv(bannerとmainbox)に対して、marign:0 auto;みたいな形で、左右のmarginを共にautoにして下さい。これで寄ります。
bodyによく書く、<div align="center">という物を記述すると真ん中に寄るのですが、これは使ってもいいものなのでしょうか?出来る事ならbodyには書きたくないですよね??
>第一の検証はfirefoxとか最近のブラウザを使い、その上で、最後にIE検証がベストだと思います。
そうなんですか、IEばかり見ていたので・・・。
逆にそのfirefoxとかでうまく表示されればnetscapeやIEでも正しく表示されるのでしょうか?
>あとcssデザインだと、どうしても理屈ではないエラーも出てきます。ですので、それぞれのブラウザにだけ適用させるという方法も必要になってきます。
そうなんですか、ものすごく奥が深いのですね。ブラウザごとに対応ですか、調べてみたいと思います。
No.1
- 回答日時:
まず、ボーダーの色指定。
などというのはどのような指定方法なのでしょうか。実際のページを見せていただければよいのですが、ソースの提示程度はしていただかないと回答が難しいです。
次に、IEだと思い通りに表示されるというのは、HTML文法的には間違っていると思われます。
もう少しソースの情報がないと的確なアドバイスが出来ない気がします…。
http://openlab.ring.gr.jp/k16/htmllint/htmllinte …
http://jigsaw.w3.org/css-validator/
一度検証されてみてはいかがでしょうか。
quadsさん、ありがとう御座います。
>ソースの提示程度はしていただかないと回答が難しいです。
そうですよね、今少しかまっていた物を載せてみたいと思います。HTMLとCSSをお恥ずかしいですが掲載いたしますので、ご指摘等宜しくお願いいたします。
まずはHTMLです。
<body>
<div id="banner">
<p>ここがバナーでーす。</p>
</div>
<div id="mainbox">
<div id="leftbox">
<p>ここが左側です。</p>
</div>
<div id="centerbox">
<p>ここが中央です。</p>
</div>
<div id="rightbox">
<p>ここが右側です。</p>
</div>
</div>
<div id="footer">
<p>ここがフッターです。</p>
</div>
</body>
次にCSSです。
body {
font-size: small;
text-align: center;
margin: 0px;
}
#banner {
height: auto;
width: 700px;
border: thin solid #FF33FF;
}
#mainbox {
height: auto;
width: 700px;
border: thin solid #00FF00;
}
#leftbox {
font-size: small;
height: auto;
width: 200px;
border: thin solid #000099;
text-align: left;
float: left;
}
#centerbox {
font-size: small;
width: 300px;
border: thin solid #FFFF33;
float: left;
text-align: left;
}
#rightbox {
font-size: small;
text-align: left;
float: left;
border: thin solid #FF0000;
width: auto;
height: auto;
}
#footer {
height: auto;
width: 700px;
border: thin solid #CC33CC;
}
以上になります。宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
質問1.
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
NからZへの全単射を具体的に構...
-
VBA でIE 操作 ボタンをクリッ...
-
HTMLページ上でiframeを最前面...
-
改行ほどは行かないけど、若干...
-
textareaの幅を画面と合わせたい
-
input type="hidden"で取得した...
-
brタグ、pタグやtableタグが非...
-
textareaにタグを挿入したい。
-
現行の日本国憲法の古い所を教...
-
imgタグをそのまま使うことは正...
-
シュタイナー学校・宗教との関連性
-
aタグの中にdivタグを入れる場...
-
HTML_QUICKFORMのSELECTにデフ...
-
HTMLで <p>~</p>内で2回以...
-
初歩的な質問です。<div>のwidt...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
現行の日本国憲法の古い所を教...
-
質問1.
-
このサイトのカテゴリのチェッ...
-
改行ほどは行かないけど、若干...
-
「諸要素」とはどういう意味で...
-
CSSで改行後の行間調整
-
NからZへの全単射を具体的に構...
-
html タグの閉じスラッシュ前の...
-
ある要素の中身を全部グレーア...
-
input type="hidden"で取得した...
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
テキストボックスの中にリンク...
-
CSSのa:hoverが急に一部だけ効...
-
H1タグを画像にしたい
-
HTMLでTextareaを横に2つ並べ...
-
imgタグをそのまま使うことは正...
おすすめ情報