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

質問編集履歴

1

cssコードの表記、写真の詳細とファイル構成について記載しました。

2021/03/03 06:20

投稿

sasaki0757
sasaki0757

スコア5

title CHANGED
File without changes
body CHANGED
@@ -1,1 +1,202 @@
1
- ポートフォリオサイトを作り、xfreeでサーバーを借りてffftpでサイトをアップロードしたのですが、写真が途中で切れてしまいます。テキストエディタで表示する時は問題なくうつります。解決方法を教えてもらいたいです。![イメージ説明](467f86cc209436d4c2bac0ef94685748.png)
1
+ ```css3
2
+ @charset "utf-8";
3
+
4
+ body {
5
+ margin: 0;
6
+ padding: 0;
7
+ font-size: 20px;
8
+ line-height: 2;
9
+ }
10
+
11
+ p,h1,h2,h3,h4,h5,h6 {
12
+ margin-top: 0;
13
+ }
14
+
15
+ img {
16
+ vertical-align: 0;
17
+ }
18
+
19
+ ul {
20
+ margin: 0;
21
+ padding: 0;
22
+ }
23
+
24
+ a {
25
+ color: #3583aa;
26
+ text-decoration: none;
27
+ }
28
+
29
+ a:visited {
30
+ color: #788d98;
31
+ }
32
+
33
+ a:hover {
34
+ text-decoration: underline;
35
+ }
36
+
37
+ header {
38
+ width: 100%;
39
+ height: 600px;
40
+ }
41
+
42
+ .logo {
43
+ float: left;
44
+ margin: 0 0 0 10px;
45
+ }
46
+
47
+ .logo a {
48
+ color: #3583aa;
49
+ font-family: 'Sriracha', cursive;
50
+ font-size: 40px;
51
+ }
52
+
53
+ .global-nav {
54
+ float: right;
55
+ margin: 10px;
56
+ }
57
+
58
+ .global-nav li {
59
+ float: left;
60
+ margin: 0 20px;
61
+ font-size: 30px;
62
+ list-style: none;
63
+ }
64
+
65
+ .global-nav li a {
66
+ color: #3583aa;
67
+ font-family: 'Vollkorn', serif;
68
+ }
69
+
70
+ .global-nav li a:hover {
71
+ border-bottom: 2px solid #ffffff;
72
+ padding-bottom: 3px;
73
+ text-decoration: none;
74
+ color: #cccccc;
75
+ }
76
+
77
+ .top {
78
+ clear: both;
79
+ text-align: center;
80
+ padding-top: 150px;
81
+ }
82
+
83
+ .topfont{
84
+ stroke: #000;
85
+ fill: #00ffff;
86
+ stroke-width: 2.5;
87
+ stroke-dasharray: 4000;
88
+ stroke-dashoffset: 4000;
89
+ animation: DASH 8s ease-in-out alternate 0s forwards;
90
+ -webkit-animation: DASH 8s ease-in-out alternate 0s forwards;
91
+ }
92
+
93
+ @keyframes DASH {
94
+ 0% {
95
+ stroke-dashoffset: 4000;
96
+ }
97
+ 100% {
98
+ stroke-dashoffset: 0;
99
+ }
100
+ }
101
+
102
+ @-webkit-keyframes DASH {
103
+ 0% {
104
+ stroke-dashoffset: 4000;
105
+ }
106
+ 100% {
107
+ stroke-dashoffset: 0;
108
+ }
109
+ }
110
+
111
+ #portfolio {
112
+ background-image: url(../image/background-a.jpg);
113
+ background-repeat: no-repeat;
114
+ background-position: center top;
115
+ background-attachment: fixed;
116
+ background-size: 100% auto;
117
+ }
118
+
119
+ #wrap {
120
+ clear: both;
121
+ background-color: #ffffff;
122
+ overflow: hidden;
123
+ }
124
+
125
+ #wrap p {
126
+ font-family: "M PLUS Rounded 1c";
127
+ }
128
+
129
+ #profile {
130
+ width: auto;
131
+ height: 850px;
132
+ }
133
+
134
+ .photo {
135
+ text-align: center;
136
+ }
137
+
138
+ .profile-image {
139
+ width: 300px;
140
+ height: 300px;
141
+ border-radius: 50%;
142
+ overflow: hidden;
143
+ }
144
+
145
+ .introduction {
146
+ width: 80%;
147
+ margin: 0 auto;
148
+ }
149
+ .introduction p {
150
+ font-size: 28px;
151
+ }
152
+
153
+ #skill {
154
+ width: auto;
155
+ height: 850px;
156
+ background-color: #eaeaea;
157
+ }
158
+
159
+ .container {
160
+ margin-top: 150px;
161
+ display: flex;
162
+ flex-direction: row;
163
+ justify-content: center;
164
+ }
165
+
166
+ .item {
167
+ margin:0 20px;
168
+ }
169
+
170
+ h1,h2 {
171
+ text-align: center;
172
+ font-family: 'Oswald', sans-serif;
173
+ font-size: 50px;
174
+ }
175
+
176
+ #works {
177
+ width: 100%;
178
+ height: 850px;
179
+ }
180
+
181
+ .works-a {
182
+ margin: 100px 450px;
183
+ width: 450px;
184
+ height: 300px;
185
+ }
186
+
187
+ #contact {
188
+ background-color: #eaeaea;
189
+ height: 1000px;
190
+ width: 100%;
191
+ margin: 0 auto;
192
+ }
193
+
194
+ .google {
195
+ padding: 0 26%;
196
+ }
197
+
198
+ footer {
199
+ text-align: center;
200
+ background-color: #696969;
201
+ }
202
+ ```ポートフォリオサイトを作り、xfreeでサーバーを借りてffftpでサイトをアップロードしたのですが、写真が途中で切れてしまいます。テキストエディタで表示する時は問題なくうつります。解決方法を教えてもらいたいです。  (追記)実際の写真のサイズは2725 x 1670であり、cssで縦450px、横300pxに設定しています。ファイルのパスはC:\Users\Owner\Documents\web file\imageとなっておりweb fileにcssのフォルダーとhtmlファイルが入っています。 ![イメージ説明](467f86cc209436d4c2bac0ef94685748.png)