htmlのcssがうまくできません。

Question

お世話になっております。
リスティング広告の効果をはかりやすくするため、
自社サイトにリスティング広告と飛ばすことになりました。

それにともない、自社サイトにページを新たに作ることになったのですが、
うまくページを作れなく、ご助言いただけますでしょうか。

ページはこちらです。
https://www.rakuten.ne.jp/gold//tmp/

うまくいかないところは以下です。
1.一部テキストがずれる
　　たとえば、冒頭の吹き出し部分のテキストがずれます。
2.途中の濃い緑部分がうまく合わせられません
　　寄せる力を・・・という少し濃い緑部分を、背景画像で合わせたいと思っているのですが、
　　うまく合いません。
3.背景色の両サイドが白い
　　余白部分もあるのだろうと思いますが、両サイドも同じ背景色にしたいと思っています。
4.背景色を途中で止めたい
　　自宅でプロの・・の部分から画像の背景が白くなるので、背景色も白(何も無し)にしたいのですが、
　　うまくできません。

お忙しいところ申し訳ございませんが、よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

＞1.両端の濃い緑の下の部分が途中で切れているので、中央部分の画像の高さとそろえたい

#atlesscare_p3 div.intro p.last の規則に書き加えていただいた高さの指定が、
hight: 200px;
と記載されておりましたので、正しい記述である
height: 200px;
に修正していただき、ご希望どおりの見た目かどうかご確認をお願いします。

＞2.両端の濃い緑をwindow幅いっぱいに横に伸ばしたい

ご説明の前に、このページの構造について解説いたしますと、
「寄せる力を〜」の部分は、〜の中に含まれており、
その中で、同の左上端からの距離によって配置されております。

今回、吹き出しのズレを防ぐために、
〜の横幅をコンテンツに合わせてご設定いただいたのですが、
そのため、同の中にある要素は、
原則としてタグの幅を超えることができなくなります。

「寄せる力を〜」の部分を画面いっぱいに拡げる場合は、
〜のすぐ下に移動していただきますようお願いします。

スタイルシートの指定方法も変わりますので、
#atlesscare_p3 div.intro p.last
を
#atlesscare_p3 div.intro + p.last 
にご変更いただき、ご希望どおりの見た目になるかどうかご確認をお願いします。

Answer

ECマスターズの田辺です。

＞1.一部テキストがずれる

こちらのずれを修正するためにCSSで横幅を調整していただきたいので、
atlesscare_p3.cssにある

.intro
.feature01
.feature02_1
.feature02_2

に対して、widthをコンテンツの横幅に合わせて
それぞれ設定していただけますでしょうか。
width の他に margin: 0 auto; のご記入もお願いいたします。

記述を全てpositionをつかって位置を決めていただいているようですが
こちらの組み方ですとkbtkさんのPCで見たときと他のブラウザで見たときに
見え方が変わる可能性がございますので、
可能な限り様々な環境（Windows・Mac、Edge・IE・Chrome・Firefox・Safariなど）で
見た目をチェックしていただきますようお願いします。


＞2.途中の濃い緑部分がうまく合わせられません

背景が重ねて設定されておりましたので、

atlesscare_p3.cssの102行目にある
#atlesscare_p3 div.intro p.lastに設定している
background-image:url(images/○○.jpg);

を削除していただきますようお願いいたします。


＞3.背景色の両サイドが白い

何も設定をしないとbodyの周りに余白ができてしまいますので、

atlesscare_p3.cssに

body {
	margin:0;
}

をご記入いただけますと余白はなくなります。


＞4.背景色を途中で止めたい

背景色を白にしたい部分全体を
とで囲み、

atlesscare_p3.cssへ新たな記述
#backwhite{
background-color: #FFF;
}

をご記入くださいませ。

Answer

田辺様

早々にご回答いただきありがとうございました。
cssの知識が甘く、基本的な内容もあり、大変失礼いたしました。

＞2.途中の濃い緑部分がうまく合わせられません
についてですが、私の説明が不足しており申し訳ございません。
この部分は濃い緑部分をそのまま両サイドに伸ばしたいと思っており、
cssに

atlesscare_p3.cssの102行目にある
#atlesscare_p3 div.intro p.lastに設定している
background-image:url(images/○○.jpg);

を入れております。
現在は、102行目の画像の幅が実際よりも小さく、ずれています。
元々ある背景画像とつながるように、上記102行目（現在は110行目）の画像を
つなげるようにするにはどうすればよいでしょうか。

説明も分かりにくく大変申し訳ございませんが、よろしくお願いいたします。

Answer

ECマスターズの田辺です。

その場合には、
atlesscare_p3.cssの102行目にある
#atlesscare_p3 div.intro p.lastに新たな記述が必要ですので

height: 200px;
padding-top: 40px;

を書き加え、

top: 860px
から
top: 820px;

にご変更くださいませ。

Answer

田辺様

お世話になっております。
ご回答いただきありがとうございます。

こちらの説明が不足しており申し訳ございませんが、
1.両端の濃い緑の下の部分が途中で切れているので、中央部分の画像の高さとそろえたい
2.両端の濃い緑をwindow幅いっぱいに横に伸ばしたい
と思っております。

何度も申し訳ございませんが、ご回答よろしくお願いいたします。

Answer

田辺様

お世話になっております。

できました！
ご回答ありがとうございます。

単純なスペルミスまで、大変失礼いたしました。

今後とも、どうぞ、よろしくお願いいたします。