• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：XHTML・CSSでの塊と塊の隙間の空け方は？）

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

このQ&Aのポイント
  • XHTML・CSSでの塊と塊の隙間の空け方について、隙間を開ける方法や注意点についてまとめています。
  • XHTML・CSSでは、塊と塊の隙間を開けることに悩んでいる方も多いです。h2タグやpタグのmarginを調整したり、画像の回り込みを設定したりする方法がありますが、思うように隙間が開かないこともあるようです。
  • XHTML・CSSで塊と塊の隙間を開ける方法について、まとめて詳しく教えてください。どのような方法が効果的で、隙間を開けるために注意すべき点はありますか？
  • touchy
  • お礼率88% (704/796)
  • CSS
  • 回答数7
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

　ちょっと生き抜きというか、時間が取れたので補足を待つ間の時間に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>

touchy
質問者

お礼

相当参考になっています。質問直後に別の最優先業務が入ってきてお礼が遅くなって申し訳ありませんでした。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (6)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.7

具体的に困っているソースを貰えないと、そのものずばりの回答はできません。回答者はエスパーではないのですから。あえて質問文を深読みすると、表のような表現で縦方向のマージンが上手く取れないという質問かな？と思います。 初心者にありがちなことなら、 floatしており、高さが持てない要素にしているのに、clearしていない マージンの相殺を知らない が、2大原因かな？と思います。何のこと？と思われる場合は、一度「float 高さ」や「マージンの相殺」で検索してみてください。回り込む画像の縦サイズとありますが、floatすれば縦サイズはなくなります。フロートは回り込みさせるプロパティと解釈していれば、はまる罠です。フロートは浮動化させるもので、本来の流れから切り離し浮かせて寄せるので、高さをもてなくなります（cssの仕様）。そこに、見た目高さがあると思い込んでマージンの指定をしても、思うようにならないとなります。そして、ブラウザの一部にfloatに高さを持たせるものもあるので、一層ややこしくしています。 詳しくは、検索されると、図で説明したページがいっぱい出てきます。原因は古い情報でも構いませんが、解決法は新しい情報で、解釈に問題がないかを精査した上でご使用ください。 外れていたらごめんなさい。エスパーになりそこなったということで、具体的に困っているソースを見せてもらえると、アドバイスできるかもしれません。そのときは、モードも必要になるので、文書宣言も一緒に見せてください。

touchy
質問者

お礼

会社サイトなのでソースは出せません。みなそれぞれ事情があるのです。でもありがとうございました

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

ブラウザでの確認ですが、IE5は左によりますが、IE6以降、firefox,Opera,safari,googleChromeのいずれでも、ほとんど同じに見える。 　経験も必要ですが、HTMLを書くときにデザインを考えない。ひたすら文書構造だけを考えてマークアップする。CSSを書き始めてどうしても必要なったら必要最小限とは言っても文書構造を変えない程度に加える。文書構造を変えなくてはならないということは、HTML自体に問題があることのほうが多いです。 　今回も独立した塊が、albumというセクションで括られているから、デザインできるのです。 　これが唯一最善のテクニックですかね。 　ここにもそう書いてある。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より

touchy
質問者

お礼

感謝にたえまえせん

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

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

touchy
質問者

お礼

これもかなり参考になります。ありがとうございました

全文を見る
すると、全ての回答が全文表示されます。
  • tracer
  • ベストアンサー率41% (255/621)
回答No.3

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

touchy
質問者

お礼

参考になりました。ありがとうございました

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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

touchy
質問者

お礼

やっと超優先業務から開放されてみてみましたが、ORUKA1951さまは凄い！それに何度も投稿頂いて感謝にたえません。 本当にありがとうございます。 これから詳しく拝見させていただきますね！ 本当にありがとうございます

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

　数年前まで、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では指定しない。ユーザーエージェントはブラウザだけじゃないので・・ 　

touchy
質問者

お礼

