headerの中の文字の配置がページによって変わってしまう（cssは同じ）

【困っていること】
ポートフォリオサイトを製作しています。
そこでheaderにnavを付けたのですが、cssは同じなのに、1ページ目と2ページ目でheaderの中の左上のロゴやliの配置や大きさが変わってしまいます。
分かる方がいましたら、見づらいコードだとは思いますが、ご教授をお願いします。

【試したこと】
headerに関わるあらゆるcssを変更しました（font-sizeやmargin、paddingを%→pxしたり、widthやheightを変えたり、cssを１つずつ消して変わり具合を確認したりしました）が、どれも解決しなかったです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Rei port</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id = "wrapper">
11    <header class="top-header">
12      <h1 class="header-logo"> <a href="top.html">REI PORT</a></h1>
13      <nav class="header-nav">
14        <ul>
15          <li><a href="top.html">TOP</a></li>
16          <li><a href="services.html">SERVICES</a></li>
17          <li><a href="skills.html">SKILLS</a></li>
18          <li><a href="works.html">WORKS</a></li>
19          <li><a href="about.html">ABOUT</a></li>
20          <li><a href="blog.html">BLOG</a></li>
21          <li><a href="contact.html">CONTACT</a></li>
22        </ul>
23      </nav>
24      <!-- <img src="img/menu.png" alt="" class="hamburger"> -->
25    </header>
26    
27    <main>
28      <div id="eyecatch">
29        <p>Welcome to REI PORT</p>
30      </div>
31    </main>
32  
33    <footer class="footer">
34      <p>Ⓒ2020 Reiya Kurita</p>
35    </footer>
36  </div>
37    
38</body>
39</html>
40

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Rei port</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id = "wrapper">
11    <header class="top-header">
12      <h1 class="header-logo"> <a href="top.html">REI PORT</a></h1>
13      <nav class="header-nav">
14        <ul>
15          <li><a href="top.html">TOP</a></li>
16          <li><a href="services.html">SERVICES</a></li>
17          <li><a href="skills.html">SKILLS</a></li>
18          <li><a href="works.html">WORKS</a></li>
19          <li><a href="about.html">ABOUT</a></li>
20          <li><a href="blog.html">BLOG</a></li>
21          <li><a href="contact.html">CONTACT</a></li>
22        </ul>
23      </nav>
24    </header>
25  
26    <main>
27      <div id="third">
28    
29        <section id="skills-first">
30          <div class="skills">
31        <section class="skills-one">
32              <svg viewBox="0 0 128 128">
33
34              </svg>
35              <h4>HTML</h4>
36              <p>★★★☆☆</p>
37            </section>
38    
39            <section class="skills-one">
40              <svg viewBox="0 0 128 128">
41
42              </svg>
43              <h4>CSS</h4>
44              <p>★★★☆☆</p>
45            </section>
46    
47            <section class="skills-one">
48              <svg viewBox="0 0 128 128">
49  
50              </svg>
51              <h4>JavaScript</h4>
52              <p>★★☆☆☆</p>
53            </section>
54    
55            <section class="skills-one">
56              <svg viewBox="0 0 128 128">
57
58              </svg>          
59              <h4>WordPress</h4>
60              <p>★☆☆☆☆</p>
61            </section>
62          </div>
63        </section>
64    
65        <section id="skills-second">
66          <div class="skills">
67            <section class="skills-one">
68              <svg viewBox="0 0 128 128">
69
70              </svg>          
71              <h4>PHP</h4>
72              <p>☆☆☆☆☆</p>
73            </section>
74    
75            <section class="skills-one">
76              <svg viewBox="0 0 128 128">
77
78              </svg>          
79              <h4>jQuery</h4>
80              <p>☆☆☆☆☆</p>
81            </section>
82    
83            <section class="skills-one">
84              <svg viewBox="0 0 128 128">
85
86              </svg>
87              <h4>Rails</h4>
88              <p>★☆☆☆☆</p>
89            </section>
90    
91            <section class="skills-one">
92              <svg viewBox="0 0 128 128">
93
94              </svg>          
95              <h4>Python</h4>
96              <p>☆☆☆☆☆</p>
97            </section>
98          </div>
99        </section>
100      </div>  
101    </main> 
102
103    <footer class="footer">
104      <p>Ⓒ2020 Reiya Kurita</p>
105    </footer>
106  
107
108  </div>
109    
110</body>
111</html>

