<div> の場所と同じように　<h2>も動かしたい。

div の場所と<h1>のタイトルは同じようにウィンドウを大きくしたり小さくしたりすると、場所を毎回変えるのですが、どうしてか、h2 のChocolate Rough だけ動きません。どうしてなのでしょうか？？あとこのページは添付してあるこのページのようにならないといけません。。

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<link rel = "stylesheet" type = "text/css" href = "receipe2_style.css">
6		<title>recipe2</title>
7	</head>
8	<body>
9		<h1>Recipe #1</h1>
10		<div>
11			<h2>Chocolate Rough</h2>
12		
13		
14	
15
16	<!-- Division The <div> tag defines a division or a section in an HTML document.
17	The <div> tag is used to group block-elements to format them with CSS.-->
18			<figure><!-- image part division -->
19				<img src = "chocRough.jpg">
20			</figure>
21
22<!-- "Base" Ingredients part division -->
23			<section>
24				<h3>Base Ingredients:</h3>
25				<ul>
26					<li>110g butter</li>
27					<li>1 cup sugar</li>
28					<li>2 tsp cocoa</li>
29					<li>2&frac12; tsp golden syrup</li>
30					<li>1 cup flour</li>
31					<li>1 tsp baking powder</li>
32					<li>&frac34; cup coconut</li>
33				</ul>
34			</section>
35
36<!-- "Icing Ingredients part" -->
37			<section id= "Icing">
38				<h3>Icing Ingredients:</h3>
39				<ul>
40					<li>1 cup icing sugar</li>
41					<li>25g melted butter</li>
42					<li>2 tsp cocoa</li>
43					<li>&frac34; tsp golden syrup</li>
44					<li>A little water to <br>combine</li>
45				</ul>
46			</section>
47			
48				<p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut. Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm.
49				</p>
50				<p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to mix to a stiff paste.
51				</p>
52			
53		</div>
54	</body>
55</html>

CSS
1
2html{
3background-color:rgb(235, 255, 249);
4}
5
6body{
7	font-family: "Arial" , Verdana, sans-serif;
8
9	color:#4ca68d;
10}
11
12/* Main heading */
13h1{
14	text-align:center;
15	font-family: "Times New", Times, serif;
16
17}
18/* Chocolate Rough*/
19h2{
20	margin:0px auto;
21	
22	position:absolute;
23	top:50px;
24	left:200px;
25	font-family: "Times New", Times, serif;
26	}
27
28h3{
29	
30	margin:0px;
31
32	font-family: "Times New", Times, serif;
33}
34/* Inside part */
35div{
36	background-color:#fff9eb;
37	margin:0px auto;
38	padding:20px 15px 20px 15px;
39	border:none;
40	width:670px;
41	height:320px;
42}
43
44
45/* chocolate image */
46figure{
47	float:left;
48	margin:0px;
49	width:223px;
50
51	
52	
53
54}
55
56figure+section{
57	border-right:1px solid;
58	
59	
60
61
62}
63
64/* Base_Ingredients */
65section{
66	width:223px;
67
68	float:left;
69}
70#Icing h3{
71	margin-left:30px;
72}
73#Icing ul{
74
75	margin-left:75px;
76}
77section ul{
78
79	margin-bottom:0px;
80	margin-top:0px;
81	margin-left:43px;
82	padding-left:0px;
83	
84
85}
86section ul li{
87	text-indent:-4px;
88}
89
90
91
92p{
93	text-align: justify;
94	text-justify:inter-word;
95	clear:left;
96	margin-top:20px;
97	margin-bottom:0px;
98	
99
100	
101}
102
103
104
105

kei344

2017/04/02 06:11

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

TomofumiKimura

2017/04/02 08:39

あ、はい。まずこの質問は解決済みにして、また別の質問を投稿したいと思います。

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

回答3件

ベストアンサー

