でレイアウトすると上下に空白が出る

Question

現在cssを独学で勉強中です。どなたか解るか方、教えてください。

の中にまた

でBOXをつくりcssでは"float"を使ってレイアウトしようとしています。下記の内容でHTMLとcssを記述していますが、入れ子にした

要素の上下に20pxくらいの空欄ができます。これを出ないようにする方法はありますでしょうか？というか、記述としては合っているのでしょうか？一応いろんなサイトを参考にして記述してはいます。また、IEとfirefoxでは空欄の出方が違います。たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけるとありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが今度はSafariでその分要素自体が小さくなってしまいます。宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）---------

　A（ヘッダ）　

　　B（メインカラム）　　

　　C（サイドバー1）　　

　D（サイドバー2）　

　E（フッタ）　

---　css　----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }

abril · Accepted Answer

> 余分な空白が原因でした。

そうでしたか…それでは崩れる筈ですね。

> ソースを見易くする為のインデントをスペースでしていました。通常はタブでするんですね。

いえ別に「インデントはタブでしなければならない」と決まっているわけではないです。
ソースを見やすくするやり方には、個人ぞれぞれの好みがあったりしますので、質問者様が今までやられていた様にスペースでインデントを入れる方もいらっしゃいますよ。また、中にはインデントを好まず、改行やコメントタグを適所適所に入れる事で（自分的に）見やすくしている人もいますし。出自がプログラマーのコーダーの人は、タブ・インデントを好まれる場合が多い様に思えます。
ですから、質問者さまがスペース・インデントの方が使いやすければそれでも全くかまいません。
ただし…

> 全角にならぬよう気をつけていましたが、タブの方が確実で、正しいやり方だったのですね。

という事は一理あるかもしれません。もしスペースでインデントを入れる場合は、予めオーサリング・ツール（HTMLエディタ）上で全角／半角スペースが視認できる（全半角スペース挿入部分が単なる空白ではなく、がそれぞれ違った”記号”で表示される様にする、という事です。高機能エディタであればまず備えている機能です。）様な設定にしておくのが賢明です。そうすれば全角スペースの挿入が一目瞭然になりますので、間違いを防げます。

> こういうタグの勉強以前に、HTMLでの制作の常識というか、

「制作の常識」というのはちょっとあまりにも抽象的ですので、これが正解・これが間違い、と単純に決められるものではないですが…ユーザビリティとかアクセシビリティといったキーワードでググってみると大体の感じが掴めるかと思います。

> 規則というかそういうのがわかるようなものってないでしょうか？

「規則」に関しては、まずは仕様書を読む事が一番お奨めなのですが、何せ学術書ですのでビギナーの方には解説の用語からして専門的過ぎてわかりにくい感じがするかもしれません。一応、翻訳のリンク集として下記などがありますが。

【仕様書の翻訳サイト】
http://www.w3.org/Consortium/Translation/Japanese

もう少し平易に解説しているサイトなども沢山ありますので、仕様書を読みこなす為の準備段階としてまずはそういったサイトを幾つか熟読されると良いかも。ANo.2の方が引用された（引用の仕方自体は適切とは言い難かったですが…）サイト（http://www.tohoho-web.com/html/）などは、随分古くからある有名なものですね。今となってはちょっと情報が古い感も否めませんが、ビギナーにわかりやすい解説ではあります。
ほんの一例として、以下のサイトも挙げておきます。

【HTML、CSS等の解説サイト】
http://www.tagindex.com/
http://w3g.jp/

> 例えばタグの読み方なんかそうですよね。なんて読むのか全然わからないので自分で読み方決めたりしてますが、正しい読み方とかあるのでしょうか？

勿論、適切な読み方がありますよ。例えばaタグを「エイ（エー）タグ」じゃなくて「アタグ」とか読まれたらなんのこっちゃ、という感じにはなりますね。例えば、上記で挙げたサイトには発音ガイドなんかも載ってますよ。