css
1
2@charset "UTF-8";
3
4
5/*------------------------*/
6/*      全体のスタイル      */
7/*------------------------*/
8body{
9  color: #555;
10  margin: 0;
11  padding: 0;
12}
13
14#wrapper {
15  position: relative;
16}
17
18a{
19  text-decoration: none;
20  color: inherit;
21}
22main {
23  padding-bottom: 80px;
24}
25
26/*------------------------*/
27/*         main           */
28/*------------------------*/
29
30
31/*------------------------*/
32/*         header         */
33/*------------------------*/
34
35
36.top-header{
37  display: flex;
38  justify-content: flex-end;
39  line-height: 60px;
40  height: 10%;
41  align-items: center;
42  background: rgba(0,0,0,0.8);
43  color: aliceblue;
44  position: fixed;
45  margin: 0;
46  width: 100%;
47
48}
49
50.header-logo{
51  height: auto;
52  width: 20%;
53  font-size: 22px;
54  font-weight: bold;
55  margin-left: 35px;
56  margin-right: 3%;
57}
58
59.header-nav{
60  display:block;
61  /* width: 100%; */
62}
63
64.header-nav li{
65  display: inline-block;
66  margin-right: 1px;
67  font-size: 14px;
68  width: 120px;
69  height: 10%;
70  text-align: center;
71}
72
73
74.header-nav a{
75  transition: 1s;
76}
77
78.header-nav a:hover{
79  color: rgb(32, 190, 227);
80  transition: 0.5s;
81}
82
83.hamburger{
84  width:30px;
85  height:30px;
86  display: none;
87  cursor: pointer;
88}
89
90#eyecatch{
91  height: 731px;
92  background: url(./img/island.jpg) no-repeat;
93  background-size: cover;
94  background-position: 50% 50%;
95  display: flex;
96  justify-content: center;
97  align-items: center;
98}
99
100#eyecatch p{
101  font-size: 40px;
102  font-style: italic;
103  font-weight: bold;
104  color: rgb(227, 31, 31);
105}
106
107/*------------------------*/
108/*       services         */
109/*------------------------*/
110
111#second {
112  background: url(./img/bamboo.jpg) no-repeat;
113  background-size: cover;
114  height: 700px;
115}
116
117/*------------------------*/
118/*       services         */
119/*------------------------*/
120
121
122/* skills */
123
124#third {
125  background: url(./img/washitu.jpg) no-repeat;
126  background-size: cover;
127  height: 700px;
128}
129
130#skills-first {
131  padding-top: 90px;
132}
133
134.top-title-center{
135  font-size: 30px;
136  font-weight: bold;
137  text-align: center;
138  margin-top: 20px;
139  margin-bottom: 0;
140  }
141
142.japanese {
143  text-align: center;
144  margin-top: 0;
145}
146
147.skills {
148    display: flex;
149    justify-content: center;
150    text-align: center;
151}
152
153.skills-one {
154  width: 220px;
155  height: 280px;
156  background-color: rgba(240, 248, 255, 0.7);
157  padding: 20px 35px 50px;
158  box-sizing: border-box;
159  box-shadow: 3px 3px 10px;
160  margin-right: 50px;
161}
162    
163  .skills-one:last-child{
164    margin-right: 0;
165  }
166
167  .skills-one svg{
168    width: 100px;
169    height: auto;
170  }
171  .skills-one p {
172      padding-top: 10%;
173  }
174
175  #skills-second {
176    margin-top: 40px;
177  }
178
179  /* skills */
180
181  /* footer */
182  
183  .footer{
184    height: 80px;
185    text-align: center;
186    line-height: 80px;
187    background: rgba(0,0,0,0.8);
188    color: aliceblue;
189    width: 100%;
190    position: absolute;
191    bottom: 0;
192  }
193  
194
195  .footer p {
196    font-size: 14px;
197    padding-bottom: 0;
198    line-height: 80px;
199    margin-top: 0;
200  }
201
202  /* footer */
203
204
205

nelpesica

2020/09/28 04:24