ありがとうございます。色々と大変な知識をお持ちな方だと推察いたします。 是非、隙間の空け方のテクニックをお聞かせください。楽しみにしています

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • XHTML+CSS IE5.5で見ると崩れる

    皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>練習</title> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう？わかる方おしていただけると助かります。

    • ベストアンサー
    • CSS
  • CSSの記述でのクラスの定義で

    CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか？ 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Firefoxでの画像の縦の隙間をなくしたい

    現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }

    • ベストアンサー
    • CSS
  • FireFoxで見るとdiv間に隙間が・・・

    divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 画像とその下にあるテキストの隙間を小さくする方法

    ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。 管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。 これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。 この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。 また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。 画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。

    • 締切済み
    • CSS
  • CSSファイルのコメント

    CSSファイルにコメント（/*・・・・*/）を入れるとIEで表示されないことがあります。 ftpするとWEB上では表示されるようです。 ローカル環境だけで起こるようなのですが、このような現象後存知ですか？ たとえば、CSSの内容は /*ヘダー*/ h1,h2,h3,h4,h5,h6,ul,ol,dl,p { margin-top: 0px; margin-bottom: 0px; } /*内容*/ body { margin: 0px auto; width: 750px; font-size: 0.8em; color: #333333; line-height: 1.5em; 宜しくお願いします。

    • ベストアンサー
    • CSS
  • CSSでIE6だけ出る隙間をなくしたい

    お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • xhtml+cssでレイアウトしたページがmacで崩れる

    xhtml+cssでレイアウトして、コーディングしたPageなのですが、 階層Pageで作ったソースをコピーして4P作成しました。 テーブルは一切使わず、ヘッダー、メニュー、メイン、フッターで構成し、CSSでレイアウトをおこない、うまくできたのですが、どうしてか、MACのIE5.1の環境の時だけ、サイドメニューの下にメインコンテンツが、崩れてきてしまい、メインのスペースが空白になってしまいます。 MAC IE5.2では問題なく見れました。 それも、他の階層ページは、問題なく表示するのです。 cssソースは以下になります。 ヘッダー フッター省略 度々の質問で恐縮です。 @charset ”utf-8”; /*ここからコンテンツ*/ #contents { margin: 0px 0px 0px 63px; padding: 0px; width: 900px; height: 1100px; } #contents #main { margin: 0px; padding: 0px; float: right; height: 1100px; width: 680px; } #contents #main h2 { background: url(../treet/images/title_08.jpg) no-repeat; height: 57px; width: 633px; padding: 0px; margin-top: 15px; margin-left: 5px; } #contents #main h2 em { visibility: hidden; } #contents #main p { margin: 5px; padding-bottom: 15px; font: 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; width: 550px; border-bottom: 1px dotted #CCCCCC; } #contents #main h3 { color: #666666; height: 16px; margin-right: 15px; margin-left: 30px; padding-top: 4px; padding-bottom: 6px; padding-left: 6px; border-bottom: 1px dotted #a5d3e2; border-left: 6px solid #a5d3e2; width: 555px; font: 16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; } .p1 { margin: 0px; padding: 0px; width: 550px; font: 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; color: #666666; } .p2 { margin: 0px; padding: 0px; width: 550px; font: bold 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; color: #82C1D7; } .p1-a { font-size: 12px; width: 520px; margin: 0px; padding: 0px; line-height: 16px; text-align: right; float: right; } .block { display: block; width: 520px; margin-left: 25px; } #contents #main h2#list { height: 57px; width: 633px; padding: 0px; margin-top: 15px; margin-left: 5px; background-image: url(../company/images/title_08.jpg); background-repeat: no-repeat; } .p3 { font-family: ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”; font-size: 12px; line-height: 120%; color: #666666; } /*ここまでコンテンツ*/ /*ここからサイドナビ*/ #contents #sidenavi { background: #99CC66 url(images/bg_19.jpg) repeat; margin: 0px; padding: 15px 0px 0px 5px; height: 1100px; width: 190px; float: left; } #contents #sidenavi h2 { font-size: 9px; float: left; margin: 0px; padding: 0px; } #sidenavi h2 a { text-decoration: none; display: block; height: 56px; width: 182px; margin: 0px; padding: 3px 0px 3px 3px; color: #0000CC; font-family: ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; } #sidenavi em { visibility: hidden; } /*サイドナビ1番*/ #sidenavi h2#sn1 { background: url(images/navi_06.jpg) no-repeat; } #sidenavi h2#sn1 a:hover,#sidenavi h2#sn1 a:active { background: url(images/navi_ov_06.jpg) no-repeat; } /*サイドナビ2番*/ #sidenavi h2#sn2 { background: url(images/navi_12.jpg) no-repeat; } #sidenavi h2#sn2 a:hover,#sidenavi h2#sn2 a:active { background: url(images/navi_ov_12.jpg) no-repeat; } /*サイドナビ3番*/ #sidenavi h2#sn3 { background: url(images/navi_14.jpg) no-repeat; } #sidenavi h2#sn3 a:hover,#sidenavi h2#sn3 a:active { background: url(images/navi_ov_14.jpg) no-repeat; } /*サイドナビ4番*/ #sidenavi h2#sn4 { background: url(images/navi_16.jpg) no-repeat; } #sidenavi h2#sn4 a:hover,#sidenavi h2#sn4 a:active { background: url(images/navi_ov_16.jpg) no-repeat; } /*ここまでサイドナビ*/

  • 下に隙間ができる

    Flashコンテンツの周りにボーダーラインを書きたいのですが、 下記のように記述すると、コンテンツの下に2pxくらいの隙間が できてしまいます。 この隙間はどうすれば消すことができるのでしょうか？ ・HTML <div class="mainimage"> <embed src="test.swf" wmode="transparent" width="720" height="272"> </div> ・CSS div.mainimage { margin-top: 28px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; width: 720px; border: 1px solid #000000; }

    • ベストアンサー
    • Flash
  • CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

    初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する