XHTML・CSSでの塊と塊の隙間の空け方は？

Question

ブラウザがW3C勧告に対応出来ていなかったテーブルレイアウトの時代は、パーツとパーツの間の隙間を好きに開けることは至って容易でした。

しかし、XHTML・CSSですと、隙間を開けることに「これでいいのか？」という思いがあります。

行間における隙間という隙間全てについてなのですが、例えば、左右600pxのローカルコンテンツエリアがあったとして、そこには

(1)h2のテキスト
ここで20px程度の隙間を入れる。
この場合、h2のmargin-botomに20pxと入れている。

(2)キャッチ的な画像イメージが右側に回り込んでいる
ここにはsrcにclassで右回り込み用のCSSを書いている。

(3)h2の下に、pタグで本文を入れている。pタグに、margin-bottomで40pxの隙間を空けている。

(4)次のh2などの新たな塊へと続く

と、このようにやってはいますが、思うように隙間があかないことも多く、四苦八苦しています。
例えば回り込む画像の縦サイズが一定以下の小ささになると、まともに隙間があかなくなったり、
他にも忘れましたが色々とうまく意図通りにならないことが多いです。

皆さんはどうやっていますか？
「これが妥当だ！」「いや、こういう理由からこの方が妥当だ」
などというお話をぜひ聞かせてください。

ORUKA1951 · Accepted Answer

　ちょっと生き抜きというか、時間が取れたので補足を待つ間の時間にHTMLとCSSを書いてみました。4.01strictですが、

の内容を持たない要素を除いて整形型になっていますから、XHTMにしたければ該当箇所、XML宣言、head内を変更してください。注)文章全体を把握していないので、どのようなマークアップが最適か判断つかねるので、三種類作ってみた。いずれも極めてシンプルでしょ(^^)苦しんでない証拠です。　HTMLが正しければ、CSSでどのようにも表現できます。HTMLをデザイン前提で作成するとこうはいかないでしょう。注)写真は./photoに、スタイルシート(次回)は./styleSheetに置くこと。注)divで囲んだ場合hrが入っていますが、HTML5では「文章の区切りを表す」と定義が変わったので文書構造上問題ないと考えました。注)最大で600pxですが、i-phoneのような狭いscreen端末でも問題なく表示されます。ウィンド幅を変えて確認してください。注)olの場合の

は表示のためだけのダミーです。(必要最小限のものにとどめたつもり) 注)携帯電話用、印刷用スタイルシートは今回はありません。なくても文書構造はあっているので閲覧に師匠はまったくないでしょう。注)画像は手持ちのものを使いました。画像はご自身のものと差し替えてください。画像サイズは問いません。注)スタイルシートは可能な限りシンプルにして一画面で見渡せるようにしてあります。HTMLのclass名でどの部分をデザインしているかわかるので、CSSだけ見て編集できるでしょう。(albumくらいしかないけど) 注)section,headerはHTML5で採用される構造化要素名です。HTML4のdivのclass名でよく使われてきたもの。検索エンジンも解釈してくれるのでこれを使った。他にfooter,hgroup,article,aside,navなどがある。albumはセマンティクな(意味がある)ものとして選んだ。　なお、・Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ・The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ・W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 ★タブインデントは全角スペースに変換してあります。 [HTML] 　　サンプル　　　　　　　　

タイトル1

　　　　 001画像の言葉での説明　　　

　　　　今年の春、初めてコリークラプの春季展覧会と言うものを見に行った。ここからだと随分の距離、高速を利用しても１時間３０分かかる遠方だけど、多くのコリー、シェルティを見て楽しくなりました。　　　

　　　　遠いのと時間がとりにくいため、毎年と言うわけにはいきませんが機会を作ってでも見に行きたいものです。　　　

　　　　それにしてもコリーはでかい。いくらラッシー世代とはいえ住宅事情を考えたらちょっと無理だなぁ。やはりシェルティにしておこう。　　　

タイトル2

　　　　 002画像の言葉での説明　　　

　　　　今年春季ドッグショーにて・・　　　

・・・【中略】・・・　

・・・【中略】・・・　　

タイトル4: 今年春季ドッグショーにて・・

タイトル5: 今年の春、初めてコリークラプの春季展覧会と言うものを見に行った。ここからだと随分の距離、高速を利用しても１時間３０分かかる遠方だけど、多くのコリー、シェルティを見て楽しくなりました。; 遠いのと時間がとりにくいため、毎年と言うわけにはいきませんが機会を作ってでも見に行きたいものです。; それにしてもコリーはでかい。いくらラッシー世代とはいえ住宅事情を考えたらちょっと無理だなぁ。やはりシェルティにしておこう。

・・・【中略】・・・　

