質問編集履歴
4
文の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
例のように画像とそのテキスト表示したいです。
|
|
2
2
|
ご教授宜しくお願いいたします。
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
下のpadding-bottomを 80px 0 にすると表示されますが、合っていますでしょうか。
|
|
5
|
+
他に変え方がありますでしょうか。
|
|
5
|
-
|
|
6
|
+
ご教授宜しくお願いいたします。
|
|
6
7
|
|
|
8
|
+
.work__content {
|
|
9
|
+
width: 420px;
|
|
10
|
+
padding-bottom: 80px;
|
|
11
|
+
text-align: left;
|
|
12
|
+
line-height: 1.8;
|
|
13
|
+
}
|
|
14
|
+
|
|
7
15
|
|
|
8
16
|
|
|
9
17
|
|
3
誤字修正。それに伴う画像の修正。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
例のように
|
|
1
|
+
例のように画像とそのテキスト表示したいです。
|
|
2
2
|
ご教授宜しくお願いいたします。
|
|
3
3
|
|
|
4
4
|
cssに画像一つずつをmargin-top margin-leftなどで試しましたがうまくいきませんでした。
|
|
5
5
|
cssに画像を一つずつ設定することは合っていますか？もし合っている場合はコードの書き方をご教授いただきたいです。
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
8
|
|
|
11
9
|
|
|
12
10
|
```html
|
|
@@ -97,7 +95,7 @@
|
|
|
97
95
|
}
|
|
98
96
|
|
|
99
97
|
.work__content:nth-of-type(4) {
|
|
100
|
-
|
|
98
|
+
order: 4;
|
|
101
99
|
}
|
|
102
100
|
|
|
103
101
|
|
2
画像を変えました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
|
|
11
11
|
|
|
12
12
|
```html
|
|
13
13
|
<!--work-->
|
1
指摘を確認したところ</div>が抜けていましたので追記しました。style.cssの.work__contentsがhtmlになかったので追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
例のように下の画像（マカロン）とそのテキストを右上に表示したいです。
|
|
2
2
|
ご教授宜しくお願いいたします。
|
|
3
3
|
|
|
4
|
+
cssに画像一つずつをmargin-top margin-leftなどで試しましたがうまくいきませんでした。
|
|
4
|
-
|
|
5
|
+
cssに画像を一つずつ設定することは合っていますか？もし合っている場合はコードの書き方をご教授いただきたいです。
|
|
5
6
|
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
6
10
|
|
|
7
11
|
|
|
8
12
|
```html
|
|
9
13
|
<!--work-->
|
|
10
|
-
|
|
14
|
+
<section class="work">
|
|
11
|
-
|
|
15
|
+
<div class="u-content-wrapper">
|
|
12
16
|
<h2 class="u-heading">Work</h2>
|
|
13
|
-
<p class="u-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>ウェディングやイベントの装花なども行なっています。<br>一人一人にあったご提案をさせていただきます。</p>
|
|
17
|
+
<p class="u-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>ウェディングやイベントの装花なども行なっています。<br>一人一人にあったご提案をさせていただきます。</p>
|
|
14
|
-
|
|
15
18
|
<div class="work__contents__wrapper">
|
|
19
|
+
<div class="work__contents">
|
|
16
20
|
<div class="work__content">
|
|
17
21
|
<img class="work__content__image work__image__gift" src="Web 1280 – 1/work_gift.png" alt="白い花束の写真">
|
|
18
22
|
<h3 class="work__content__heading">Gift</h3>
|
|
@@ -35,7 +39,9 @@
|
|
|
35
39
|
<p class="work__content__text">お部屋の雰囲気やライフスタイルをお聞きしてご自宅<br>用の花束をご提案し、少しでも長く咲かせるコツもお<br>教えします。花束に合った花瓶をご提案することも可<br>能です。</p>
|
|
36
40
|
</div>
|
|
37
41
|
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
38
|
-
|
|
44
|
+
</section>
|
|
39
45
|
<!--/work-->
|
|
40
46
|
```
|
|
41
47
|
|
|
@@ -43,33 +49,23 @@
|
|
|
43
49
|
/*------------------------------------------------------
|
|
44
50
|
work
|
|
45
51
|
------------------------------------------------------*/
|
|
46
|
-
h3 {
|
|
47
|
-
display: block;
|
|
48
|
-
font-size: 1.17em;
|
|
49
|
-
margin-block-start: 1em;
|
|
50
|
-
margin-block-end: 1em;
|
|
51
|
-
margin-inline-start: 0px;
|
|
52
|
-
margin-inline-end: 0px;
|
|
53
|
-
font-weight: bold;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
52
|
.work {
|
|
57
53
|
width: 100%;
|
|
58
54
|
padding-top: 80px;
|
|
59
55
|
}
|
|
60
56
|
|
|
61
|
-
.work__content__image {
|
|
62
|
-
width: 100%;
|
|
63
|
-
margin-bottom: 16px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.work__content{
|
|
57
|
+
.work__content {
|
|
67
58
|
width: 420px;
|
|
68
59
|
padding-bottom: 80px;
|
|
69
60
|
text-align: left;
|
|
70
61
|
line-height: 1.8;
|
|
71
62
|
}
|
|
72
63
|
|
|
64
|
+
.work__content__image {
|
|
65
|
+
width: 100%;
|
|
66
|
+
margin-bottom: 16px;
|
|
67
|
+
}
|
|
68
|
+
|
|
73
69
|
.work__content__text {
|
|
74
70
|
letter-spacing: 1.5px;
|
|
75
71
|
}
|
|
@@ -84,8 +80,27 @@
|
|
|
84
80
|
|
|
85
81
|
.work__content__heading {
|
|
86
82
|
font-size: 24px;
|
|
83
|
+
|
|
87
84
|
}
|
|
88
85
|
|
|
86
|
+
.work__content:nth-of-type(1) {
|
|
87
|
+
order: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.work__content:nth-of-type(2) {
|
|
91
|
+
order: 3;
|
|
92
|
+
margin-top: 120px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.work__content:nth-of-type(3) {
|
|
96
|
+
order: 2;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.work__content:nth-of-type(4) {
|
|
100
|
+
orphans: 4;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
|
|
89
104
|
/*------------------------------------------------------
|
|
90
105
|
/work
|
|
91
106
|
------------------------------------------------------*/
|