質問編集履歴

1

コードが抜けていたのでついきしました

2019/10/19 03:10

投稿

mituki
mituki

スコア8

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  以下の画像のようにアイコンとテキストをborder-boxで囲んだ箱を3つずつ横並びにして表示しているのですが、box同士が接しているため間隔を
6
6
 
7
+ 空けたいと考えています。
8
+
7
9
  ![ポートフォリオの画像](50cfc76e00602f1d384c792319271a30.png)
8
10
 
9
11
 
@@ -12,7 +14,7 @@
12
14
 
13
15
  box同士の間隔をあけるためにmarginをとったのですが、marginをとると以下の画像のように右端のboxが次の行に改行されてしまいます。
14
16
 
15
-
17
+ boxが改行されることなく、box同士の間隔を空けるにはどうしたよいでしょうか。
16
18
 
17
19
  ![ポートフォリオの画像](2ce7727aa952dd21eae1f96634f550e3.png)
18
20
 
@@ -28,9 +30,237 @@
28
30
 
29
31
 
30
32
 
33
+ HTML5
34
+
35
+ コードは以下の通りです
36
+
37
+
38
+
39
+ <!-- service -->
40
+
41
+ <div class="container-fluid " id="service">
42
+
43
+ <div class="row justify-content-center">
44
+
45
+ <div class="col-md-12">
46
+
47
+ <div class="text-center">
48
+
49
+ <h2>Services</h2>
50
+
51
+ <p>whta I can</p>
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ </div>
58
+
59
+ <div class="container">
60
+
61
+ <div class="row mt-5 text-center">
62
+
63
+ <div class="col-md-4 service">
64
+
65
+ <div class="icon">
66
+
67
+ <i class="far fa-edit"></i>
68
+
69
+ </div>
70
+
71
+ <div class="">
72
+
73
+ <h5>ランディングページ(LP)作成</h5>
74
+
75
+ <p></p>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ </div>
82
+
83
+ <div class="col-md-4 service">
84
+
85
+ <div class="icon">
86
+
87
+ <i class="fas fa-desktop"></i>
88
+
89
+ </div>
90
+
91
+ <div class="">
92
+
93
+ <h5>ブログ型ホームページの作成</h5>
94
+
95
+ <!-- <p>WordPressテーマを利用して、ホームページを作成できます。もちろんインターネットにいつでも公開できる状態で納品致します。</p> -->
96
+
97
+ </div>
98
+
99
+
100
+
101
+ </div>
102
+
103
+ <div class="col-md-4 service">
104
+
105
+ <div class="icon">
106
+
107
+ <i class="fas fa-paint-brush"></i>
108
+
109
+ </div>
110
+
111
+ <div class="">
112
+
113
+ <h5>記事執筆</h5>
114
+
115
+ <!-- <p>読者に分かりやすい文章を執筆できます。
116
+
117
+ 思わず手にとりたくなるコピーライティングも考察して、あなたの商品を紹介致します。</p> -->
118
+
119
+ </div>
120
+
121
+
122
+
123
+ </div>
124
+
125
+
126
+
127
+ </div>
128
+
129
+ <div class="row text-center">
130
+
131
+ <div class="col-md-4 service ">
132
+
133
+ <div class="icon">
134
+
135
+ <i class="fas fa-camera"></i>
136
+
137
+ </div>
138
+
139
+ <div class="">
140
+
141
+ <h5>動画編集</h5>
142
+
143
+ <!-- <p>YouTubeアップロードを視野に入れた動画編集が可能です。テロップ・効果音・BGM挿入もお任せください.</p> -->
144
+
145
+ <p></p>
146
+
147
+ </div>
148
+
149
+
150
+
151
+ </div>
152
+
153
+ <div class="col-md-4 service">
154
+
155
+ <div class="icon">
156
+
157
+ <i class="fas fa-user-alt"></i>
158
+
159
+ </div>
160
+
161
+ <div class="">
162
+
163
+ <h5>サポート</h5>
164
+
165
+ <!-- <p>納品後の修正は10回まで無料です。テキストが必要になった際の文章作成もサポート致します。</p> -->
166
+
167
+ <p></p>
168
+
169
+ </div>
170
+
171
+
172
+
173
+ </div>
174
+
175
+ <div class="col-md-4 service">
176
+
177
+ <div class="icon">
178
+
179
+ <i class="fas fa-print"></i>
180
+
181
+ </div>
182
+
183
+ <div class="">
184
+
185
+ <h5>SEO 対策</h5>
186
+
187
+ <!-- <p>WordPressでのホームページ作成、記事執筆はもちろんSEO対策をします。検索上位を狙い、集客率をアップさせましょう。</p> -->
188
+
189
+ </div>
190
+
191
+
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+
200
+
201
+ </div>
202
+
203
+
204
+
205
+ css3
206
+
207
+ .container-fluid{
208
+
31
- ```ここに言語名を入力
209
+ width: 100%;
210
+
32
-
211
+ box-sizing: border-box;
212
+
213
+
214
+
215
+ }
216
+
217
+
218
+
33
- ソースコード
219
+ .row{
220
+
221
+ width: 100%;
222
+
223
+ box-sizing: border-box;
224
+
225
+
226
+
227
+ }
228
+
229
+
230
+
231
+ .service{
232
+
233
+ border:1px solid silver ;
234
+
235
+ margin-bottom:30px;
236
+
237
+ /* margin-right:5px ; */
238
+
239
+ /* justify-content:space-around; */
240
+
241
+
242
+
243
+
244
+
245
+ position: relative;
246
+
247
+ width: 100%;
248
+
249
+ /* min-height: 1px; */
250
+
251
+ padding-right: 15px;
252
+
253
+ padding-left: 15px;
254
+
255
+ }
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+
34
264
 
35
265
  ``````ここに言語を入力
36
266
 
@@ -42,14 +272,14 @@
42
272
 
43
273
  ### 試したこと
44
274
 
45
-
46
-
47
- ここに問題に対し試しを記載してください。
275
+ 同じようなレイアウトのサイトのソースコードをみたのですが、border-sizing:border-box;が使用されり、withd:100%;指定されており、マネしてみたのですがうまくいきませんでした
48
276
 
49
277
 
50
278
 
51
279
  ### 補足情報(FW/ツールのバージョンなど)
52
280
 
53
-
281
+ 使用OS:windows10
282
+
283
+ エディタ:VS code
54
284
 
55
285
  ここにより詳細な情報を記載してください。