アプリ版：「スタンプのみでお礼する」機能のリリースについて

（ＣＳＳ）画像が完全に右端に寄りません・・・

解決済

  • 質問者：cocoaki
  • 質問日時：
  • 回答数：6件

ＣＳＳ勉強中でソースの不備が多々あると思いますがどうかみていただけますでしょうか・・。
<div class="bar">の画像の一番端の右下に<p class="px">の画像を隙間無く持ってきたいのですがどうしても<p class="px">の右側が空いてしまいます・・。対処方法がございますでしょうか。
根本からソースが違うかもしれません・・何卒お願いいたします！

.pattern_box {
width:708px;
padding:0px 26px;
text-align:right;
}
.pattern_box .bar {
width:708px;
margin:0px;
}
.pattern_box .px {
float: right;
display: inline;
margin: 0px 0px 10px auto;
text-align:right;

}
.pattern_box .inner {
margin:10px 0px 0px 0px;
text-align:left;
font-size:12px;
line-height:18px;
}
★ＨＴＭＬ

<div class="pattern_box">
<div class="bar">
<img src="h2_bar01.gif" alt="" width="708" height="20">
</div>
<p class="px"><img width="145" height="62" src="h2_bar01_ill.gif"></p>
<div class="inner">テキストテキストテキスト</div>
</div><!--pattern_box-->

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞インラインのテキストの上側のみスペースを空けるにはどのようにしたら良いのでしょうか・・？


　そんな時使うのが、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951様のソースは簡潔でとっても分かり易いです！
目から鱗です・・。もっと勉強してORUKA1951さんみたいな
キレイなソースが書けるようになりたいです・・！
このページはなんとか理想通りの形になりそうです！
他のページも心がけてやってみようとしているのですがなかなか・・
またこちらでお世話になると思いますのでその時はよろしくお願いいたします！

通報する
お礼日時：2012/04/27 11:36

No.5

  • 回答者： outbrave
  • 回答日時：

まず、.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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

サンプルまでご用意くださいましてありがとうございます！
実はお恥ずかしいことにclearfixがまだ理解できていなくて・・・。
本当に難しいです・・・。floatを使用すると背景が切れたりと
なかなか上手くいかないです・・。
要勉強です・・！

通報する
お礼日時：2012/04/26 11:58

No.4

  • 回答者： ORUKA1951
  • 回答日時：

画像がうまくよらなかった理由ですが、


コンテナブロックの巾は、padding辺の内側までです。
width:708px;
padding:0 26px;
とした時点で、実寸は760pxになるはずです。

なお、気が疲れたと思いますが、デザインのためにHTMLを書いたら、後で見直すとき絶対にわからなくなります。HTMLを文書構造を記述することに徹底すると、HTMLもスタイルシートもわかりやすくなります。


　
    • good
    • 0
    • 件
通報する
この回答へのお礼

もういっぱいいっぱいで・・一人では限界が来てるので
こちらにお世話になっています・・・。

本当にその通りで先にデザイン優先で構造も設計も何も考えずに
いきあたりばったりで書いていました・・・。

通報する
お礼日時：2012/04/26 09:17

No.3

  • 回答者： ORUKA1951
  • 回答日時：

変なクラス名をつけると後で訳がわからなくなりますよ。

class名は(意味的な)文書構造を示すものにしましょう。→「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

たとえば、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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み。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＞は上下ピッタリとくっついた状態でインラインのテキストの上側のみスペースを空けるにはどのようにしたら良いのでしょうか・・？
初歩的な質問ばかりですみません・・・・。

補足日時：2012/04/26 11:54
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど・・・！名前の付け方も悩みに悩んでもうわけわからなくなっていました・・・！テーブルコーディングの仕方が抜けきれずＣＳＳの良いところを活用できていませんね・・・。
すごく勉強になります・・！ありがとうございます！
じっくりと検証させていただきます！

通報する
お礼日時：2012/04/26 09:17

No.2

  • 回答者： outbrave
  • 回答日時：

あっ、右側の隙間か。



それなら
.pattern_box {
width:708px;
padding:0px 26px;
text-align:right;
}

padding:0px 26px; この 26px 分が空いていると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！そのようです！！
かなり悩みました・・・！ありがたいです～！

26px分を左右空けようと思うと
26pxの空きを設定した大枠のブロックで囲む方法が良いのでしょうか・・
何度も申しわけございません・・！

通報する
お礼日時：2012/04/25 13:59

No.1

  • 回答者： outbrave
  • 回答日時：

img {


vertical-align: bottom;
}

上記 css を追加してみてください。

この回答への補足

ありがとうございます。
入れてみましたがだめでした・・。
Firefoxは正常に表示されるのですがＩＥがどうしてもだめです・・
根本から作り変えるべきでしょうか・・。

補足日時：2012/04/25 13:42
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報