タイトル1 　　　　
- 今年春季ドッグショーにて・・
　　　
タイトル2 　　　　
- 今年の春、初めてコリークラプの春季展覧会と言うものを見に行った。ここからだと随分の距離、高速を利用しても１時間３０分かかる遠方だけど、多くのコリー、シェルティを見て楽しくなりました。
- 遠いのと時間がとりにくいため、毎年と言うわけにはいきませんが機会を作ってでも見に行きたいものです。
- それにしてもコリーはでかい。いくらラッシー世代とはいえ住宅事情を考えたらちょっと無理だなぁ。やはりシェルティにしておこう。
　　　
タイトル3 　　　　
- 今年春季ドッグショーにて・・

DrFell · Answer

具体的に困っているソースを貰えないと、そのものずばりの回答はできません。回答者はエスパーではないのですから。あえて質問文を深読みすると、表のような表現で縦方向のマージンが上手く取れないという質問かな？と思います。

初心者にありがちなことなら、
floatしており、高さが持てない要素にしているのに、clearしていない
マージンの相殺を知らない

が、2大原因かな？と思います。何のこと？と思われる場合は、一度「float 高さ」や「マージンの相殺」で検索してみてください。回り込む画像の縦サイズとありますが、floatすれば縦サイズはなくなります。フロートは回り込みさせるプロパティと解釈していれば、はまる罠です。フロートは浮動化させるもので、本来の流れから切り離し浮かせて寄せるので、高さをもてなくなります（cssの仕様）。そこに、見た目高さがあると思い込んでマージンの指定をしても、思うようにならないとなります。そして、ブラウザの一部にfloatに高さを持たせるものもあるので、一層ややこしくしています。

詳しくは、検索されると、図で説明したページがいっぱい出てきます。原因は古い情報でも構いませんが、解決法は新しい情報で、解釈に問題がないかを精査した上でご使用ください。

外れていたらごめんなさい。エスパーになりそこなったということで、具体的に困っているソースを見せてもらえると、アドバイスできるかもしれません。そのときは、モードも必要になるので、文書宣言も一緒に見せてください。

ORUKA1951 · Answer

ブラウザでの確認ですが、IE5は左によりますが、IE6以降、firefox,Opera,safari,googleChromeのいずれでも、ほとんど同じに見える。
　経験も必要ですが、HTMLを書くときにデザインを考えない。ひたすら文書構造だけを考えてマークアップする。CSSを書き始めてどうしても必要なったら必要最小限とは言っても文書構造を変えない程度に加える。文書構造を変えなくてはならないということは、HTML自体に問題があることのほうが多いです。
　今回も独立した塊が、albumというセクションで括られているから、デザインできるのです。

これが唯一最善のテクニックですかね。
　ここにもそう書いてある。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より

ORUKA1951 · Answer

スタイルシートです。こちらはもっと簡単です。
★同じくタブは全角スペースに置き換えてある。
　シンプル　イズ　ザ　ベスト
　たぶん見るだけで何をしてるかわかる

[default.css] すべての端末に適用される固定スタイルシート

@charset "Shift_JIS";
html,body{margin:0;padding:0;line-height:1.4em;}
p,dd{text-indent:1em;}
hr{visibility:hidden;clear:both;}
p{margin:1ex 1em;}

[standard.css]scheemとcolorで分けたほうが楽かも

@charset "Shift_JIS";
/* 共通設定 */
body{background-color:gray;}
h2,dt,ol li{font-weight:bold;font-size:1.2em;}
div.header,
div.section{
　width:60%;max-width:600px;margin:0 auto;padding:5px;
　background-color:white;border:white 1px solid;
}
div.album img{float:right;margin-bottom:10px;}
h2{border-top-color:green;border-top-width:2px;border-top-style:solid;}
/* dlで括った場合 */
div.album dl{clear:both;margin:10px 0 0 0;padding:0;}
div.album dd{margin:1ex 1em;}
div.album dt{
　border-top-color:green;border-top-width:2px;border-top-style:solid;
}
/* olで括った場合 */
div.album ol,div.album ul{margin:0;padding:0;}
div.album ol li{
　clear:both;list-style:none;margin:0;padding:0;margin:1ex 0;
　border-top-color:green;border-top-width:2px;border-top-style:solid;
}
div.album ol li li{
　clear:none;font-weight:normal;font-size:1em;border:none;margin-left:1em;
　text-indent:1em;
}
div.album ol li.dummy{clear:both;border:none;}

tracer · Answer

一言でいうと、つまり行間や行数や画像の高さによって、文章の回り込みが気持ち悪いときがある。ということですよね？
逆に言うと、これはテーブルレイアウトだとなんとかなる問題なんですか？
もし、テーブルレイアウトでなんとかなる問題なのであれば、CSSでもなんとかできるはず。
たとえば、画像にmin-heightやmarginなどを設定してみるとか。
文章と同じPの中に画像が入ってくるのであれば、pに設定されたline-heightも関係してきますね。