確認した限りでは違いがあるようには見えません。もしサーバーに上げているならキャッシュを削除してみてください。あと、スキルを5段階評価で表すのは意味不明なのでおすすめしません。 ★★★☆☆とかで表されてもどれくらいできるのかさっぱりわかりません。

maron_2020

2020/09/28 07:02

コメントありがとうございます！まだサーバーには上げておらず、ローカルでやっています。スキルについてもアドバイスありがとうございます。わかりやすいように修正します！

行動規範の内容に同意します

回答6件

ベストアンサー

頂いた「トップページ」「スキルページ」「スタイルファイル」全て僕の環境でコピーしましたが、
結果は下記画像の通りです。

そもそもmaron_2020さんが画像で送ってくださった表示と異なっていますね...
（背景画像は別の話で）

ちなみに文字比較ツールを使って、top.htmlとskills.htmlのコードを比較しましたが、ヘッダーより上は全て同じコードでした。

（引用サイト...デュフフという千鳥並みのクセがあるツールです。）
https://difff.jp/

ですので、htmlコードも同じ、読み込んでいるCSSも同じなので、やっぱり別の何かを読み込んでしまっているのかもしれません。または、ソース共有ミスの可能性もあるかも...
制作においても、意図していないスタイルが適用されることは日常茶飯事なので、この機会に修正をトライしてみましょう。

解決策

もうすでにGoogle検証は試しているでしょうか...？

環境を統一させるほどでもないし、maron_2020さんの環境がどうなっているか調べるよりも、Google検証で修正してみた方が早いです。

まだ試していなければ、どこを見れば良いか手引きだけでもしますよ。
やり方分からなければ、ご連絡ください。
既に試しているなら、Google検証上でもスタイルを修正できない状況を詳しくお聞かせください〜

投稿2020/09/29 11:16

Tsukasa_Tomioka

総合スコア19

maron_2020

2020/09/30 03:41

何度もご連絡ありがとうございます。以下長文になってしまいすみません。 Google検証は自分なりにやってみたのですが、謎の余白についてはmarginもpaddingも表示されずということや、topとskillsのページでは微妙にheader要素のフォントサイズが異なることが分かっただけでした... 何か良いやり方があればご教授をお願いしたいです。。。また昨日は出来なかったのですが、本日なんとかGitHubに載せることが出来ました。こちらURLになります。良ければ見ていただきたいです。 https://maronta-wsoul.github.io/portfolio/index.html しかしこちらではheader要素のズレは確認出来なかったです。ですので、ソースは正しいと思われます。やはり自分のPCの問題なのでしょうか。。と、、ここまで書いてGoogle検証でスタイルの修正を試してみようとしたところ、なぜか分かりませんがローカル環境でも正しく表示されました！！！昨日から変えたことは、・GitHubに載せる関係で、「top.html」から「index.html」に変える・間違えてVS CodeではなくAtomで開いて保存するという２点しか変えていないです。自分でも何故解決したのかわからずにモヤモヤするのですが、大丈夫なのでしょうか。。また、何度も質問に答えていただき本当にありがとうございます。

Tsukasa_Tomioka

2020/09/30 11:56

とにもかくにも解決できて何よりです！！よかった... Gitの方も確認しましたよ〜スタイル崩れは見られませんでしたね(^-^) Google検証を使う目的は、 ● Google検証だけで修正して解決してみる ● 意図しないスタイルが適用されている場合は、何のファイルで指定しているスタイルなのか特定するといった具合です。また、考えられる問題点は下記のようなものかもしれません ● ユーザースタイルシートが原因（<header>など必ず使うタグによく当てられている） → リセットCSSで解決 ● キャッシュの問題 → ローカル環境について具体的に分からないのでどうにも言えないですが...スーパーリロードすればあっさり解決することもわざと色んな用語使ってますが、分からない言葉や知識があればぜひ学んでみてください！それから... 初心者向けに、自分でプログラミング学習するために参考になる記事いくつか載っけてますので、良かったら僕のプロフィールからみて見てくださいね〜

maron_2020

2020/10/02 01:14 編集

本当にありがとうございました！なるほど、新しい用語についても勉強します！！記事も読ませていただきます！！

行動規範の内容に同意します

【CSS】*別のファイルのコードを参考にする為にコピーして編集している途中な為、htmlと関係ない部分があるかもしれません