【要素型名 発音ガイド】http://w3g.jp/xhtml/dic/element_pronunciation
【属性名 発音ガイド】http://w3g.jp/xhtml/dic/element_pronunciation

こういったHTMLのリファレンス・サイトがいくらでもありますから、ご自分で使いやすいものをブックマークしておいて常に参照されると良いでしょう。

>> ただ、このCSSを見ると、各ボックスの高さが...（以下省略）
> トップページを想定してレイアウトしています。なので、画像を入れるつもりです

画像であれば縦横サイズが固定値で決まってますからまあ、あの様なレイアウトでも可能ではありますが…
ただ、その画像が「何を意味するか」という事によって適切なマークアップは変わってきますよ。divというのは本来論理的意味を持たないブロック要素のタグですので、もしもその「トップページ」の各画像がメニュー・ボタンの様な役割でしたら、マークアップはdivよりもulなどのリストの方が相応しい事になります。ulはリストという論理的な意味を持ちますので、メニューやナビゲーションをマークアップするのに（少なくとも現時点では）おそらく最も適切な要素とされています。HTML側でまず論理的に相応しいマークアップをした上で、装飾的要素（スタイル）をCSSで与えて行くのが適切な制作方法です。

> 個人的にはブラウザごとに対策が必要なのでテーブルとうまく組み合わせて作りたいとは考えておりますが、

うーん…テーブルというはその名tableの示す通り、論理的な意味は「表」なんですよ。CSSが浸透していなかった時代にはtableをレイアウトの用途で使用することで段組や複雑なレイアウトを実現させていましたが、HTMLという論理的文書の仕様上では本来の意味から大きく逸れた間違った使い方だったんですね。でも今は、CSSの実装に関してモダン・ブラウザならまあ大体のところは対応できていますので、適切な(X)HTMLとCSSの組み合わせで大概のレイアウトは可能ですよ。それでは実現できない様なより複雑なデザイン性を望むのであれば、むしろあとはFlashなどにまかせるべきですし。
ですので、次の問いに対しては：

> テーブルとcssを組み合わせてという考え方はどうなんでしょうか？

私個人の考えですが、一からCSSを学ぼうとなさっているのなら、この際、思い切ってテーブル・コーディングとも決別された方が中途半端にならないと思います。floatとpositionあたりの性質・理屈をきちんと理解して的確に使いこなせる様になれれば、色々なレイアウトにも対応できる様になりますよ。

> これまではfireworksを使ってロールオーバーメニューを作り、Dreamweaverでテーブルの中に組み込んでいました。

前半はそのままでかまいませんが、後半は脱テーブルにトライされてみては。

> でもjavascriptや画像ファイル名などでやたらhtmlが長ったらしくるので悩んでいます。（省略）cssでロールオーバーメニューを作るとちょっと味気ないので、あまり使いたくないのですが、

？そうですか？Dreamweaverの「長ったらしく」なるJavaScriptってMM_なんたら…ってやつですよね。あのスクリプトで与えている程度の動きでしたらCSSでのロールオーバーで充分代用できると思うのですが。それに、やたらがちゃがちゃと動きがある事が見ている側にとって必ずしも良い印象を与えるわけではないですよ。返ってわずらわしいとかマイナスのイメージを持たれる場合もあります。
※ぶっちゃけた話、（そこがリンクの箇所だとわかる仕様であれば）ロールオーバーだって無くても閲覧する上では全然困らないものですし。

> 今回の事で、色々勉強になりましたので、もう一度やり直してみます。

とにかく、急がば回れのことわざじゃないですが、基本から正しい知識を習得し、理解をしながら、地道に積み上げて数をこなして行くのが一番だと思います。

abril · Answer

> 入れ子にした

