質問編集履歴
3
今の私の手元のコードが「今やってみたこと」から下です。更新しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,10 +48,49 @@
|
|
|
48
48
|
</div>
|
|
49
49
|
```
|
|
50
50
|
```CSS
|
|
51
|
+
|
|
51
|
-
.
|
|
52
|
+
.box {
|
|
53
|
+
font-family: "Sawarabi Gothic", "Yu Gothic Medium";
|
|
54
|
+
border: solid 10px #FFF;
|
|
52
|
-
|
|
55
|
+
border-radius: 10px;
|
|
53
|
-
justify-content: center;
|
|
54
56
|
}
|
|
57
|
+
|
|
58
|
+
@media (max-width: 667px) {
|
|
59
|
+
.box {
|
|
60
|
+
max-width: 335px;
|
|
61
|
+
border: solid 5px #FFF;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.box .num {
|
|
66
|
+
font-size: 160px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media (max-width: 667px) {
|
|
70
|
+
.box .num {
|
|
71
|
+
font-size: 80px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.box .point {
|
|
76
|
+
font-size: 100px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@media (max-width: 667px) {
|
|
80
|
+
.box .point {
|
|
81
|
+
font-size: 50px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.points {
|
|
86
|
+
display: -webkit-box;
|
|
87
|
+
display: -ms-flexbox;
|
|
88
|
+
display: flex;
|
|
89
|
+
-webkit-box-pack: center;
|
|
90
|
+
-ms-flex-pack: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
}
|
|
93
|
+
|
|
55
94
|
```
|
|
56
95
|
なんとか真ん中にいってくれましたが、
|
|
57
96
|
今度は小さい方の文字が、上に寄ってしまいます。
|
2
displey: flexを設定しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
|
|
44
44
|
<div class="comment">
|
|
45
|
-
<span>
|
|
45
|
+
<span>文字文字文字文字文字<br>
|
|
46
|
-
|
|
46
|
+
文字文字文字文字文字文字文字文字</span>
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
49
|
```
|
1
spanだったのを、p要素にしてみました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -32,8 +32,29 @@
|
|
|
32
32
|
```
|
|
33
33
|
もだめでした
|
|
34
34
|
|
|
35
|
+
### 今やってみたこと
|
|
36
|
+
p要素にしてみました。。
|
|
37
|
+
```html
|
|
38
|
+
<div class="box">
|
|
39
|
+
<div class="points">
|
|
40
|
+
<p class="num">30</p>
|
|
41
|
+
<p class="point">点</p>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="comment">
|
|
45
|
+
<span>ひょっとしたら税金アレルギーかも。。<br>
|
|
46
|
+
税金で損をする前に、この漫画で税金の基礎の基礎を学んでみて！</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
```
|
|
50
|
+
```CSS
|
|
51
|
+
.points{
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
なんとか真ん中にいってくれましたが、
|
|
35
|
-
今は
|
|
57
|
+
今度は小さい方の文字が、上に寄ってしまいます。
|
|
36
|
-
親要素の指定の仕方がまずいのかな？と思っています。
|
|
37
58
|
|
|
38
59
|
どうぞ、お時間ありましたら
|
|
39
60
|
助けて頂けますと幸いです。
|