css
1@charset "UTF-8";
2
3
4/*------------------------*/
5/*      全体のスタイル      */
6/*------------------------*/
7body{
8  color: #555;
9  margin: 0;
10  padding: 0;
11}
12
13#wrapper {
14  position: relative;
15}
16
17a{
18  text-decoration: none;
19  color: inherit;
20}
21
22.ptb60{
23  padding: 60px 0;
24}
25
26/* トップに戻るボタン */
27
28#btn{
29  border: 1px solid #000;
30  padding: 5px;
31  cursor: pointer;
32  position: fixed;
33  bottom: 20px;
34  right: 20px;
35  z-index: 10000;
36}
37
38
39.more{
40  display: inline-block;
41  border: 2px solid rgba(11, 202, 244, 0.19);
42  padding: 8px 20px;
43  font-weight: bold;
44  background-color: white;
45  color: rgba(11, 202, 244, 0.19);
46  transition: 0.6s;
47}
48
49.more:hover{
50  background-color: rgba(11, 202, 244, 0.19);
51  color: white;
52  transition: 0.6s;
53}
54
55/*------------------------*/
56/*         main           */
57/*------------------------*/
58
59main {
60  padding-bottom: 80px;
61}
62
63/*------------------------*/
64/*         main           */
65/*------------------------*/
66
67
68/*------------------------*/
69/*         header         */
70/*------------------------*/
71
72
73.top-header{
74  display: flex;
75  justify-content: flex-end;
76  line-height: 60px;
77  height: 10%;
78  align-items: center;
79  background: rgba(0,0,0,0.8);
80  color: aliceblue;
81  position: fixed;
82  margin: 0;
83  width: 100%;
84
85}
86
87.header-logo{
88  height: auto;
89  width: 20%;
90  font-size: 22px;
91  font-weight: bold;
92  margin-left: 35px;
93  margin-right: 3%;
94}
95
96.header-nav{
97  display:block;
98  /* width: 100%; */
99}
100
101.header-nav li{
102  display: inline-block;
103  margin-right: 1px;
104  font-size: 14px;
105  width: 120px;
106  height: 10%;
107  text-align: center;
108}
109
110
111.header-nav a{
112  transition: 1s;
113}
114
115.header-nav a:hover{
116  color: rgb(32, 190, 227);
117  transition: 0.5s;
118}
119
120.hamburger{
121  width:30px;
122  height:30px;
123  display: none;
124  cursor: pointer;
125}
126
127#eyecatch{
128  height: 731px;
129  background: url(./img/island.jpg) no-repeat;
130  background-size: cover;
131  background-position: 50% 50%;
132  display: flex;
133  justify-content: center;
134  align-items: center;
135}
136
137#eyecatch p{
138  font-size: 40px;
139  font-style: italic;
140  font-weight: bold;
141  color: rgb(227, 31, 31);
142}
143
144/*------------------------*/
145/*       services         */
146/*------------------------*/
147
148#second {
149  background: url(./img/bamboo.jpg) no-repeat;
150  background-size: cover;
151  height: 700px;
152}
153
154/*------------------------*/
155/*       services         */
156/*------------------------*/
157
158
159/* skills */
160
161#third {
162  background: url(./img/washitu.jpg) no-repeat;
163  background-size: cover;
164  height: 700px;
165}
166
167#skills-first {
168  padding-top: 90px;
169}
170
171.top-title-center{
172  font-size: 30px;
173  font-weight: bold;
174  text-align: center;
175  margin-top: 20px;
176  margin-bottom: 0;
177  }
178
179.japanese {
180  text-align: center;
181  margin-top: 0;
182}
183
184.skills {
185    display: flex;
186    justify-content: center;
187    text-align: center;
188}
189
190.skills-one {
191  width: 220px;
192  height: 280px;
193  background-color: rgba(240, 248, 255, 0.7);
194  padding: 20px 35px 50px;
195  box-sizing: border-box;
196  box-shadow: 3px 3px 10px;
197  margin-right: 50px;
198}
199    
200  .skills-one:last-child{
201    margin-right: 0;
202  }
203  
204  /* .business-cat h3{
205    font-size: 18px;
206    font-weight: bold;
207    margin-bottom: 10px;
208  } */
209  
210  .skills-one svg{
211    width: 100px;
212    height: auto;
213  }
214  .skills-one p {
215      padding-top: 10%;
216  }
217
218  #skills-second {
219    margin-top: 40px;
220    /* margin-bottom: 40px; */
221  }
222
223  /* skills */
224
225
226  /* 自己紹介    */
227
228  #wrap {
229      display: flex;
230      justify-content: space-around;
231  }
232
233  #fifth-left {
234      width: 50%;
235      height: 400px;
236  }
237
238  #fifth-left {
239    height: 100%;
240  }
241
242  #fifth-right th, #fifth-right td{
243    font-size: 14px;
244    padding-bottom: 10px;
245  }
246  
247  #fifth-right th{
248    width: 25%;
249  }
250  
251  #fifth-right td{
252    width: 75%;
253  }
254  
255
256  /* 自己紹介 */
257
258
259  /* footer */
260  
261  /* .bottom-footer {
262    height: 200px;
263    align-items: center;
264    background: rgba(0,0,0,0.8);
265    color: aliceblue;
266    position: fixed;
267    margin-bottom: 0;
268    width: 100%;
269  } */
270
271  .footer{
272    height: 80px;
273    text-align: center;
274    line-height: 80px;
275    background: rgba(0,0,0,0.8);
276    color: aliceblue;
277    width: 100%;
278    position: absolute;
279    bottom: 0;
280  }
281  
282
283  .footer p {
284    font-size: 14px;
285    padding-bottom: 0;
286    line-height: 80px;
287    margin-top: 0;
288  }
289
290  /* footer */

