質問編集履歴

4

文の修正

2019/05/14 09:23

投稿

risacuspin
risacuspin

スコア18

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,25 @@
4
4
 
5
5
 
6
6
 
7
- cssに画像一つずつをmargin-top margin-leftなどで試ししたうまくせんでし
7
+ 下のpadding-bottomを 80px 0 にすると表示され、合っていまでしょうか
8
+
8
-
9
+ 他に変え方がありますでしょうか。
10
+
9
- cssに画像を一つずつ設定することは合っていますか?もし合っている場合はコードの書き方をご教授いただきたいです。
11
+ ご教授宜しくお願します。
12
+
13
+
14
+
15
+ .work__content {
16
+
17
+ width: 420px;
18
+
19
+ padding-bottom: 80px;
20
+
21
+ text-align: left;
22
+
23
+ line-height: 1.8;
24
+
25
+ }
10
26
 
11
27
 
12
28
 

3

誤字修正。それに伴う画像の修正。

2019/05/14 09:23

投稿

risacuspin
risacuspin

スコア18

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 例のように下の画像(マカロン)とそのテキストを右上に表示したいです。
1
+ 例のように画像とそのテキスト表示したいです。
2
2
 
3
3
  ご教授宜しくお願いいたします。
4
4
 
@@ -10,11 +10,7 @@
10
10
 
11
11
 
12
12
 
13
-
14
-
15
- ![画像の配置がずれている](46fcd496594a88288f7625c030294ed5.png)
13
+ ![修正したい画像](cba0a90a9321687f20e8ee80fd737803.png)
16
-
17
-
18
14
 
19
15
  ![例](c58b106f34c043fd0ce01691b4cbd33d.png)
20
16
 
@@ -196,7 +192,7 @@
196
192
 
197
193
  .work__content:nth-of-type(4) {
198
194
 
199
- orphans: 4;
195
+ order: 4;
200
196
 
201
197
  }
202
198
 

2

画像を変えました

2019/05/14 09:13

投稿

risacuspin
risacuspin

スコア18

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- ![例](d272f847dca4cf0c70e7525723ea6c39.png)
19
+ ![例](c58b106f34c043fd0ce01691b4cbd33d.png)
20
20
 
21
21
 
22
22
 

1

指摘を確認したところ</div>が抜けていましたので追記しました。style.cssの.work__contentsがhtmlになかったので追記しました。

2019/05/14 08:59

投稿

risacuspin
risacuspin

スコア18

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,15 @@
4
4
 
5
5
 
6
6
 
7
+ cssに画像一つずつをmargin-top margin-leftなどで試しましたがうまくいきませんでした。
8
+
9
+ cssに画像を一つずつ設定することは合っていますか?もし合っている場合はコードの書き方をご教授いただきたいです。
10
+
11
+
12
+
13
+
14
+
7
- ![2枚目のマカロンの画像を右上に移動させたい](cf017fc382f4a687601fb71e6314fc1b.png)
15
+ ![画像の配置がずれて](46fcd496594a88288f7625c030294ed5.png)
8
16
 
9
17
 
10
18
 
@@ -16,18 +24,18 @@
16
24
 
17
25
  <!--work-->
18
26
 
19
- <section class="work">
27
+ <section class="work">
20
-
28
+
21
- <div class="u-content-wrapper">
29
+ <div class="u-content-wrapper">
22
30
 
23
31
  <h2 class="u-heading">Work</h2>
24
32
 
25
- <p class="u-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>ウェディングやイベントの装花なども行なっています。<br>一人一人にあったご提案をさせていただきます。</p>
33
+ <p class="u-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>ウェディングやイベントの装花なども行なっています。<br>一人一人にあったご提案をさせていただきます。</p>
26
-
27
-
28
34
 
29
35
  <div class="work__contents__wrapper">
30
36
 
37
+ <div class="work__contents">
38
+
31
39
  <div class="work__content">
32
40
 
33
41
  <img class="work__content__image work__image__gift" src="Web 1280 – 1/work_gift.png" alt="白い花束の写真">
@@ -72,7 +80,11 @@
72
80
 
73
81
  </div>
74
82
 
83
+ </div>
84
+
85
+ </div>
86
+
75
- </section>
87
+ </section>
76
88
 
77
89
  <!--/work-->
78
90
 
@@ -88,26 +100,6 @@
88
100
 
89
101
  ------------------------------------------------------*/
90
102
 
91
- h3 {
92
-
93
- display: block;
94
-
95
- font-size: 1.17em;
96
-
97
- margin-block-start: 1em;
98
-
99
- margin-block-end: 1em;
100
-
101
- margin-inline-start: 0px;
102
-
103
- margin-inline-end: 0px;
104
-
105
- font-weight: bold;
106
-
107
- }
108
-
109
-
110
-
111
103
  .work {
112
104
 
113
105
  width: 100%;
@@ -118,6 +110,20 @@
118
110
 
119
111
 
120
112
 
113
+ .work__content {
114
+
115
+ width: 420px;
116
+
117
+ padding-bottom: 80px;
118
+
119
+ text-align: left;
120
+
121
+ line-height: 1.8;
122
+
123
+ }
124
+
125
+
126
+
121
127
  .work__content__image {
122
128
 
123
129
  width: 100%;
@@ -128,20 +134,6 @@
128
134
 
129
135
 
130
136
 
131
- .work__content{
132
-
133
- width: 420px;
134
-
135
- padding-bottom: 80px;
136
-
137
- text-align: left;
138
-
139
- line-height: 1.8;
140
-
141
- }
142
-
143
-
144
-
145
137
  .work__content__text {
146
138
 
147
139
  letter-spacing: 1.5px;
@@ -170,7 +162,45 @@
170
162
 
171
163
  font-size: 24px;
172
164
 
165
+
166
+
173
- }
167
+ }
168
+
169
+
170
+
171
+ .work__content:nth-of-type(1) {
172
+
173
+ order: 1;
174
+
175
+ }
176
+
177
+
178
+
179
+ .work__content:nth-of-type(2) {
180
+
181
+ order: 3;
182
+
183
+ margin-top: 120px;
184
+
185
+ }
186
+
187
+
188
+
189
+ .work__content:nth-of-type(3) {
190
+
191
+ order: 2;
192
+
193
+ }
194
+
195
+
196
+
197
+ .work__content:nth-of-type(4) {
198
+
199
+ orphans: 4;
200
+
201
+ }
202
+
203
+
174
204
 
175
205
 
176
206