回答編集履歴

3

コード修正

2020/08/02 12:43

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -28,45 +28,47 @@
28
28
 
29
29
  <div class="container">
30
30
 
31
- <div class="product">
31
+ <div class="product">
32
32
 
33
- <img class="image1" src="http://placehold.jp/250x250.png">
33
+ <img class="image1" src="https://placehold.jp/250x250.png">
34
34
 
35
- <div class="ti">商品1</div>
35
+ <div class="ti">商品1</div>
36
36
 
37
- <div class="price">100円</div>
37
+ <div class="price">100円</div>
38
38
 
39
- </div>
39
+ </div>
40
40
 
41
- <div class="product">
41
+ <div class="product">
42
42
 
43
- <img class="image1" src="http://placehold.jp/250x250.png">
43
+ <img class="image1" src="https://placehold.jp/250x250.png">
44
44
 
45
- <div class="ti">商品2</div>
45
+ <div class="ti">商品2</div>
46
46
 
47
- <div class="price">200円</div>
47
+ <div class="price">200円</div>
48
+
49
+ </div>
50
+
51
+ <div class="product">
52
+
53
+ <img class="image1" src="https://placehold.jp/250x250.png">
54
+
55
+ <div class="ti">商品3</div>
56
+
57
+ <div class="price">300円</div>
58
+
59
+ </div>
60
+
61
+ <div class="product">
62
+
63
+ <img class="image1" src="https://placehold.jp/250x250.png">
64
+
65
+ <div class="ti">商品4</div>
66
+
67
+ <div class="price">400円</div>
68
+
69
+ </div>
48
70
 
49
71
  </div>
50
-
51
- <div class="product">
52
-
53
- <img class="image1" src="http://placehold.jp/250x250.png">
54
-
55
- <div class="ti">商品3</div>
56
-
57
- <div class="price">300円</div>
58
-
59
- </div>
60
-
61
- <div class="product">
62
-
63
- <img class="image1" src="http://placehold.jp/250x250.png">
64
-
65
- <div class="ti">商品4</div>
66
-
67
- <div class="price">400円</div>
68
-
69
- </div>
70
72
 
71
73
  ```
72
74
 
@@ -75,6 +77,8 @@
75
77
  - 商品名と価格はdivタグで囲む。
76
78
 
77
79
  - imgタグはdivタグの前に置く。
80
+
81
+ - 全体を containerクラスのdivタグで囲む。
78
82
 
79
83
 
80
84
 
@@ -106,15 +110,17 @@
106
110
 
107
111
  object-fit: cover;
108
112
 
113
+ }
114
+
115
+ .ti{
116
+
109
117
 
110
118
 
111
119
  }
112
120
 
113
- .ti{
121
+ .price{
114
122
 
115
- }
116
123
 
117
- .price{
118
124
 
119
125
  }
120
126
 

2

コード追記

2020/08/02 12:42

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -11,3 +11,113 @@
11
11
  インライン要素=改行されない要素に margin-top を設定する意味がないですよね。
12
12
 
13
13
  具体的にどのようなレイアウトにしたいのかを具体的に説明されるといいでしょう。
14
+
15
+
16
+
17
+ ---
18
+
19
+ 質問にレイアウト画像が追加されたので、それに対しての追記です。
20
+
21
+
22
+
23
+ まず、下記のようなHTMLが出力されるようにPHPを組んでください。
24
+
25
+
26
+
27
+ ```html
28
+
29
+ <div class="container">
30
+
31
+ <div class="product">
32
+
33
+ <img class="image1" src="http://placehold.jp/250x250.png">
34
+
35
+ <div class="ti">商品1</div>
36
+
37
+ <div class="price">100円</div>
38
+
39
+ </div>
40
+
41
+ <div class="product">
42
+
43
+ <img class="image1" src="http://placehold.jp/250x250.png">
44
+
45
+ <div class="ti">商品2</div>
46
+
47
+ <div class="price">200円</div>
48
+
49
+ </div>
50
+
51
+ <div class="product">
52
+
53
+ <img class="image1" src="http://placehold.jp/250x250.png">
54
+
55
+ <div class="ti">商品3</div>
56
+
57
+ <div class="price">300円</div>
58
+
59
+ </div>
60
+
61
+ <div class="product">
62
+
63
+ <img class="image1" src="http://placehold.jp/250x250.png">
64
+
65
+ <div class="ti">商品4</div>
66
+
67
+ <div class="price">400円</div>
68
+
69
+ </div>
70
+
71
+ ```
72
+
73
+ - 一つの商品を productクラスのdivタグで囲む。
74
+
75
+ - 商品名と価格はdivタグで囲む。
76
+
77
+ - imgタグはdivタグの前に置く。
78
+
79
+
80
+
81
+ CSSは下記のように設定してください。
82
+
83
+
84
+
85
+ ```css
86
+
87
+ .container {
88
+
89
+ display: flex; /* 子要素を横並びにする */
90
+
91
+ flex-wrap: wrap; /* 折り返しを許可する */
92
+
93
+ }
94
+
95
+ .product {
96
+
97
+ margin: 10px;
98
+
99
+ }
100
+
101
+ .image1{
102
+
103
+ width: 250px;
104
+
105
+ height: 250px;
106
+
107
+ object-fit: cover;
108
+
109
+
110
+
111
+ }
112
+
113
+ .ti{
114
+
115
+ }
116
+
117
+ .price{
118
+
119
+ }
120
+
121
+ ```
122
+
123
+ [Codepenサンプル](https://codepen.io/hatena19/pen/vYLowLo)

1

説明追記

2020/08/02 12:38

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -3,3 +3,11 @@
3
3
 
4
4
 
5
5
  もし、margin-top を有効にしたいなら、divタグにしてください。
6
+
7
+ ただし、divにすると改行されてしまいます。
8
+
9
+
10
+
11
+ インライン要素=改行されない要素に margin-top を設定する意味がないですよね。
12
+
13
+ 具体的にどのようなレイアウトにしたいのかを具体的に説明されるといいでしょう。