投稿2020/09/29 02:16

maron_2020

総合スコア16

【スキルページ】*文字数の関係でDEVICONの画像コードを消した部分があります。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Rei port</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id = "wrapper">
11    <header class="top-header">
12      <h1 class="header-logo"> <a href="top.html">REI PORT</a></h1>
13      <nav class="header-nav">
14        <ul>
15          <li><a href="top.html">TOP</a></li>
16          <li><a href="services.html">SERVICES</a></li>
17          <li><a href="skills.html">SKILLS</a></li>
18          <li><a href="works.html">WORKS</a></li>
19          <li><a href="about.html">ABOUT</a></li>
20          <li><a href="blog.html">BLOG</a></li>
21          <li><a href="contact.html">CONTACT</a></li>
22        </ul>
23      </nav>
24      <!-- <img src="img/menu.png" alt="" class="hamburger"> -->
25    </header>
26  
27    <main>
28      <div id="third">
29        <!-- <h2 class="top-title-center">SKILLS</h2>
30        <h3 class="japanese">スキル</h3> -->
31    
32        <section id="skills-first">
33          <div class="skills">
34        <section class="skills-one">
35              <svg viewBox="0 0 128 128">
36                <path fill="#E44D26" d="M19.037 113.876l-10.005-112.215h109.936l-10.016 112.198-45.019 12.48z"></path><path fill="#F16529" d="M64 116.8l36.378-10.086 8.559-95.878h-44.937z"></path><path fill="#EBEBEB" d="M64 52.455h-18.212l-1.258-14.094h19.47v-13.762h-34.511l.33 3.692 3.382 37.927h30.799zM64 88.198l-.061.017-15.327-4.14-.979-10.975h-13.817l1.928 21.609 28.193 7.826.063-.017z"></path><path fill="#fff" d="M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zM63.952 24.599v13.762h33.244l.276-3.092.628-6.978.329-3.692z"></path>
37              </svg>
38              <h4>HTML</h4>
39              <p>★★★☆☆</p>
40            </section>
41    
42            <section class="skills-one">
43              <svg viewBox="0 0 128 128">
44                <path fill="#1572B6" d="M18.814 114.123l-10.054-112.771h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"></path><path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"></path><path fill="#fff" d="M64.001 51.429h18.302l1.264-14.163h-19.566v-13.831h34.681999999999995l-.332 3.711-3.4 38.114h-30.95v-13.831z"></path><path fill="#EBEBEB" d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031h-13.882l1.937 21.717 28.331 7.863.063-.018v-14.39z"></path><path fill="#fff" d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881h-13.876z"></path><path fill="#EBEBEB" d="M64.048 23.435v13.831000000000001h-33.407999999999994l-.277-3.108-.63-7.012-.331-3.711h34.646zM64.001 51.431v13.831000000000001h-15.209l-.277-3.108-.631-7.012-.33-3.711h16.447z"></path>
45              </svg>
46              <h4>CSS</h4>
47              <p>★★★☆☆</p>
48            </section>
49    
50            <section class="skills-one">
51              <svg viewBox="0 0 128 128">
52                <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"></path>
53              </svg>
54              <h4>JavaScript</h4>
55              <p>★★☆☆☆</p>
56            </section>
57    
58            <section class="skills-one">
59              <svg viewBox="0 0 128 128">
60                <path fill-rule="evenodd" clip-rule="evenodd" fill="#494949" d="M64.094 126.224c34.275-.052 62.021-27.933 62.021-62.325 0-33.833-27.618-61.697-60.613-62.286-34.652-.618-63.608 27.5-63.617 61.597-.01 35.079 27.612 63.064 62.209 63.014zm-.101-121.594c32.907-.011 59.126 26.725 59.116 60.28-.011 31.679-26.925 58.18-59.092 58.187-32.771.007-59.125-26.563-59.124-59.608.002-32.193 26.766-58.848 59.1-58.859zM39.157 35.896c.538 1.793-.968 2.417-2.569 2.542-1.685.13-3.369.257-5.325.406 6.456 19.234 12.815 38.183 19.325 57.573.464-.759.655-.973.739-1.223 3.574-10.682 7.168-21.357 10.651-32.069.318-.977.16-2.271-.188-3.275-1.843-5.32-4.051-10.524-5.667-15.908-1.105-3.686-2.571-6.071-6.928-5.644-.742.073-1.648-1.524-2.479-2.349 1.005-.6 2.003-1.704 3.017-1.719 8.872-.135 17.747-.135 26.618.008 1.018.017 2.016 1.15 3.021 1.765-.88.804-1.639 2.01-2.668 2.321-1.651.498-3.482.404-5.458.58 6.463 19.225 12.793 38.057 19.349 57.56 2.931-9.736 5.658-18.676 8.31-27.639 2.366-8.001.956-15.473-3.322-22.52-1.286-2.119-2.866-4.175-3.595-6.486-.828-2.629-1.516-5.622-1.077-8.259.745-4.469 4.174-6.688 8.814-7.113-25.392-23.566-65.294-15.13-79.997 10.475 5.66-.261 11.064-.604 16.472-.678 1.022-.013 2.717.851 2.957 1.652zM49.274 113.867c-.118.345-.125.729-.218 1.302 10.943 3.034 21.675 2.815 32.659-.886l-16.78-45.96c-5.37 15.611-10.52 30.575-15.661 45.544zM40.818 111.789l-25.281-69.35c-11.405 22.278-2.729 56.268 25.281 69.35zM117.246 67.227c.802-10.534-2.832-25.119-5.97-27.125-.35 3.875-.106 8.186-1.218 12.114-2.617 9.255-5.817 18.349-8.899 27.468-3.35 9.912-6.832 19.779-10.257 29.666 16.092-9.539 24.935-23.618 26.344-42.123z"></path>
61              </svg>          
62              <h4>WordPress</h4>
63              <p>★☆☆☆☆</p>
64            </section>
65          </div>
66        </section>
67    
68        <section id="skills-second">
69          <div class="skills">
70            <section class="skills-one">
71              <svg viewBox="0 0 128 128">
72                <path fill="#6181B6" d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"></path>
73              </svg>          
74              <h4>PHP</h4>
75              <p>☆☆☆☆☆</p>
76            </section>
77    
78            <section class="skills-one">
79              <svg viewBox="0 0 128 128">
80
81              </svg>          
82              <h4>jQuery</h4>
83              <p>☆☆☆☆☆</p>
84            </section>
85    
86            <section class="skills-one">
87              <svg viewBox="0 0 128 128">
88               </path>
89              </svg>
90              <h4>Rails</h4>
91              <p>★☆☆☆☆</p>
92            </section>
93    
94            <section class="skills-one">
95              <svg viewBox="0 0 128 128">
96</path>
97              </svg>          
98              <h4>Python</h4>
99              <p>☆☆☆☆☆</p>
100            </section>
101          </div>
102        </section>
103      </div>  
104    </main> 
105
106    <footer class="footer">
107      <p>Ⓒ2020 Reiya Kurita</p>
108    </footer>
109  
110
111  </div>
112    
113</body>
114</html>