要素の上下に20pxくらいの空欄ができます。 ANo.1の方と同様にソースをコピペして検証してみましたが、やはりその様な現象は再現されませんでしたし、IEとFirefoxでの（空白に関する）表示の差というのも見られませんでしたが？ ※質問文中のHTMLのソース中に全角スペースが入っているのはおそらくインデントを示す為に意図的に差し替えてあるものであり、オリジナルはタブ・インデントなのですよね？ただ、このCSSを見ると、各ボックスの高さが全て"height: 200px;"という様に絶対値で決め打ちされていますが、各ボックスの中に入る要素は可変（テキスト）ではなく固定（画像）なのですか？幅も全て決まっているので、内包する要素が溢れた場合は全く逃げ場がない事になりますがそこは問題ないのでしょうか…？ちなみに、http://www.tohoho-web.com/html/div.htm　という参照先で「同様なタグにがありますが、

はブロック要素（前後に改行がはいる）として、はインライン要素（前後に改行が入らない）として定義されています。」と解説してあるのは、決して「divには”変な改行が入る”という仕様」であると説明しているのではありません。 --------------------------------------------------------------------- 前の要素（ブロック要素・インライン要素問わず）

ブロック要素1

ブロック要素2

後ろの要素（ブロック要素・インライン要素問わず） --------------------------------------------------------------------- であれば、ディフォルトの表示は --------------------------------------------------------------------- 前の要素（ここで改行される）ブロック要素1（ここで改行される）（同上）ブロック要素2（同上）後ろの要素 --------------------------------------------------------------------- となるのに対し、 --------------------------------------------------------------------- 前の要素（ブロック要素）インライン要素1 インライン要素2 後ろの要素（ブロック要素） --------------------------------------------------------------------- であれば、ディフォルトの表示は --------------------------------------------------------------------- 前の要素（ここで改行される）インライン要素1インライン要素2 （ここで改行される）後ろの要素 --------------------------------------------------------------------- となる、という意味です。決してdivに”変な改行”が入ってるわけではありません。上記の様に表示されるのが正当な仕様である、という事だけです。この様にdivは「ブロック要素」であり、spanは「インライン要素」であり、表示形式がまず全く違うものですから、divで上手く行かないから単純にspanで置き換えが効くとか、divとspanの仕様の違いが若干とかいう問題では全くありません。本題い戻りますが、先述の様に、このサンプルでは質問者様と同じ状況になりませんので、原因の特定が難しいです。お手元のオリジナルのHTMLのソースも、サンプルの様に一度大枠だけ残して表示結果を確認してみましたか？もしそれで症状が再現されない様であれば、各ボックスの中の子要素との兼ね合いで不具合が起きている可能性が強いです。

STICKY2006 · Answer

こんちは。回答をするつもりで書き込みをしておきながら、最近ソースを読むのが非常にかったるく感じている奴なので、申し訳ないのですが、ザッと読んだ内容で把握した分ぐらいを、参考程度に回答させてもらいます。（参考にもならなかったらゴメンネ。 >>

要素の上下に20pxくらいの空欄ができます。「

使うと変な改行が入る」のは仕様ですね。 http://www.tohoho-web.com/html/div.htm 自分も結構悩んだ事ありましたが、・にして逃げるとか・しょーがないから、レイアウトでがんばってごまかすにした記憶が無きにしも非ずです。細かいことやってくと、

とでも若干仕様に違いがあったような気がしなくもなかったので、出来ることならば、レイアウトで頑張ってごまかすのをオススメしておきます。以上、ものすごく曖昧な回答です。

hachi_08 · Answer

あまり詳しく検証していないのですが、ソースに空白文字（スペース）が含まれているのかもしれません。一旦ソースに改行のない状態にしてＵＰしてみて下さい。 //------------------------------------------------------

A（ヘッダ）

B（メインカラム）

C（サイドバー1）

D（サイドバー2）

E（フッタ）

//------------------------------------------------------ ↑こんな感じに。私が確認したところ、上記ソースではFirefox、IE6、IE7ともに空欄は出ませんでした。

<div>でレイアウトすると上下に空白が出る

> 余分な空白が原因でした。

> 入れ子にした<div>要素の上下に20pxくらいの空欄ができます。

こんちは。

あまり詳しく検証していないのですが、ソースに空白文字（スペース）が含まれているのかもしれません。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング