質問編集履歴

5

fdさ

2019/11/04 05:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,13 @@
1
+ #追記
2
+
3
+ ![イメージ説明](cef88ea34bf20c8e450bbd5691f971de.png)
4
+
5
+ 現在のイメージです。atsuchiさんへ
6
+
7
+
8
+
9
+
10
+
1
11
  お世話になります。箱の中の2行の文字の大きさについてCSSの質問となります。
2
12
 
3
13
 

4

asu

2019/11/04 05:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -36,29 +36,75 @@
36
36
 
37
37
  ```ここに言語を入力
38
38
 
39
- <div class="row">
39
+ <div class="row">
40
40
 
41
- <div class="col-sm-4">
41
+ <div class="col-sm-4">
42
42
 
43
- <div class="mainbox">サンプルA<br>100人</div></div>
43
+ <div class="mainbox">サンプルA
44
44
 
45
- <div class="mainbox">サンプルA100人</div></div>
45
+ <span>100人</span>
46
46
 
47
- <div class="mainbox">サンプルA100人</div></div>
47
+ </div>
48
48
 
49
- </div>
49
+ </div>
50
+
51
+ <div class="col-sm-4">
52
+
53
+ <div class="mainbox">サンプルA
54
+
55
+ <span>100人</span>
56
+
57
+ </div>
58
+
59
+ </div>
60
+
61
+ <div class="col-sm-4">
62
+
63
+ <div class="mainbox">サンプルA
64
+
65
+ <span>100人</span>
66
+
67
+ </div>
68
+
69
+ </div>
70
+
71
+ </div>
50
72
 
51
73
 
52
74
 
53
- <div class="row">
75
+ <div class="row">
54
76
 
55
- <div class="mainbox">サンプルA100人</div></div>
77
+ <div class="col-sm-4">
56
78
 
57
- <div class="mainbox">サンプルA100人</div></div>
79
+ <div class="mainbox">サンプルA
58
80
 
59
- <div class="mainbox">サンプルA100人</div></div>
81
+ <span>100人</span>
60
82
 
61
- </div>
83
+ </div>
84
+
85
+ </div>
86
+
87
+ <div class="col-sm-4">
88
+
89
+ <div class="mainbox">サンプルA
90
+
91
+ <span>100人</span>
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ <div class="col-sm-4">
98
+
99
+ <div class="mainbox">サンプルA
100
+
101
+ <span>100人</span>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ </div>
62
108
 
63
109
  ```
64
110
 
@@ -72,11 +118,9 @@
72
118
 
73
119
  .mainbox {
74
120
 
75
- font-size: 80%;
121
+ font-size: 70%;
76
122
 
77
123
  font-weight: 900;
78
-
79
- height: 80px;
80
124
 
81
125
  border: 1px solid #ccd0d6;
82
126
 
@@ -86,7 +130,15 @@
86
130
 
87
131
  text-align: center;
88
132
 
133
+ padding: 10px
134
+
135
+ }
136
+
137
+ .mainbox span{
138
+
139
+ display: block;
140
+
89
- line-height: 75px;
141
+ font-size:150%
90
142
 
91
143
  }
92
144
 
@@ -94,27 +146,29 @@
94
146
 
95
147
 
96
148
 
149
+ #現状の写真
150
+
97
- 現状は以下のように100人が line-height: 75px;分だけしたに100人が行き過ぎてずれてしまい100人を上部に設定できず困っています。
151
+ 現状は以下のようにっています。PC表示
98
152
 
99
153
 
100
154
 
101
- ![イメージ説明](90a373395202cd210cb1460c7d6659ee.png)
155
+ ![イメージ説明](31ae33c23656b45475f19ca0c0c48e27.png)
102
156
 
103
157
 
104
158
 
105
- 左上四角の中だけをテストしていすので左上の状態だけチェックて頂ければいます.一応全体構成としては以下になっています。
159
+ 回答者様おかげでPC表示は要件通りに設定できました(ありがうございます!)
106
160
 
161
+ しかし現状スマホなどのレスポンシブデザインにした時に以下のようになってしまいます。
162
+
107
- ![イメージ説明](144ed5d9e021041a59ec2bde3f9b16e6.png)
163
+ ![イメージ説明](4b37b6c51d18cd0f4ab43ade2823a719.png)
164
+
165
+
166
+
167
+ 縦ではなく、1行3つ箱があるのように以下のように設定したいです。
108
168
 
109
169
 
110
170
 
111
171
  #レスポンシブデザイン
112
-
113
-
114
-
115
- またスマホなどレスポンシブデザインにした時に以下のようになってしまいます。
116
-
117
- ![イメージ説明](4b37b6c51d18cd0f4ab43ade2823a719.png)
118
172
 
119
173
 
120
174
 

3

2019/11/04 05:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -108,4 +108,20 @@
108
108
 
109
109
 
110
110
 
111
+ #レスポンシブデザイン
112
+
113
+
114
+
115
+ またスマホなどレスポンシブデザインにした時に以下のようになってしまいます。
116
+
117
+ ![イメージ説明](4b37b6c51d18cd0f4ab43ade2823a719.png)
118
+
119
+
120
+
121
+ スマホの時でも以下のような表示にしたいです。
122
+
123
+ ![イメージ説明](d16837b60e19c6e5fc7690caa0278abc.png)
124
+
125
+
126
+
111
127
  宜しくお願いします。

2

2019/11/04 04:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
 
96
96
 
97
- 現状では以下のように100人が line-height: 75px;分だけしたに行き過ぎてしまいずれてしまいます。
97
+ 現状では以下のように100人が line-height: 75px;分だけしたに100人が行き過ぎてずれてしまい100人を上部に設定できず困っています。
98
98
 
99
99
 
100
100
 
@@ -102,7 +102,7 @@
102
102
 
103
103
 
104
104
 
105
- 左上の四角の中だけをテストしていますので左上の状態だけチェックして頂ければと思います全体としては以下になっています。
105
+ 左上の四角の中だけをテストしていますので左上の状態だけチェックして頂ければと思います.一応全体構成としては以下になっています。
106
106
 
107
107
  ![イメージ説明](144ed5d9e021041a59ec2bde3f9b16e6.png)
108
108
 

1

22

2019/11/04 04:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- お世話になります。
1
+ お世話になります。箱の中の2行の文字の大きさについてCSSの質問となります。
2
2
 
3
3
 
4
4
 
@@ -99,3 +99,13 @@
99
99
 
100
100
 
101
101
  ![イメージ説明](90a373395202cd210cb1460c7d6659ee.png)
102
+
103
+
104
+
105
+ 左上の四角の中だけをテストしていますので左上の状態だけチェックして頂ければと思いますが全体としては以下になっています。
106
+
107
+ ![イメージ説明](144ed5d9e021041a59ec2bde3f9b16e6.png)
108
+
109
+
110
+
111
+ 宜しくお願いします。