投稿2020/09/29 02:13

maron_2020

総合スコア16

【トップページ】

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Rei port</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id = "wrapper">
11    <header class="top-header">
12      <h1 class="header-logo"> <a href="top.html">REI PORT</a></h1>
13      <nav class="header-nav">
14        <ul>
15          <li><a href="top.html">TOP</a></li>
16          <li><a href="services.html">SERVICES</a></li>
17          <li><a href="skills.html">SKILLS</a></li>
18          <li><a href="works.html">WORKS</a></li>
19          <li><a href="about.html">ABOUT</a></li>
20          <li><a href="blog.html">BLOG</a></li>
21          <li><a href="contact.html">CONTACT</a></li>
22        </ul>
23      </nav>
24      <!-- <img src="img/menu.png" alt="" class="hamburger"> -->
25    </header>
26    
27    <main>
28      <div id="eyecatch">
29        <p>Welcome to REI PORT</p>
30      </div>
31    </main>
32  
33    <footer class="footer">
34      <p>Ⓒ2020 Reiya Kurita</p>
35    </footer>
36  
37  </div>
38    
39</body>
40</html>

投稿2020/09/29 02:09

maron_2020

総合スコア16

Tsukasa_Tomioka様

ご丁寧な解答ありがとうございます！
自分も上記のコードで確認したところ、ズレは確認出来ませんでした。
ですので、実際にはコードの量はもっと多いため、別の部分で問題が生じていると思います。

