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

質問編集履歴

3

html CSS を更新しました

2020/11/12 15:53

投稿

umi3
umi3

スコア18

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,14 @@
7
7
  ### 該当のソースコード
8
8
 
9
9
  ```html
10
+ <!CDOCTYPE html>
11
+ <html>
12
+ <head>
13
+ <meta carset="utf-8">
14
+ <title>ポートフォリオ</title>
15
+ <link rel="stylesheet" href="../css/story.css">
16
+ </head>
17
+ <body>
10
18
  <div class="main">
11
19
  <div class="parallax-bg img-bg-01">固定背景1</div>
12
20
  <div class="parallax-bg img-bg-02">固定背景2</div>
@@ -14,7 +22,6 @@
14
22
  <div class="parallax-bg img-bg-04">固定背景4</div>
15
23
  <div class="parallax-bg img-bg-05">固定背景5</div>
16
24
  </div>
17
-
18
25
  <footer class="footerall">
19
26
  <div class="sns-box">
20
27
  <ul class="sns">
@@ -22,10 +29,21 @@
22
29
  <li><a href="https://www.facebook.com"><img src="../images/facebook.png" width="50px"></a></li>
23
30
  <li><a href="https:/plus.google.com"><img src="../images/line.png" width="50px"></a></li>
24
31
  </ul>
25
- </div>
32
+ </div>
26
33
  </footer>
34
+ </body>
35
+ </html>
27
36
  ```
28
37
  ```css
38
+ @caraset "UTF-8";
39
+
40
+ html {
41
+ font-famili: sans-serif;
42
+ }
43
+ body {
44
+ margin: 0;
45
+ background-color: #EEE;
46
+ }
29
47
  .main {
30
48
  height: 100%;
31
49
  margin: 0 auto;
@@ -39,7 +57,7 @@
39
57
  display: flex;
40
58
  align-items: center;
41
59
  justify-content: center;
42
- height: 100%;           /*この部分を変更するとずれてしまう*/
60
+ height: 30%;
43
61
  padding: 5%;
44
62
  }
45
63
  .parallax-bg {
@@ -49,26 +67,26 @@
49
67
  background-repeat: no-repeat;
50
68
  }
51
69
  .img-bg-01 {
52
- background-image: url('AAA.jpg');
70
+ background-image: url('../images/card/ex.jpg');
53
71
  }
54
72
  .img-bg-02 {
55
- background-image: url('BBB.jpg');
73
+ background-image: url('../images/card/work.jpg');
56
74
  }
57
75
  .img-bg-03 {
58
- background-image: url('CCC.jpg');
76
+ background-image: url('../images/card/profile.jpg');
59
77
  }
60
78
  .img-bg-04 {
61
- background-image: url('DDD.jpg');
79
+ background-image: url('../images/card/skill.jpg');
62
80
  }
63
81
  .img-bg-05 {
64
- background-image: url('EEE.jpg');
82
+ background-image: url('../images/card/story.jpg');
65
83
  }
66
84
  .footerall {
67
85
  height: 100%;
68
86
  background: linear-gradient(-135deg, #101010, #A6AAA9);
69
87
  }
70
88
  .sns-box {
71
- padding-top: 70%;
89
+ padding-top: 70vh;
72
90
  }
73
91
  .sns {
74
92
  text-align: center;

2

イメージ写真を追加しました

2020/11/12 15:53

投稿

umi3
umi3

スコア18

title CHANGED
File without changes
body CHANGED
@@ -81,4 +81,5 @@
81
81
  display: inline-block;
82
82
  list-style-type: none;
83
83
  }
84
+ ```
84
- ```![![イメージ説明](e13f396c6e0760a3fa21e24c706205bb.png)](31e2a81b732719626b72e5c339069e66.png)
85
+ ![イメージ説明](ca1e402588c99eaccd52609f72ac3ecb.png)

1

イメージ写真を追加しました

2020/11/12 14:43

投稿

umi3
umi3

スコア18

title CHANGED
File without changes
body CHANGED
@@ -81,4 +81,4 @@
81
81
  display: inline-block;
82
82
  list-style-type: none;
83
83
  }
84
- ```
84
+ ```![![イメージ説明](e13f396c6e0760a3fa21e24c706205bb.png)](31e2a81b732719626b72e5c339069e66.png)