- ベストアンサー
XHTML・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では指定しない。ユーザーエージェントはブラウザだけじゃないので・・
関連する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; } /*ここまでサイドナビ*/
- 締切済み
- その他（インターネット・Webサービス）
- 下に隙間ができる
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でも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
お礼
ありがとうございます。色々と大変な知識をお持ちな方だと推察いたします。 是非、隙間の空け方のテクニックをお聞かせください。楽しみにしています