質問編集履歴

1

HTMLとCSSの追加

2020/06/02 08:19

投稿

a44k
a44k

スコア2

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,131 @@
3
3
 
4
4
 
5
5
  この画像のような横棒を入れる方法を教えて欲しいです。
6
+
7
+
8
+
9
+
10
+
11
+ ```HTML
12
+
13
+ <div class="content">
14
+
15
+ <div class="content_text">
16
+
17
+ <h3>86k</h3>
18
+
19
+ <p>experiences shared</p>
20
+
21
+ </div>
22
+
23
+ <div class="content_line"> </div>
24
+
25
+ <div class="content_text">
26
+
27
+ <h3>156</h3>
28
+
29
+ <p>cities available</p>
30
+
31
+ </div>
32
+
33
+ <div class="content_line"> </div>
34
+
35
+ <div class="content_text">
36
+
37
+ <h3>$66</h3>
38
+
39
+ <p>average price</p>
40
+
41
+ </div>
42
+
43
+ <div class="content_line"> </div>
44
+
45
+ <div class="content_text">
46
+
47
+ <h3>22k</h3>
48
+
49
+ <p>pictures taken</p>
50
+
51
+ </div>
52
+
53
+ <div class="content_line"> </div>
54
+
55
+ <div class="content_text">
56
+
57
+ <h3>975</h3>
58
+
59
+ <p>5 star ratings</p>
60
+
61
+ </div>
62
+
63
+ ```
64
+
65
+
66
+
67
+ ```CSS
68
+
69
+ .content {
70
+
71
+ display: flex;
72
+
73
+ list-style: none;
74
+
75
+ font-size: 2.2rem;
76
+
77
+ justify-content: space-around;
78
+
79
+ margin: 155px 0px 0px;
80
+
81
+ text-align: center;
82
+
83
+ }
84
+
85
+
86
+
87
+ .content_line {
88
+
89
+ content: "";
90
+
91
+ height: 2px;
92
+
93
+ width: 35px;
94
+
95
+ background: #dbdbdb;
96
+
97
+ }
98
+
99
+
100
+
101
+ .content_text h3{
102
+
103
+ font-size: 4.8rem;
104
+
105
+ color: #fd5c74;
106
+
107
+ }
108
+
109
+
110
+
111
+ .content_text p{
112
+
113
+ font-size: 2.2rem;
114
+
115
+ margin-top: 10px;
116
+
117
+ }
118
+
119
+ ```
120
+
121
+
122
+
123
+ ![イメージ説明](1ecc6f4bea7b94ac4611ee04a4fb3014.png)
124
+
125
+
126
+
127
+ というにしまってどうすれば良いか悩んでいます。
128
+
129
+
130
+
131
+ この記載の仕方自体がよくないでしょうか?
132
+
133
+ 最も一般的なやり方や他のやり方もあれば教えて欲しいです、