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

質問編集履歴

2

CSSに変更しました。よろしくお願いいたします。

2020/06/19 06:38

投稿

yukitur
yukitur

スコア9

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,6 @@
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
7
  <title>Dental Clinic</title>
8
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
9
8
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10
9
  <link rel="stylesheet" href="main.css">
11
10
  <link rel="stylesheet" href="resposive.css">
@@ -116,53 +115,126 @@
116
115
  </div>
117
116
  </div>
118
117
  </div>
119
- <footer>
120
- <div class="container">
121
- <div class="footer-nav">
122
- <i class="far fa-circle"></i><a href="./index.html">トップページ</a>
123
- <i class="far fa-circle"></i><a href="./clinic.html">医院紹介</a>
124
- <i class="far fa-circle"></i><a id="return" href="./service.html">診療案内</a>
125
- <i class="far fa-circle"></i><a href="./staff.html">院長・スタッフ紹介</a>
126
- <i class="far fa-circle"></i><a href="./access.html">アクセス</a>
127
- </div>
128
- <p class="tel"><span class="name">デンタル クリニック</span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
129
- <p class="copyright">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
130
- </div>
131
- </footer>
132
118
  </body>
133
119
  </html>
134
120
 
135
121
  ```
136
122
  ```css
137
123
  body {
138
- background-color: rgb(241, 240, 240);
124
+ background-color: #f1f0f0;
139
125
  border-top: 8px solid #71C9C7;
140
126
  margin: 0 auto;
141
127
  }
142
128
 
129
+ * {
130
+ -webkit-box-sizing: border-box;
131
+ box-sizing: border-box;
132
+ }
133
+
134
+ header {
135
+ margin: 0 auto;
136
+ width: 920px;
137
+ display: -webkit-box;
138
+ display: -ms-flexbox;
139
+ display: flex;
140
+ }
141
+
143
142
  .container {
144
143
  padding: 0;
145
144
  margin: 0 auto;
146
145
  }
147
146
 
147
+ .header-left {
148
+ padding-top: 60px;
149
+ float: left;
150
+ }
151
+
152
+ .header-right {
153
+ padding-top: 40px;
154
+ float: right;
155
+ }
156
+
157
+ .header-right p {
158
+ font-size: 10px;
159
+ }
160
+
161
+ .fa-phone {
162
+ font-size: 20px;
163
+ padding-right: 8px;
164
+ }
165
+
166
+ .reception-time {
167
+ border: 1px solid gray;
168
+ text-align: center;
169
+ padding: 5px;
170
+ }
171
+
172
+ .red {
173
+ color: red;
174
+ }
175
+
176
+ .nav {
177
+ clear: both;
178
+ border-radius: 0.5em;
179
+ font-weight: bold;
180
+ margin-bottom: 30px;
181
+ }
182
+
183
+ .nav a {
184
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
185
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
186
+ border-left: 1px solid #99E1DF;
187
+ border-right: 1px solid #71C9C7;
188
+ padding: 15px 0;
189
+ text-align: center;
190
+ color: white;
191
+ text-decoration: none;
192
+ width: 20%;
193
+ line-height: 20px;
194
+ font-size: 14px;
195
+ }
196
+
197
+ .nav a:hover {
198
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc6c4), to(#9ce3e1));
199
+ background-image: linear-gradient(#6cc6c4 0%, #9ce3e1 100%);
200
+ opacity: 0.7;
201
+ }
202
+
203
+ .first {
204
+ border-top-left-radius: 0.5em;
205
+ border-bottom-left-radius: 0.5em;
206
+ }
207
+
208
+ .last {
209
+ border-top-right-radius: 0.5em;
210
+ border-bottom-right-radius: 0.5em;
211
+ }
212
+
213
+ .english {
214
+ font-size: 12px;
215
+ }
216
+
148
217
  .main-image {
149
218
  max-width: 100%;
150
219
  float: right;
151
- img {
152
- float: right;
153
- }
154
220
  }
221
+
222
+ .main-image img {
223
+ float: right;
224
+ }
225
+
155
226
  .main-wrapper {
156
227
  width: 920px;
157
228
  margin: 0 auto;
158
229
  text-align: left;
159
230
  }
231
+
160
232
  .sideber {
161
233
  width: 260px;
162
234
  margin-right: 20px;
163
- float: left;
164
235
  position: relative;
165
236
  }
237
+
166
238
  .sideber-top {
167
239
  width: 100%;
168
240
  height: 250px;
@@ -171,33 +243,39 @@
171
243
  border-top-right-radius: 0.5em;
172
244
  border-top-left-radius: 0.5em;
173
245
  background-color: white;
174
- h6 {
175
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
176
- padding: 15px 15px;
177
- font-weight: bold;
178
- color: white;
179
- border-top-left-radius: 0.4em;
180
- border-top-right-radius: 0.4em;
181
- }
182
- a {
183
- display: block;
184
- color: black;
185
- text-decoration: none;
186
- margin: 18px;
187
- font-size: 14px;
188
- font-weight: bold;
189
- border-bottom: 1px solid #71C9C7;
190
- padding-bottom: 5px;
191
- &:hover {
192
- color: #71C9C7;
193
- }
194
- }
195
246
  }
247
+
248
+ .sideber-top h6 {
249
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
250
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
251
+ padding: 15px 15px;
252
+ font-weight: bold;
253
+ color: white;
254
+ border-top-left-radius: 0.4em;
255
+ border-top-right-radius: 0.4em;
256
+ }
257
+
258
+ .sideber-top a {
259
+ display: block;
260
+ color: black;
261
+ text-decoration: none;
262
+ margin: 18px;
263
+ font-size: 14px;
264
+ font-weight: bold;
265
+ border-bottom: 1px solid #71C9C7;
266
+ padding-bottom: 5px;
267
+ }
268
+
269
+ .sideber-top a:hover {
270
+ color: #71C9C7;
271
+ }
272
+
196
273
  .fa-caret-down {
197
274
  padding-right: 5px;
198
275
  font-size: 16px;
199
276
  color: #71C9C7;
200
277
  }
278
+
201
279
  .sideber-buttom {
202
280
  width: 100%;
203
281
  height: 250px;
@@ -208,122 +286,87 @@
208
286
  border-top-right-radius: 0.5em;
209
287
  border-top-left-radius: 0.5em;
210
288
  background-color: white;
211
- h6 {
212
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
213
- padding: 15px 15px;
214
- font-weight: bold;
215
- color: white;
216
- border-top-left-radius: 0.4em;
217
- border-top-right-radius: 0.4em;
218
- }
219
- a {
220
- display: block;
221
- color: black;
222
- text-decoration: none;
223
- margin: 18px;
224
- font-size: 14px;
225
- font-weight: bold;
226
- border-bottom: 1px solid #71C9C7;
227
- padding-bottom: 5px;
228
- &:hover {
229
- color: violet;
230
- }
231
- }
232
289
  }
233
- .information {
290
+
234
- margin-top: 25px;
235
- padding-bottom: 30px;
291
+ .sideber-buttom h6 {
236
- font-size: 13px;
292
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
237
- background-color: white;
293
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
238
- width: 640px;
239
- float: right;
240
- h6 {
241
- margin: 20px;
242
- padding-bottom: 10px;
243
- padding-left: 10px;
294
+ padding: 15px 15px;
244
- font-weight: bold;
295
+ font-weight: bold;
296
+ color: white;
245
- border-bottom: 3px solid #71C9C7;
297
+ border-top-left-radius: 0.4em;
246
- }
298
+ border-top-right-radius: 0.4em;
247
299
  }
300
+
301
+ .sideber-buttom a {
302
+ display: block;
303
+ color: black;
304
+ text-decoration: none;
305
+ margin: 18px;
306
+ font-size: 14px;
307
+ font-weight: bold;
308
+ border-bottom: 1px solid #71C9C7;
309
+ padding-bottom: 5px;
310
+ }
311
+
312
+ .sideber-buttom a:hover {
313
+ color: violet;
314
+ }
315
+
248
316
  .date {
249
317
  font-weight: bold;
250
318
  padding-right: 30px;
251
319
  white-space: nowrap;
252
320
  }
253
- .info {
321
+
254
- display: flex;
322
+
255
- margin: 10px 20px;
256
- border-bottom: 2px dotted silver;
257
- }
258
- footer {
259
- width: 920px;
260
- margin: 0 auto;
261
- }
262
- .footer-nav {
263
- margin-top: 60px;
264
- // margin-bottom: 30px;
265
- background-color: #71C9C7;
266
- display: inline-block;
267
- padding: 5px 0;
268
- border-radius: 0.5em;
269
- width: 100%;
270
- a {
271
- color: white;
272
- font-size: 14px;
273
- }
274
- }
275
- .fa-circle {
276
- padding-left: 15px;
277
- padding-right: 10px;
278
- font-size: 14px;
279
- color: white;
280
- }
281
- .tel {
282
- text-align: right;
283
- font-size: 14px;
284
- border-bottom: 2px solid #71C9C7;
285
- // padding-bottom: 20px;
286
- padding: 15px 0;
287
- }
288
- .copyright {
289
- text-align: center;
290
- font-size: 13px;
291
- }
292
323
  .name {
293
324
  font-weight: bold;
294
325
  }
326
+
295
327
  .inner {
296
328
  margin: 0 20px;
297
329
  }
330
+
298
331
  .clinic {
299
332
  width: 640px;
300
333
  float: right;
301
334
  background-color: white;
302
335
  border: 2px solid #71C9C7;
303
336
  border-radius: 0.5em;
304
- h5 {
305
- font-weight: bold;
306
- padding-top: 40px;
307
- padding-bottom: 30px;
308
- padding-left: 20px;
309
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
310
- color: white;
311
- border-top-left-radius: 0.3em;
312
- border-top-right-radius: 0.3em;
313
- }
314
- h6 {
315
- margin: 30px 0px;
316
- padding-bottom: 15px;
317
- font-weight: bold;
318
- border-bottom: 3px solid #71C9C7;
337
+ -webkit-box-sizing: border-box;
319
- }
320
- p {
321
- margin: 30px 10px;
322
- font-size: 13px;
338
+ box-sizing: border-box;
323
- line-height: 24px;
324
- }
325
339
  }
326
340
 
341
+ .clinic h5 {
342
+ font-weight: bold;
343
+ padding-top: 40px;
344
+ padding-bottom: 30px;
345
+ padding-left: 20px;
346
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
347
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
348
+ color: white;
349
+ border-top-left-radius: 0.3em;
350
+ border-top-right-radius: 0.3em;
351
+ }
352
+
353
+ .clinic h6 {
354
+ margin: 30px 0px;
355
+ padding-bottom: 15px;
356
+ font-weight: bold;
357
+ border-bottom: 3px solid #71C9C7;
358
+ }
359
+
360
+ .clinic p {
361
+ margin: 30px 10px;
362
+ font-size: 13px;
363
+ line-height: 24px;
364
+ }
365
+
366
+
367
+
368
+
369
+
327
370
  ```
328
371
  ![イメージ説明](bea665c34f4fc06ccb45d0cc385e1122.png)
329
372
 

1

index.htmlは文字数が多かったので、clinic.htmlのみをのせてます

2020/06/19 06:38

投稿

yukitur
yukitur

スコア9

title CHANGED
File without changes
body CHANGED
@@ -1,54 +1,38 @@
1
- ```indexhtml
2
-
3
-
4
- <div class="main-wrapper">
1
+ ```clinichtml
2
+ <!DOCTYPE html>
3
+ <html lang="ja">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Dental Clinic</title>
8
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
9
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10
+ <link rel="stylesheet" href="main.css">
11
+ <link rel="stylesheet" href="resposive.css">
12
+ </head>
13
+ <body>
14
+ <header>
5
15
  <div class="container">
6
- <div class="main-image">
16
+ <div class="header-left">
7
- <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="サンプルです">
17
+ <img src="https://haniwaman.com/sample/part3/template_08/common/images/siteTitle.png" alt="クリニックの画像">
8
18
  </div>
9
- <div class="information">
10
- <h6>新着情報</h6>
11
- <div class="info">
12
- <div class="date">
13
- <p>2012年08月01日</p>
14
- </div>
15
- <div class="content">
19
+ <div class="header-right" >
16
- <p>診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
17
- </div>
18
- </div>
19
- <div class="info">
20
- <div class="date">
21
- <p>2012年07月24日</p>
22
- </div>
23
- <div class="content">
24
- <p>【8月の休診のお知らせ】8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p>
25
- </div>
26
- </div>
27
- <div class="info">
28
- <div class="date">
29
- <p>2012年07月02日</p>
30
- </div>
31
- <div class="content">
32
- <p>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。。</p>
33
- </div>
34
- </div>
35
- <div class="info">
36
- <div class="date">
37
- <p>2012年06月20日</p>
38
- </div>
39
- <div class="content">
40
- <p>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p>
41
- </div>
42
- </div>
43
- <div class="info">
44
- <div class="date">
45
- <p>2012年06月01日</p>
46
- </div>
47
- <div class="content">
48
- <p>ホームページをリニューアルしました。</p>
20
+ <p>”地域に根付いた歯科医院”デンタル クリニック</p>
49
- </div>
21
+ <h4><i class="fa fa-phone" aria-hidden="true"></i>03-0000-0000</h4>
50
- </div>
22
+ <p class="reception-time">予約受付時間&nbsp;10:00~19:30&nbsp;<span class="red">日祝</span>&nbsp;<span class="red">休診</span></p>
51
23
  </div>
24
+ <div class="nav">
25
+ <a class="first" href="./index.html">トップページ<br><span class="english">HOME</span></a>
26
+ <a href="./clinic.html">医院紹介<br><span class="english">CLINIC</span></a>
27
+ <a href="./service.html">診療案内<br><span class="english">SERVICE</span></a>
28
+ <a href="./staff.html">院長・スタッフ紹介<br><span class="english">STAFF</span></a>
29
+ <a class="last" href="./access.html">アクセス<br><span class="english">ACCESS</span></a>
30
+ </div>
31
+ <p style="font-size: 10px;"><a href="./index.html">トップページ</a>>医院紹介</p>
32
+ </div>
33
+ </header>
34
+ <div class="main-wrapper">
35
+ <div class="container">
52
36
  <div class="sideber">
53
37
  <div class="sideber-top">
54
38
  <h6>一般歯科</h6>
@@ -65,14 +49,6 @@
65
49
  <a href="#"><i class="fas fa-caret-down"></i>PMTC</a>
66
50
  </div>
67
51
  </div>
68
- </div>
69
- </div>
70
- </body>
71
- </html>
72
-
73
- ```
74
- ```clinichtml
75
-
76
52
  <div class="clinic">
77
53
  <h5>医院紹介</h5>
78
54
  <div class="inner">
@@ -140,7 +116,19 @@
140
116
  </div>
141
117
  </div>
142
118
  </div>
143
-
119
+ <footer>
120
+ <div class="container">
121
+ <div class="footer-nav">
122
+ <i class="far fa-circle"></i><a href="./index.html">トップページ</a>
123
+ <i class="far fa-circle"></i><a href="./clinic.html">医院紹介</a>
124
+ <i class="far fa-circle"></i><a id="return" href="./service.html">診療案内</a>
125
+ <i class="far fa-circle"></i><a href="./staff.html">院長・スタッフ紹介</a>
126
+ <i class="far fa-circle"></i><a href="./access.html">アクセス</a>
127
+ </div>
128
+ <p class="tel"><span class="name">デンタル クリニック</span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
129
+ <p class="copyright">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
130
+ </div>
131
+ </footer>
144
132
  </body>
145
133
  </html>
146
134
 
@@ -337,16 +325,12 @@
337
325
  }
338
326
 
339
327
  ```
340
- ![![イメージ説明](099f267524263b6a7c01b52a0acac3f8.png)
341
328
  ![イメージ説明](bea665c34f4fc06ccb45d0cc385e1122.png)
342
329
 
343
- sideberの部分を左上に移動させたいのですが、float:left;を使うとclinic.htmlの部分は右上に移動するのですが、index.htmlでは左上に移動しません。
344
- 逆にsideberfloatなくすと、index.htmlでは左上に移動するのに対し、clinic.htmlでは右上に移動しません
330
+ 医院紹介部分を右上に持って行きたいです
345
331
 
346
- 互い違いになってしまいます。
347
-
348
332
  色々と調べたのですが、この部分だけどうしてもわかりません。
349
333
 
350
334
  教えていただければ嬉しいです。よろしくお願いいたします。
351
335
 
352
- 文字数が多いので不要な部分はカットしてます
336
+