Q&A
書かれている状況が再現するコード（HTML/CSSなど）を質問文に追記されたほうが回答を得やすいと思います。
架空のブランドサイトを作成しています。
実現したいこととしましては、ABOUTの文字を画像の左側のスプーンの高さにまでABOUTの文字を下に下げたいのですが記述法が見つからず困っております。
CSSで.About h3とh3のみに終点を絞って、padding-topを指定しているのですが、なぜかABOUTの右側の写真も一緒に動いてしまいます。
どなたかが教授頂きたい所存です。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ブランドサイト</title> 6 <link href="css/style.css" rel="stylesheet"> 7 </head> 8 9 <body> 10 <header> 11 <div class=""></div> 12 <ul> 13 <li class="lo">Home</li> 14 <li class="lo">About</li> 15 <li class="lo">Product</li> 16 <li class="lo">Online Store</li> 17 <li class="lo">NEWS</li> 18 </ul> 19 </header> 20 <div class="container"> 21 <div class="main"> 22 23 </div> 24 <div class="consept"> 25 <h1>おいしさ際立てる、美しさ</h1> 26 <p>○○県○○市、この地域に構える○○店。 27 様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。 28 29 30 31 </p> 32 </div> 33 <div class="About"> 34 <h3>About</h3> 35 <p></p> 36 <img src="plate-526603_1920.jpg"> 37 </div> 38 <div class="purodakut"> 39 <h3>Product</h3> 40 <img src="niz0025-066.jpg"> 41 42 </div> 43 <div class="Online"></div> 44 <div class="news"></div> 45 <footer></footer> 46 </div> 47 </body> 48</html>
CSS
1body{ 2 margin: 0; 3 padding: 0; 4} 5 6 7ul{ 8 text-align:right; 9 padding-right:500px; 10 padding-top:20px; 11} 12 13li{ 14 display: inline; 15} 16 17.lo{ 18 padding:0px; 19 margin-right: 30px; 20} 21 22li:hover{ 23 opacity: 0.5; 24} 25 26li{cursor: pointer} 27 28.main{ 29 height: 80vh; 30 background-size:cover; 31 background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg); 32} 33 34.consept{ 35text-align: center; 36} 37 38.About{ 39 background-color:rgb(243, 240, 235); 40 41} 42 43.About h3{ 44 display: inline-block; 45 margin-top: 50px; 46} 47 48.About img{ 49 width: 50%; 50 float: right; 51} 52 53 54.purodakut{ 55text-align: center; 56} 57 58 59.purodakut p{ 60 text-align: left; 61} 62 63 64.purodaku img{ 65 float:right; 66} 67 68 69
回答2件
0
自己解決
.Aboutの部分にheightを指定したところ、背景色と画像の幅を一緒にすることができました。
投稿2021/06/11 11:07
総合スコア32
0
画像がAboutのh3タグより下に配置されているためです。
当然h3タグの上に余白を追加すれば、h3より下の要素は全て下に動くような結果になります。
どのような結果を望まれていますか？
勝手な推察ですが、Aboutの真横に画像を配置し、Aboutと画像の上部を揃えたい。
ということでしょうか？
であれば、Aboutのh3の次にある「<p></p>」を削除したうえで、下記のようなcssを追加してください。
css
1.About h3 { 2 display: inline-block; 3 margin-top: 50px; // お好みの高さに変更してください 4} 5.About img { 6 float: right; 7}
推測が誤っており、したいことと全然違う場合はスルーしてくださいね。
投稿2021/06/09 05:55
編集2021/06/09 06:35
総合スコア123
回答いただきありがとうございます。
実現したいこととしましては、ABOUTの文字を画像の左側のスプーンの高さにまでABOUTの文字を下に下げたいといった感じです。
cssを少し修正しました。
こんな感じでどうでしょうか？
お好みの編集ができるか確認お願いします。
回答いただきありがとうございます。
記述してみたのですが、画像の範囲が大きくなってしまいました。
こちらでも方法を模索中です。
file:///C:/Users/hironari/Desktop/%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89%E3%82%B5%E3%82%A4%E3%83%88/index.html
あなたのPC内のパス（URL）を記載されても、他の人には見えません。
それで見えてしまうと、他人のPCを覗き放題ということになってしまいますので
それはさておき、imgに対してwidth等のcssをつけるのではだめでしょうか？
.About img {
float: right;
width: お好みの大きさ; (〇〇px、〇%等々)
}
回答いただきありがとうございます。
返信が遅くなってしまい申し訳ございません。
widthの指定はうまくいくのですが
imgにfloat: right;を適応させた場合、画像の横にProductとkakakakakaがAboutの下に食い込んできてしまいます。
修正版のソースと画像を貼り付けていただけますか？
kakakakakaとは何ぞや・・・と思いまして
失礼いたしました。
現在のコード、画像を修正したものを上記の質問文に記載しました。
今現在このような状態になっております。
.Aboutの部分に何か足りていないものがあるのでしょうか？
.Aboutの部分にheightを指定したところ、背景色と画像の幅を一緒にすることができました。
ここまでお付き合いいただき、本当にありがとうございました。
あなたの回答
tips
プレビュー