このように行ってはいかがでしょうか。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>recipe2</title>
6    <style type="text/css">
7        html {
8            background-color: rgb(235, 255, 249);
9        }
10
11        body {
12            font-family: "Arial", Verdana, sans-serif;
13            color: #4ca68d;
14        }
15
16        /* Main heading */
17        h1 {
18            text-align: center;
19            font-family: "Times New", Times, serif;
20        }
21
22        /* Chocolate Rough*/
23        h2 {
24            margin: 0 auto;
25            position: relative; /* absoluteから変更。 */
26            top: -50px; /* 50pxから変更。 */
27            /* left: 200px; */
28            font-family: "Times New", Times, serif;
29        }
30
31        h3 {
32            margin: 0;
33            font-family: "Times New", Times, serif;
34        }
35
36        /* Inside part */
37        div {
38            background-color: #fff9eb;
39            margin: 0 auto;
40            padding: 20px 15px 20px 15px;
41            border: none;
42            width: 670px;
43            height: 320px;
44        }
45
46        /* chocolate image */
47        figure {
48            float: left;
49            margin: 0;
50            width: 223px;
51        }
52
53        figure + section {
54            border-right: 1px solid;
55        }
56
57        /* Base_Ingredients */
58        section {
59            width: 223px;
60            float: left;
61        }
62
63        #Icing h3 {
64            margin-left: 30px;
65        }
66
67        #Icing ul {
68
69            margin-left: 75px;
70        }
71
72        section ul {
73            margin-bottom: 0;
74            margin-top: 0;
75            margin-left: 43px;
76            padding-left: 0;
77
78        }
79
80        section ul li {
81            text-indent: -4px;
82        }
83
84        p {
85            text-align: justify;
86            text-justify: inter-word;
87            clear: left;
88            margin-top: 20px;
89            margin-bottom: 0;
90        }
91    </style>
92</head>
93<body>
94<h1>Recipe #1</h1>
95<div>
96    <h2>Chocolate Rough</h2>
97    <!-- Division The <div> tag defines a division or a section in an HTML document.
98    The <div> tag is used to group block-elements to format them with CSS.-->
99    <figure><!-- image part division -->
100        <img src="chocRough.jpg">
101    </figure>
102
103    <!-- "Base" Ingredients part division -->
104    <section>
105        <h3>Base Ingredients:</h3>
106        <ul>
107            <li>110g butter</li>
108            <li>1 cup sugar</li>
109            <li>2 tsp cocoa</li>
110            <li>2&frac12; tsp golden syrup</li>
111            <li>1 cup flour</li>
112            <li>1 tsp baking powder</li>
113            <li>&frac34; cup coconut</li>
114        </ul>
115    </section>
116
117    <!-- "Icing Ingredients part" -->
118    <section id="Icing">
119        <h3>Icing Ingredients:</h3>
120        <ul>
121            <li>1 cup icing sugar</li>
122            <li>25g melted butter</li>
123            <li>2 tsp cocoa</li>
124            <li>&frac34; tsp golden syrup</li>
125            <li>A little water to <br>combine</li>
126        </ul>
127    </section>
128
129    <p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut.
130        Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm.
131    </p>
132    <p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to
133        mix to a stiff paste.
134    </p>
135
136</div>
137</body>
138</html>

(追記)

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>recipe2</title>
6    <style type="text/css">
7        html {
8            background-color: rgb(235, 255, 249);
9            color: #4ca68d;
10        }
11
12        body {
13            font-family: "Arial", Verdana, sans-serif;
14        }
15
16        /* Main heading */
17        h1 {
18            text-align: center;
19            font-family: "Times New", Times, serif;
20        }
21
22        /* Chocolate Rough*/
23        h2 {
24            margin: 0 auto -50px auto;
25            position: relative; /* absoluteから変更。 */
26            top: -50px; /* 50pxから変更。 */
27            /* left: 200px; */
28            left: -15px;
29            font-family: "Times New", Times, serif;
30        }
31
32        h3 {
33            margin: 0;
34            font-family: "Times New", Times, serif;
35        }
36
37        /* Inside part */
38        div {
39            background-color: #fff9eb;
40            color: inherit;
41            margin: 0 auto;
42            padding: 20px 15px 20px 15px;
43            border: none;
44            width: 670px;
45            height: 320px;
46        }
47
48        /* chocolate image */
49        figure {
50            float: left;
51            margin: 0;
52            width: 223px;
53        }
54
55        figure + section {
56            border-right: 1px solid;
57        }
58
59        /* Base_Ingredients */
60        section {
61            width: 223px;
62            float: left;
63        }
64
65        #Icing h3 {
66            margin-left: 30px;
67        }
68
69        #Icing ul {
70            margin-left: 75px;
71        }
72
73        section ul {
74            margin-bottom: 0;
75            margin-top: 0;
76            margin-left: 43px;
77            padding-left: 0;
78        }
79
80        section ul li {
81            text-indent: -4px;
82        }
83
84        p {
85            text-align: justify;
86            text-justify: inter-word;
87            clear: left;
88            margin-top: 20px;
89            margin-bottom: 0;
90        }
91    </style>
92</head>
93<body>
94<h1>Recipe #1</h1>
95<div>
96    <h2>Chocolate Rough</h2>
97    <!-- Division The <div> tag defines a division or a section in an HTML document.
98    The <div> tag is used to group block-elements to format them with CSS.-->
99    <figure><!-- image part division -->
100        <img src="chocRough.jpg">
101    </figure>
102    <!-- "Base" Ingredients part division -->
103    <section>
104        <h3>Base Ingredients:</h3>
105        <ul>
106            <li>110g butter</li>
107            <li>1 cup sugar</li>
108            <li>2 tsp cocoa</li>
109            <li>2&frac12; tsp golden syrup</li>
110            <li>1 cup flour</li>
111            <li>1 tsp baking powder</li>
112            <li>&frac34; cup coconut</li>
113        </ul>
114    </section>
115    <!-- "Icing Ingredients part" -->
116    <section id="Icing">
117        <h3>Icing Ingredients:</h3>
118        <ul>
119            <li>1 cup icing sugar</li>
120            <li>25g melted butter</li>
121            <li>2 tsp cocoa</li>
122            <li>&frac34; tsp golden syrup</li>
123            <li>A little water to <br>combine</li>
124        </ul>
125    </section>
126    <p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut.
127        Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm.
128    </p>
129    <p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to
130        mix to a stiff paste.
131    </p>
132</div>
133</body>
134</html>

