teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

tsuiki

2019/11/04 05:14

投稿

kyoya0819
kyoya0819

スコア10434

answer CHANGED
@@ -1,36 +1,23 @@
1
1
  ```HTML
2
-
3
- <div class="tata">
2
+ <div class="tata"><div>
4
- <div>
5
- サンプルA
6
- <span>100人</span>
3
+ サンプルA<span>100人</span>
4
+ </div><div>
5
+ サンプルA<span>100人</span>
6
+ </div><div>
7
+ サンプルA<span>100人</span>
8
+ </div><div>
9
+ サンプルA<span>100人</span>
10
+ </div><div>
11
+ サンプルA<span>100人</span>
12
+ </div><div>
13
+ サンプルA<span>100人</span>
7
14
  </div>
8
- <div>
9
- サンプルA
10
- <span>100人</span>
11
- </div>
12
- <div>
13
- サンプルA
14
- <span>100人</span>
15
- </div>
16
- <div>
17
- サンプルA
18
- <span>100人</span>
19
- </div>
20
- <div>
21
- サンプルA
22
- <span>100人</span>
23
- </div>
24
- <div>
25
- サンプルA
26
- <span>100人</span>
27
- </div>
28
15
  </div>
29
-
30
16
  ```
31
17
  ```CSS
32
- .tata {
18
+ * {
33
- text-align: center
19
+ margin: 0;
20
+ padding: 0
34
21
  }
35
22
  .tata div {
36
23
  width: 30vw;
@@ -39,9 +26,10 @@
39
26
  font-weight: 900;
40
27
  border: 1px solid #ccd0d6;
41
28
  border-radius: 15px 15px 15px 15px;
42
- margin: 5px;
29
+ margin-left: 2.5vw;
43
30
  text-align: center;
44
- padding: 10px
31
+ padding: 10px;
32
+ box-sizing: border-box
45
33
  }
46
34
  .tata div span{
47
35
  display: block;

2

追記

2019/11/04 05:14

投稿

kyoya0819
kyoya0819

スコア10434

answer CHANGED
@@ -48,4 +48,4 @@
48
48
  font-size:150%
49
49
  }
50
50
  ```
51
- [サンプル](https://codepen.io/asuchi0819/pen/ZEErQNx.css?editors=1100#0)
51
+ [サンプル](https://codepen.io/asuchi0819/pen/ZEErQNx?editors=1100#0)

1

追記

2019/11/04 05:06

投稿

kyoya0819
kyoya0819

スコア10434

answer CHANGED
@@ -1,47 +1,51 @@
1
1
  ```HTML
2
2
 
3
- <div class="row">
3
+ <div class="tata">
4
- <div class="col-sm-4">
4
+ <div>
5
- <div class="mainbox">サンプルA
5
+ サンプルA
6
- <span>100人</span>
6
+ <span>100人</span>
7
- </div>
8
- <div class="mainbox">サンプルA
9
- <span>100人</span>
10
- </div>
11
- <div class="mainbox">サンプルA
12
- <span>100人</span>
13
- </div>
14
7
  </div>
15
- </div>
8
+ <div>
16
- <div class="row">
17
- <div class="col-sm-4">
18
- <div class="mainbox">サンプルA
9
+ サンプルA
19
- <span>100人</span>
10
+ <span>100人</span>
20
- </div>
21
- <div class="mainbox">サンプルA
22
- <span>100人</span>
23
- </div>
24
- <div class="mainbox">サンプルA
25
- <span>100人</span>
26
- </div>
27
11
  </div>
12
+ <div>
13
+ サンプルA
14
+ <span>100人</span>
15
+ </div>
16
+ <div>
17
+ サンプルA
18
+ <span>100人</span>
19
+ </div>
20
+ <div>
21
+ サンプルA
22
+ <span>100人</span>
23
+ </div>
24
+ <div>
25
+ サンプルA
26
+ <span>100人</span>
27
+ </div>
28
28
  </div>
29
29
 
30
30
  ```
31
31
  ```CSS
32
-
32
+ .tata {
33
+ text-align: center
34
+ }
33
- .mainbox {
35
+ .tata div {
36
+ width: 30vw;
37
+ display: inline-block;
34
- font-size: 80%;
38
+ font-size: 70%;
35
39
  font-weight: 900;
36
40
  border: 1px solid #ccd0d6;
37
41
  border-radius: 15px 15px 15px 15px;
38
42
  margin: 5px;
39
43
  text-align: center;
44
+ padding: 10px
40
45
  }
41
- .mainbox span{
46
+ .tata div span{
42
47
  display: block;
43
- font-size:120%
48
+ font-size:150%
44
49
  }
45
-
46
50
  ```
47
51
  [サンプル](https://codepen.io/asuchi0819/pen/ZEErQNx.css?editors=1100#0)