- ベストアンサー
XHTML・CSSでの塊と塊の隙間の空け方は？
- XHTML・CSSでの塊と塊の隙間の空け方について、隙間を開ける方法や注意点についてまとめています。
- XHTML・CSSでは、塊と塊の隙間を開けることに悩んでいる方も多いです。h2タグやpタグのmarginを調整したり、画像の回り込みを設定したりする方法がありますが、思うように隙間が開かないこともあるようです。
- XHTML・CSSで塊と塊の隙間を開ける方法について、まとめて詳しく教えてください。どのような方法が効果的で、隙間を開けるために注意すべき点はありますか？
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと生き抜きというか、時間が取れたので補足を待つ間の時間にHTMLとCSSを書いてみました。4.01strictですが、<link><img><hr>の内容を持たない要素を除いて整形型になっていますから、XHTMにしたければ該当箇所、XML宣言、head内を変更してください。 注)文章全体を把握していないので、どのようなマークアップが最適か判断つかねるので、三種類作ってみた。いずれも極めてシンプルでしょ(^^)苦しんでない証拠です。 HTMLが正しければ、CSSでどのようにも表現できます。HTMLをデザイン前提で作成するとこうはいかないでしょう。 注)写真は./photoに、スタイルシート(次回)は./styleSheetに置くこと。 注)divで囲んだ場合hrが入っていますが、HTML5では「文章の区切りを表す」と定義が変わったので文書構造上問題ないと考えました。 注)最大で600pxですが、i-phoneのような狭いscreen端末でも問題なく表示されます。ウィンド幅を変えて確認してください。 注)olの場合の<li class="dummy">は表示のためだけのダミーです。(必要最小限のものにとどめたつもり) 注)携帯電話用、印刷用スタイルシートは今回はありません。なくても文書構造はあっているので閲覧に師匠はまったくないでしょう。 注)画像は手持ちのものを使いました。画像はご自身のものと差し替えてください。画像サイズは問いません。 注)スタイルシートは可能な限りシンプルにして一画面で見渡せるようにしてあります。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] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/default.css"> <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css" title="標準"> </head> <body> <div class="header"> <h1>サンプル</h1> <div class="article summary"> <p> 画像を一枚だけ含むリスト、もしくはセクションのマークアップとスタイルシート。代替スタイルシートでデザインは任意のものを選べる。[表示]→[スタイルシート] </p> </div> </div> <div class="section album"> <div> <h2>タイトル1</h2> <p> <img src="./photo/001.jpg" width="256" height="192" alt="001画像の言葉での説明"> </p> <p> 今年の春、初めてコリークラプの春季展覧会と言うものを見に行った。ここからだと随分の距離、高速を利用しても１時間３０分かかる遠方だけど、多くのコリー、シェルティを見て楽しくなりました。 </p> <p> 遠いのと時間がとりにくいため、毎年と言うわけにはいきませんが機会を作ってでも見に行きたいものです。 </p> <p> それにしてもコリーはでかい。いくらラッシー世代とはいえ住宅事情を考えたらちょっと無理だなぁ。やはりシェルティにしておこう。 </p> <hr> </div> <div> <h2>タイトル2</h2> <p> <img src="./photo/002.jpg" width="256" height="192" alt="002画像の言葉での説明"> </p> <p> 今年春季ドッグショーにて・・ </p> <hr> </div> ・・・【中略】・・・ </div> <div class="section album"> ・・・【中略】・・・ <dl> <dt>タイトル4</dt> <dd><img src="./photo/004.jpg" width="314" height="256" alt="004画像の言葉での説明"></dd> <dd>今年春季ドッグショーにて・・</dd> </dl> <dl> <dt>タイトル5</dt> <dd><img src="./photo/005.jpg" width="256" height="192" alt="005画像の言葉での説明"></dd> <dd>今年の春、初めてコリークラプの春季展覧会と言うものを見に行った。ここからだと随分の距離、高速を利用しても１時間３０分かかる遠方だけど、多くのコリー、シェルティを見て楽しくなりました。</dd> <dd>遠いのと時間がとりにくいため、毎年と言うわけにはいきませんが機会を作ってでも見に行きたいものです。</dd> <dd>それにしてもコリーはでかい。いくらラッシー世代とはいえ住宅事情を考えたらちょっと無理だなぁ。やはりシェルティにしておこう。</dd> </dl> ・・・【中略】・・・ </div> <div class="section album"> <ol> <li>タイトル1 <ul> <li><img src="./photo/001.jpg" width="256" height="192" alt="001画像の言葉での説明"></li> <li>今年春季ドッグショーにて・・</li> </ul> </li> <li>タイトル2 <ul> <li>今年の春、初めてコリークラプの春季展覧会と言うものを見に行った。ここからだと随分の距離、高速を利用しても１時間３０分かかる遠方だけど、多くのコリー、シェルティを見て楽しくなりました。</li> <li>遠いのと時間がとりにくいため、毎年と言うわけにはいきませんが機会を作ってでも見に行きたいものです。</li> <li>それにしてもコリーはでかい。いくらラッシー世代とはいえ住宅事情を考えたらちょっと無理だなぁ。やはりシェルティにしておこう。</li> </ul> </li> <li>タイトル3 <ul> <li><img src="./photo/003.jpg" width="256" height="192" alt="003画像の言葉での説明"></li> <li>今年春季ドッグショーにて・・</li> </ul> </li> <li class="dummy"><hr></li> </ol> </div> </body> </html>
その他の回答 (6)
- DrFell
- ベストアンサー率55% (305/551)
具体的に困っているソースを貰えないと、そのものずばりの回答はできません。回答者はエスパーではないのですから。あえて質問文を深読みすると、表のような表現で縦方向のマージンが上手く取れないという質問かな？と思います。 初心者にありがちなことなら、 floatしており、高さが持てない要素にしているのに、clearしていない マージンの相殺を知らない が、2大原因かな？と思います。何のこと？と思われる場合は、一度「float 高さ」や「マージンの相殺」で検索してみてください。回り込む画像の縦サイズとありますが、floatすれば縦サイズはなくなります。フロートは回り込みさせるプロパティと解釈していれば、はまる罠です。フロートは浮動化させるもので、本来の流れから切り離し浮かせて寄せるので、高さをもてなくなります（cssの仕様）。そこに、見た目高さがあると思い込んでマージンの指定をしても、思うようにならないとなります。そして、ブラウザの一部にfloatに高さを持たせるものもあるので、一層ややこしくしています。 詳しくは、検索されると、図で説明したページがいっぱい出てきます。原因は古い情報でも構いませんが、解決法は新しい情報で、解釈に問題がないかを精査した上でご使用ください。 外れていたらごめんなさい。エスパーになりそこなったということで、具体的に困っているソースを見せてもらえると、アドバイスできるかもしれません。そのときは、モードも必要になるので、文書宣言も一緒に見せてください。
お礼
会社サイトなのでソースは出せません。みなそれぞれ事情があるのです。でもありがとうございました
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ブラウザでの確認ですが、IE5は左によりますが、IE6以降、firefox,Opera,safari,googleChromeのいずれでも、ほとんど同じに見える。 経験も必要ですが、HTMLを書くときにデザインを考えない。ひたすら文書構造だけを考えてマークアップする。CSSを書き始めてどうしても必要なったら必要最小限とは言っても文書構造を変えない程度に加える。文書構造を変えなくてはならないということは、HTML自体に問題があることのほうが多いです。 今回も独立した塊が、albumというセクションで括られているから、デザインできるのです。 これが唯一最善のテクニックですかね。 ここにもそう書いてある。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より
お礼
感謝にたえまえせん
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートです。こちらはもっと簡単です。 ★同じくタブは全角スペースに置き換えてある。 シンプル イズ ザ ベスト たぶん見るだけで何をしてるかわかる [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
- ベストアンサー率41% (255/621)
一言でいうと、つまり行間や行数や画像の高さによって、文章の回り込みが気持ち悪いときがある。ということですよね？ 逆に言うと、これはテーブルレイアウトだとなんとかなる問題なんですか？ もし、テーブルレイアウトでなんとかなる問題なのであれば、CSSでもなんとかできるはず。 たとえば、画像にmin-heightやmarginなどを設定してみるとか。 文章と同じPの中に画像が入ってくるのであれば、pに設定されたline-heightも関係してきますね。 ちなみに、どのブラウザでの検証でしょうかね。 どんなブラウザでも問題が起きるということでしょうか。 たとえば対象としているブラウザがIEだけだとしたら、事情も少し変わってくると思います。
お礼
参考になりました。ありがとうございました
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞是非、隙間の空け方のテクニックをお聞かせください。楽しみにしています 普段は受けないのですが、折り良くHTML/CSSのマニュアルを作成中で、著者の方々の要望をリサーチしているときなので、作成してみましょう。 とりあえず、下記の情報をお知らせいただければ、何度もやり取りしなくてよいかと思います。 ★画像の平均サイズと、高さが最大のもののサイズ(許容したいサイズ) ★ひとつのテーマにおける文字数、段落数 ★キャッチ的な画像が、文章上重要なものか？ アルバムや写真主体の紀行文、図鑑は画像そのものがテーマですが、ナビゲーションリンク的なものなら副次的なものになります。画像が絶対に必要なものか、最悪なくてもよいのか？ ★「見出し・画像・文章」を１ブロックと考えた場合、何ブロック～何ブロックぐらいになるのか？ このくらいかな・・補足に書いてください。
お礼
やっと超優先業務から開放されてみてみましたが、ORUKA1951さまは凄い！それに何度も投稿頂いて感謝にたえません。 本当にありがとうございます。 これから詳しく拝見させていただきますね！ 本当にありがとうございます
- ORUKA1951
- ベストアンサー率45% (5062/11036)
数年前まで、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標準でマークアップすると <div class="section album"> <h2>本文見出し</h2> <p> <img src="[画像URL]" width="" height="" alt="画像の言葉での説明"> </p> <p> 文章 <p> </div> <div class="section"> <h2>本文見出し</h2> <p> <img src="[画像URL]" width="" height="" alt="画像の言葉での説明"> </p> <p> 本文 <p> </div> あるいは、 <dl class="album"> <dt>画像のタイトル</dt> <dd><img src="[画像URL]" width="" height="" alt="画像の言葉での説明"></dd> <dd> 本文 </dd> </dl> <dl> <dt>画像のタイトル</dt> <dd><img src="[画像URL]" width="" height="" alt="画像の言葉での説明"></dd> <dd> 本文 </dd> </dl> あるいは <ul> <li>タイトル <ul> <li><img src="[画像URL]" width="" height="" alt="画像の言葉での説明"></li> <li>本文</li> </ul> </li> </ul> などになっているはずです。 ここで、ちょこっとだけ文書構造を壊さないという制限の上で画像の回り込み制御のために<HR>要素やブロックで囲んで置いたりします。 【結果】 <div class="section album"> <h2>本文見出し</h2> <p> <img src="[画像URL]" width="" height="" alt="画像の言葉での説明"> </p> <p> 文章 <p> <hr> </div> ・・・・・・・・・・・ <div class="section album"> <dl class="album"> <dt>画像のタイトル</dt> <dd><img src="[画像URL]" width="" height="" alt="画像の言葉での説明"></dd> <dd> 本文 </dd> </dl> ・・・・・・・・・・・ <div class="section album"> <ul> <li>タイトル <ul> <li><img src="[画像URL]" width="" height="" alt="画像の言葉での説明"></li> <li>本文</li> </ul> </li> </ul> </div> ・・・・・・・・・・・ とか、基本的にこれ以上のマークアップは不要ですね。隣接セレクタを理解できないブラウザ対処として、スタイルシートの後方互換を考えれば pやdd、liにclassをつけておく場合もあります。 <div class="section album"> <dl class="album"> <dt>画像のタイトル</dt> <dd class="photo"><img src="[画像URL]" width="" height="" alt="画像の言葉での説明"></dd> <dd> 本文 </dd> </dl> とかね。 このようにHTMLがWeb標準で正しくマークアップされていれば、期待されるプレゼンテーションは無論、どんなプレゼンテーションにも対応できるでしょう。 なお、 (2)キャッチ的な画像イメージが右側に回り込んでいる ここにはsrcにclassで右回り込み用のCSSを書いている。 ・・・・できればHTMLでは指定しない。ユーザーエージェントはブラウザだけじゃないので・・
お礼
ありがとうございます。色々と大変な知識をお持ちな方だと推察いたします。 是非、隙間の空け方のテクニックをお聞かせください。楽しみにしています
お礼
相当参考になっています。質問直後に別の最優先業務が入ってきてお礼が遅くなって申し訳ありませんでした。