投稿2017/04/01 03:19

編集2017/04/02 09:14

s8_chu

総合スコア14731

TomofumiKimura

2017/04/01 03:50

回答ありがとうございます。すみません、大事な写真を添付するのを忘れてました。上の絵と同じにならなくてはいけないのですが、position relative にして　-50px とするとChocolate Rough が最初にあったところのスペースが確保されていて、imgの上のpadding 20px がうまくなってません。このChocolate Rough が最初にあったところのスペースをなくすにはどうしたらいいのでしょうか？？

s8_chu

2017/04/01 04:12

leftプロパティ, margin-bottomプロパティに対して負の値を指定することで解決できると思います。

TomofumiKimura

2017/04/02 03:10

なぜか負の値を指定するとCSS validator で警告が出るのですが。。。

s8_chu

2017/04/02 05:10

追記したコードで警告は発生しませんでしたが、もう一度質問者さんのコードを見返してみては？

TomofumiKimura

2017/04/02 08:38

css validator でmore option のところを開いて、Warning をAll にすると出るのですが。

s8_chu

2017/04/02 08:54

どのサイトを使っているのか教えていただけませんか？

TomofumiKimura

2017/04/02 09:01

こちらです。https://jigsaw.w3.org/css-validator/validator

s8_chu

2017/04/02 09:14

ありがとうございます。追記のコードを修正させていただきました。

TomofumiKimura

2017/04/02 09:43

すみません。説明をお願いしてもらってもいいですか？？どうして　h２のmargin 0 auto -50px auto なのでしょうか？

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

h2要素に下記指定をしているからです。position: absolute は直近の position: relative の付けられた親要素を起点とするので、提示されているものであれば body要素を起点とすると思います。

CSS
1position: absolute;
2top: 50px;
3left: 200px;

まずdiv要素から出してh1要素の次にh2要素を置き、下記のように書き換えたらよいと思います。

CSS
1h2 {
2    margin-top: -1em;
3    text-align: center;
4    font-family: "Times New", Times, serif;
5}
6```**動くサンプル：**[https://jsfiddle.net/aq7pfLnz/](https://jsfiddle.net/aq7pfLnz/)

投稿2017/04/01 03:18

kei344

総合スコア69398

TomofumiKimura

2017/04/01 03:37

すみません、先生にこのh2はdiv の中に入れろと言われました。最初は外に出していたのですが。

kei344

2017/04/01 03:43

h1要素の直下にあるh2要素を表現するのになぜdivに入れないといけないのか理解に苦しみますが、先生がおられるなら直接先生に質問するのが良いですよ。

TomofumiKimura

2017/04/01 03:47

多分ですけど、前のクラスでposition のabsolute やrelative をやったので生徒にposition absolute かrelative などを使わせたいのかもしれません。

kei344

2017/04/01 05:29

いろいろ後出しするのは人の時間を奪うだけなので、質問の際にはきちんと提示しましょう。書かれている構造なら divに relative を付けて h2の topを削除、bottomを100%にすれば上には行きます。

LibertyBell3

2017/04/01 06:10

そうですね～、後出しイクナイ。ということで、kei344さんにベストアンサー付けて終了ですね。わたくしのは、結果は同じですが、1行多い(笑)。

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

なんか、色々制約があるんですね…

以下追記でなんとかなると思います。

CSS
1h1 {
2  padding-bottom:50px;/* これはdivまでのマージンなので、h2分足さないといけないかも */
3}
4h2 {
5  left:0;
6  top:0;
7  transform:translateY(-100%);/* divを基点として左上に配置してから、h2の高さ分はみ出させる */
8}
9div {
10  position:relative;
11}