ちなみに、どのブラウザでの検証でしょうかね。
どんなブラウザでも問題が起きるということでしょうか。
たとえば対象としているブラウザがIEだけだとしたら、事情も少し変わってくると思います。

ORUKA1951 · Answer

＞是非、隙間の空け方のテクニックをお聞かせください。楽しみにしています

普段は受けないのですが、折り良くHTML/CSSのマニュアルを作成中で、著者の方々の要望をリサーチしているときなので、作成してみましょう。
　とりあえず、下記の情報をお知らせいただければ、何度もやり取りしなくてよいかと思います。
★画像の平均サイズと、高さが最大のもののサイズ(許容したいサイズ)
★ひとつのテーマにおける文字数、段落数
★キャッチ的な画像が、文章上重要なものか？
　アルバムや写真主体の紀行文、図鑑は画像そのものがテーマですが、ナビゲーションリンク的なものなら副次的なものになります。画像が絶対に必要なものか、最悪なくてもよいのか？
★「見出し・画像・文章」を１ブロックと考えた場合、何ブロック～何ブロックぐらいになるのか？

このくらいかな・・補足に書いてください。

ORUKA1951 · Answer

　数年前まで、XHTMLに未来があってHTMLは4.01で終わりを迎えた風潮でしたが、今はHTML5(XHTMK5)の勧告を諸手を挙げて待っている状況です。現在のXHTMLは本質的にHTML4.01とstrictと変わっているわけではありません。特にXHTMLsytictとXHTML1.1は・・　策定中のHTML5の資料を読むとわかりますが、HTML3.2を経験しているとどうしてもプレゼンテーションとHTMLを混同してしまう。それがそもそもの失敗の原因だと感じています。それに気がついてHTML4.01の仕様書を読み返すと、「HTML4.01の非推奨」＝「HTML5のユーザーエージェントが対応しなければならないもの」＝「HTML5の著者が使えないもの」という意味であったことに気がつきます。　以後、頭の隅っこにプレゼンテーションを置いて、もっぱら文書構造だけにしたがってマークアップしています。　(1)から(4)のプレゼンテーションへの期待を考えると、当然それは文書構造に従っても居るはずですね。だとすると、(HTML5の考え方を取り入れた)Web標準でマークアップすると

本文見出し

　　画像の言葉での説明　

　　文章　

本文見出し

　　画像の言葉での説明　

　　本文　

あるいは、

画像のタイトル: 　　本文

画像のタイトル: 　　本文

あるいは

タイトル　　
- 本文

などになっているはずです。　ここで、ちょこっとだけ文書構造を壊さないという制限の上で画像の回り込み制御のために

要素やブロックで囲んで置いたりします。【結果】

本文見出し

　　画像の言葉での説明　

　　文章　

・・・・・・・・・・・

画像のタイトル: 　　　本文

・・・・・・・・・・・

タイトル　　　
- 本文

・・・・・・・・・・・とか、基本的にこれ以上のマークアップは不要ですね。隣接セレクタを理解できないブラウザ対処として、スタイルシートの後方互換を考えれば pやdd、liにclassをつけておく場合もあります。

画像のタイトル: 　　　本文

とかね。　このようにHTMLがWeb標準で正しくマークアップされていれば、期待されるプレゼンテーションは無論、どんなプレゼンテーションにも対応できるでしょう。　なお、 (2)キャッチ的な画像イメージが右側に回り込んでいる　ここにはsrcにclassで右回り込み用のCSSを書いている。　・・・・できればHTMLでは指定しない。ユーザーエージェントはブラウザだけじゃないので・・　

XHTML・CSSでの塊と塊の隙間の空け方は？

ちょっと生き抜きというか、時間が取れたので補足を待つ間の時間にHTMLとCSSを書いてみました。

具体的に困っているソースを貰えないと、そのものずばりの回答はできません。

ブラウザでの確認ですが、IE5は左によりますが、IE6以降、firefox,Opera,safari,googleChromeのいずれでも、ほとんど同じに見える。

スタイルシートです。

一言でいうと、つまり行間や行数や画像の高さによって、文章の回り込みが気持ち悪いときがある。

＞是非、隙間の空け方のテクニックをお聞かせください。

数年前まで、XHTMLに未来があってHTMLは4.01で終わりを迎えた風潮でしたが、今はHTML5(XHTMK5)の勧告を諸手を挙げて待っている状況です。

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

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

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

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

　ちょっと生き抜きというか、時間が取れたので補足を待つ間の時間にHTMLとCSSを書いてみました。

　数年前まで、XHTMLに未来があってHTMLは4.01で終わりを迎えた風潮でしたが、今はHTML5(XHTMK5)の勧告を諸手を挙げて待っている状況です。