質問編集履歴

1

コード記入

2021/11/12 10:26

投稿

daiki0919
daiki0919

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,176 @@
1
- ![イメージ説明](a57364dda3d6eac808ba6b53d1ed359d.png)
1
+ <h2 class="topic2">Contents</h2>
2
+
3
+ <div class="contents_box1">
4
+
5
+ <img src="images/contents1.png" class="box1_image">
6
+
7
+ <div class="contents_text1">
8
+
9
+ <h3 class="contents_topic1">ABOUT US</h3>
10
+
11
+ <div class="contents_message1">「ROPE」(なわとび)を通して、「PEACE」(平和な<br>世界)を創っていきたいという想いから、「ROPE」と<br>「PEACE」を掛け合わせた「ROPEACE」という造語が<br>生まれ、活動はネパールの大震災があった翌年の2016<br>年にROPEACE PROJECTが設立され始動しました。</div>
12
+
13
+ </div>
14
+
15
+ </div>
16
+
17
+ <div class="contents_box2">
18
+
19
+ <div class="contents_text2">
20
+
21
+ <h3 class="contents_topic2">JOIN US</h3>
22
+
23
+ <div class="contents_message2">なわとびを子供たちに届けるために、様々な形で<br>ROPEACE PROJECTに参加することができます。なわ<br>とびを寄贈やクラウドファンディングやグッズ購入とい<br>う形で支援できます。個人、企業、学校など幅広い参<br>加が支援を広げています。</div>
24
+
25
+ </div>
26
+
27
+
28
+
29
+ .topic2 {
30
+
31
+ font-size: 25px;
32
+
33
+ font-weight: bold;
34
+
35
+ text-align: center;
36
+
37
+ margin-top: 50px;
38
+
39
+ border-bottom: 1px solid red;
40
+
41
+ border-width: medium;
42
+
43
+ width: 120px;
44
+
45
+ margin: 40px auto;
46
+
47
+ }
48
+
49
+
50
+
51
+ .contents_box1 {
52
+
53
+ display: flex;
54
+
55
+ }
56
+
57
+
58
+
59
+ .box1_image {
60
+
61
+ margin-left: 140px;
62
+
63
+ border-radius: 10px;
64
+
65
+ }
66
+
67
+
68
+
69
+ .contents_text1 {
70
+
71
+ box-shadow: 1px 1px silver;
72
+
73
+ border-top: 1px solid #E6E6E6;
74
+
75
+ border-bottom: 1px solid silver;
76
+
77
+ }
78
+
79
+
80
+
81
+ .contents_topic1 {
82
+
83
+ font-size: 20px;
84
+
85
+ font-weight: bold;
86
+
87
+ margin-top: 50px;
88
+
89
+ margin-left: 20px;
90
+
91
+ }
92
+
93
+ .contents_message1 {
94
+
95
+ font-size: 20px;
96
+
97
+ margin-top: 20px;
98
+
99
+ margin-left: 20px;
100
+
101
+ }
102
+
103
+
104
+
105
+ .contents_box2 {
106
+
107
+ display: flex;
108
+
109
+ }
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+ .contents_text2 {
118
+
119
+ margin-top: 30px;
120
+
121
+ margin-left: 160px;
122
+
123
+ box-shadow: 1px 1px silver;
124
+
125
+ border-top: 1px solid #E6E6E6;
126
+
127
+ border-left: 1px solid #E6E6E6;
128
+
129
+ border-bottom: 1px solid silver;
130
+
131
+ }
132
+
133
+
134
+
135
+ .contents_topic2 {
136
+
137
+ font-size: 20px;
138
+
139
+ font-weight: bold;
140
+
141
+ margin-top: 40px;
142
+
143
+ margin-left: 20px;
144
+
145
+ }
146
+
147
+
148
+
149
+ .contents_message2 {
150
+
151
+ font-size: 20px;
152
+
153
+ margin-top: 20px;
154
+
155
+ margin-left: 20px;
156
+
157
+ }
158
+
159
+
160
+
161
+ .box2_image {
162
+
163
+ margin-top: 30px;
164
+
165
+
166
+
167
+ border-radius: 10px;
168
+
169
+ }
170
+
171
+
172
+
173
+ ```![イメージ説明](a57364dda3d6eac808ba6b53d1ed359d.png)
2
174
 
3
175
  HTMLで作成したのですが、pcの画面を縮小するとビュー崩れが起きてしまいます。
4
176