- ベストアンサー
画像が完全に右端に寄らない！CSS勉強中に発生した問題の対処法は？
- CSS勉強中に発生した問題。div要素の中にある画像が右端に寄らず、他の要素との隙間ができてしまう。
- 問題の要因は、floatとmarginの設定が原因であり、ソースコードを見直す必要がある。
- 対処法としては、floatとmarginの設定を調整し、画像と他の要素の間隔を調整することで右端に寄せることができる。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞インラインのテキストの上側のみスペースを空けるにはどのようにしたら良いのでしょうか・・？ そんな時使うのが、position:relativeです。 ★デザインのためにHTMLを書き直す必要はありません。きちんとHTMLが書かれていれば・・ ★まったく異なる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"> ＿<style type="text/css"> <!-- /* 共通 */ div.header,div.section,div.footer{width:708px;margin:0 auto;clear:right;margin-top:20px;} div.header p.bar,div.section p.bar{margin:0;text-indent:1em;line-height:0px;} div.header p,div.section p,div.footer p{margin:0 0 0 10px;text-indent:1em;line-height:20px;} div.header p img,div.section p img{float:right;} /* hr */ div.section hr{border:none;background:url(h2_bar01.gif) no-repeat 0 0;height:20px;margin:0;} /* footer */ div.footer{background:url(h2_bar01.gif) no-repeat 0 0;padding-top:20px;} div.footer p:first-child{position:relative;margin-right:145px;} div.footer p:first-child:after{content:url(h2_bar01_ill.gif);position:absolute;top:0;right:-145px;} /* 文章の最初に余白をあける場合、下のコメントアウトを取り除く */ /* div.header p.bar{text-indent:0;margin-bottom:20px;} div.header p.bar img{float:none;} div.header p.bar+p.bar img{float:right;position:relative;top:-20px;} div.section hr{margin-bottom:10px;} div.section p.bar img{position:relative;top:-10px;} div.footer{padding-top:30px;} div.footer p:first-child:after{top:-10px;} --> ＿</style> </head> <body> <div class="header"> ＿<p class="bar"><img src="h2_bar01.gif" alt="" width="708" height="20"></p> ＿<p class="bar"><img width="145" height="62" src="h2_bar01_ill.gif" alt=""></p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="section"> ＿<hr> ＿<p class="bar"><img width="145" height="62" src="h2_bar01_ill.gif" alt=""></p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="footer"> ＿<p>文書情報</p> </div> </body> </html> 最後に、私が自分の作成しているページでそのようにデザインしたいときにどうするかの例を挙げておきます。HTMLがまったくプレゼンテーションと独立していること、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"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} p{text-indent:1em;line-height:1.6em;margin:0 auto;} div.header,div.section,div.footer{width:708px;margin:0 auto;border:solid gray 1px;} div.section{margin-top:10px;position:relative;} div.section:before{content:url(h2_bar01.gif);} div.section h2:after{content:url(h2_bar01_ill.gif);position:absolute;top:0;right:0;top:20px} --> ＿</style> </head> <body> <div class="header"> ＿<h1>サンプル</h1> </div> <div class="section"> ＿<h2>本文見出し</h2> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="footer"> ＿<h2>文書情報</h2> </div> </body> </html>
その他の回答 (5)
- outbrave
- ベストアンサー率60% (231/380)
まず、.pattern_box の中の横幅は 708px - (padding-right 26px + padding-left 26px) = 656px です。 なのに、その中に入れる .bar が 708px と計算が合わないです。 それで、完成形がよくわからなので画像でも添付してもらったらよかったのですが サンプルを書いてみましたので、参考ににしていただき各横幅のサイズは調整してみてください。 <!DOCTYPE html> <html lang="ja"> <head> <title></title> <style type="text/css"> .pattern_box { width:708px; border: solid 1px #ccf; } .pattern_box .bar { margin: 0 26px; border: solid 1px #fcc; } .pattern_box .px { float: right; display: inline; margin: 0px 0px 10px auto; text-align:right; border: solid 1px #cfc; } .pattern_box .inner { margin:10px 145px 0px 26px; text-align:left; font-size:12px; line-height:18px; border: solid 1px #ccc; } /* For modern browsers */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom: 1; } </style> </head> <body> <div class="pattern_box cf"> <div class="bar"> <img src="h2_bar01.gif" alt="" width="654" height="20"> </div> <div class="px"> <img width="145" height="62" src="h2_bar01_ill.gif"> </div> <div class="inner">テキストテキストテキスト</div> </div> </body> </html>
お礼
サンプルまでご用意くださいましてありがとうございます！ 実はお恥ずかしいことにclearfixがまだ理解できていなくて・・・。 本当に難しいです・・・。floatを使用すると背景が切れたりと なかなか上手くいかないです・・。 要勉強です・・！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
画像がうまくよらなかった理由ですが、 コンテナブロックの巾は、padding辺の内側までです。 width:708px; padding:0 26px; とした時点で、実寸は760pxになるはずです。 なお、気が疲れたと思いますが、デザインのためにHTMLを書いたら、後で見直すとき絶対にわからなくなります。HTMLを文書構造を記述することに徹底すると、HTMLもスタイルシートもわかりやすくなります。
お礼
もういっぱいいっぱいで・・一人では限界が来てるので こちらにお世話になっています・・・。 本当にその通りで先にデザイン優先で構造も設計も何も考えずに いきあたりばったりで書いていました・・・。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
変なクラス名をつけると後で訳がわからなくなりますよ。class名は(意味的な)文書構造を示すものにしましょう。→「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 たとえば、HTMLが次のようなものだとします。 <div class="header"> ＿<p class="bar"><img src="h2_bar01.gif" alt="" width="708" height="20"></p> ＿<p class="bar"><img width="145" height="62" src="h2_bar01_ill.gif" alt=""></p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> この部分はヘッダだよ。代替文字のない意味のない画像(alt="")があり、ついでやはり意味のない画像穂大体テキストの必要ない画像があり、本文がある。と言う意味に検索エンジンやテキストブラウザ、読み上げソフトは解釈します。 スタイルシートでプレゼンテーションを決めます。 div.header{width:708px;margin:0 auto;clear:right;margin-top:20px;} div.header p.bar{margin:0;text-indent:1em;line-height:0px;} div.header p{margin:0 0 0 10px;text-indent:1em;line-height:20px;} div.header p img{float:right;} だけでよいはず。 ただ、現在はbarのような意味のない罫線代わりの画像をHTMLに書くことはなくて、これがセクションの区切りでしたら<hr>を入れるか、そもそも何も書かずに画像を入れることが多いでしょう。そのほうがHTMLが本来の姿になりますし、HTMLも簡単になります。 三種類のHTMLとそれぞれのスタイルシートをあげておきます。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。HTML4.01strict + CSS2.1 タブは、＿に置換してあるので戻すこと。 <!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"> ＿<style type="text/css"> <!-- /* 共通 */ div.header,div.section,div.footer{width:708px;margin:0 auto;clear:right;margin-top:20px;} div.header p.bar,div.section p.bar{margin:0;text-indent:1em;line-height:0px;} div.header p,div.section p,div.footer p{margin:0 0 0 10px;text-indent:1em;line-height:20px;} div.header p img,div.section p img{float:right;} /* hr */ div.section hr{border:none;background:url(h2_bar01.gif) no-repeat 0 0;height:20px;margin:0;} /* footer */ div.footer{background:url(h2_bar01.gif) no-repeat 0 0;padding-top:20px;} div.footer p:first-child{position:relative;margin-right:145px;} div.footer p:first-child:after{content:url(h2_bar01_ill.gif);position:absolute;top:0;right:-145px;} --> ＿</style> </head> <body> <div class="header"> ＿<p class="bar"><img src="h2_bar01.gif" alt="" width="708" height="20"></p> ＿<p class="bar"><img width="145" height="62" src="h2_bar01_ill.gif" alt=""></p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="section"> ＿<hr> ＿<p class="bar"><img width="145" height="62" src="h2_bar01_ill.gif" alt=""></p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> ＿<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="footer"> ＿<p>文書情報</p> </div> </body> </html>
お礼
なるほど・・・！名前の付け方も悩みに悩んでもうわけわからなくなっていました・・・！テーブルコーディングの仕方が抜けきれずＣＳＳの良いところを活用できていませんね・・・。 すごく勉強になります・・！ありがとうございます！ じっくりと検証させていただきます！
補足
早速試してみましたが簡潔かつ分かりやすいＣＳＳになった上に表示も完璧です！ありがとうございます！ あと、もうひつとだけ質問させていただいてもよろしいでしょうか・・・？ テキストの上部＜img src="h2_bar01.gif"＞の下にスペースを空けたいのですがマージンで空けると、右に寄せた画像＜h2_bar01_ill.gif＞の上まで空いてしまいます。 ＜img src="h2_bar01.gif"＞と＜h2_bar01_ill.gif＞は上下ピッタリとくっついた状態でインラインのテキストの上側のみスペースを空けるにはどのようにしたら良いのでしょうか・・？ 初歩的な質問ばかりですみません・・・・。
- outbrave
- ベストアンサー率60% (231/380)
あっ、右側の隙間か。 それなら .pattern_box { width:708px; padding:0px 26px; text-align:right; } padding:0px 26px; この 26px 分が空いていると思います。
お礼
ありがとうございます！！そのようです！！ かなり悩みました・・・！ありがたいです～！ 26px分を左右空けようと思うと 26pxの空きを設定した大枠のブロックで囲む方法が良いのでしょうか・・ 何度も申しわけございません・・！
- outbrave
- ベストアンサー率60% (231/380)
img { vertical-align: bottom; } 上記 css を追加してみてください。
補足
ありがとうございます。 入れてみましたがだめでした・・。 Firefoxは正常に表示されるのですがＩＥがどうしてもだめです・・ 根本から作り変えるべきでしょうか・・。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ORUKA1951様のソースは簡潔でとっても分かり易いです！ 目から鱗です・・。もっと勉強してORUKA1951さんみたいな キレイなソースが書けるようになりたいです・・！ このページはなんとか理想通りの形になりそうです！ 他のページも心がけてやってみようとしているのですがなかなか・・ またこちらでお世話になると思いますのでその時はよろしくお願いいたします！