webサイトの文字だけを位置調整させたい

架空のブランドサイトを作成しています。

実現したいこととしましては、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

kei344

2021/06/09 05:09

書かれている状況が再現するコード（HTML/CSSなど）を質問文に追記されたほうが回答を得やすいと思います。

K_3578

2021/06/09 05:10

貴方がどういう状況なのかこちらからは一切確認出来ないので、状況が再現するコードを提示してください。

HdNu

2021/06/09 05:33

すっかり忘れておりました。ご指摘いただき感謝いたします。

行動規範の内容に同意します

回答2件

自己解決

.Aboutの部分にheightを指定したところ、背景色と画像の幅を一緒にすることができました。

投稿2021/06/11 11:07

HdNu

総合スコア32

画像が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

hiro_app

総合スコア123

HdNu

2021/06/09 06:29

回答いただきありがとうございます。実現したいこととしましては、ABOUTの文字を画像の左側のスプーンの高さにまでABOUTの文字を下に下げたいといった感じです。

hiro_app

2021/06/09 06:36

cssを少し修正しました。こんな感じでどうでしょうか？お好みの編集ができるか確認お願いします。

HdNu

2021/06/09 07:35

回答いただきありがとうございます。記述してみたのですが、画像の範囲が大きくなってしまいました。こちらでも方法を模索中です。 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

hiro_app

2021/06/09 08:15 編集

あなたのPC内のパス（URL）を記載されても、他の人には見えません。それで見えてしまうと、他人のPCを覗き放題ということになってしまいますのでそれはさておき、imgに対してwidth等のcssをつけるのではだめでしょうか？ .About img { float: right; width: お好みの大きさ; (〇〇px、〇%等々) }

HdNu

2021/06/11 10:34

回答いただきありがとうございます。返信が遅くなってしまい申し訳ございません。 widthの指定はうまくいくのですが imgにfloat: right;を適応させた場合、画像の横にProductとkakakakakaがAboutの下に食い込んできてしまいます。

hiro_app

2021/06/11 10:38 編集

修正版のソースと画像を貼り付けていただけますか？ kakakakakaとは何ぞや・・・と思いまして

HdNu

2021/06/11 10:49

失礼いたしました。現在のコード、画像を修正したものを上記の質問文に記載しました。今現在このような状態になっております。 .Aboutの部分に何か足りていないものがあるのでしょうか？

HdNu

2021/06/11 11:06

.Aboutの部分にheightを指定したところ、背景色と画像の幅を一緒にすることができました。ここまでお付き合いいただき、本当にありがとうございました。