以下、富岡さんの質問に答えさせて頂きます。
①画像
・トップページ

・スキルページ

②エディタ―は「Visual Studio Code」を使っています！

③ローカル環境については適切な答え方がわからないのですが、

【自分のWindowsのデスクトップに新規フォルダを作成】
↓
【そのフォルダを「Visual Studio Code」で開きコードを記入】
↓
【Google Chromeで実際のページを表示して確認】

というような感じでやっています！

④関連ファイル構造です

以上になります！！
お手数をおかけして申し訳ありませんが、ご回答よろしくお願いいたします。

投稿2020/09/28 16:34

maron_2020

総合スコア16

Tsukasa_Tomioka

2020/09/28 17:17

お返事ありがとうございます。なるほど、はじめに送ってくださったコードとは状況が変わっていたんですね。確かにヘッダーロゴ位置とフォントサイズが異なっているようですね... それだとコードの問題だと思うので、現状の関連ソースを共有して頂けますか？見た感じだと、top.html、skills.html、style.cssが関連するファイルですかね。僕の方で修正してみますよ。 Gitなどで共有してもいいですし、もちろんこちらでコード貼り付けて共有でもOKです。

maron_2020

2020/09/29 02:07

ご連絡ありがとうございます。はい、navのli要素も微妙にフォントサイズが異なっています... コードの共有了解しました！ありがとうございます！ DEVICONの画像を使用していたりしてコードの量が多いと思うので、Gitで共有させていただこうと考えたのですが、上手く行きませんでした... ここでコードを貼り付けさせていただきます！よろしくお願いいたしします。

行動規範の内容に同意します

maron_2020 様
初めまして！
質問の回答をさせて頂きます冨岡です。

綺麗なポートフォリオですね...！
一度僕の環境で二つのページを表示させて見ました。

結果は下記の画像のようになっていて、
二つともヘッダーに違うところは無いですね...おそらくコード上は問題ないかと思います。

index01.html（maron_2020さんがご提示くださった一つ目のHTML）

index02.html（maron_2020さんがご提示くださった二つ目のHTML）

おそらくmaron_2020さんの制作環境の方に原因があるかと思います。

よければ、お手数ですが、下記についてお答え頂いてもよろしいでしょうか？

① maron_2020さんの画面でどのように表示が異なっているか、僕が送ったように画像で添付ください
② maron_2020さんがその制作で使われている「エディター」を教えてください。
③ どのようなツールを使ってローカル環境を作っていますか？
（例）VS CodeのLive Serverで表示させている
④ 二つのHTMLファイルを表示させている関連ファイル構造を写真で添付ください。
（例）
![