同じクラス名を指定しているのに、ページの見た目が違う

実現したいこと

別々のページの、フッターの見た目を同じにしたいです。

発生している問題・分からないこと
Webサイト作成時、複数のページに同じ内容、同じクラス名のフッターを記述しました。
ところが、ページによって文字や画像の位置が微妙にずれてしまい、原因が分かりません。
どなたかご教示お願い致します。

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>SOAP EARTH 会社概要</title>
7    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ress@5.0.2/dist/ress.min.css">
8    <link rel="stylesheet" href="/scss/style.css">
9</head>
10<body>
11    ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-08-14/45c1f01c-6587-4baa-8347-e6c90417a3d0.png)
12    <!-- フッター -->
13    <footer>
14        <div class="footer-sns-list">
15            <img src="/image/alexia-luyt-FlssFY7FxWA-unsplash.png" alt="">
16            <div class="sns">
17                <ul class="sns-list">
18                    <li><a href="https://ja-jp.facebook.com/"><img src="/image/Facebook.png" alt=""></a></li>
19                    <li><a href="https://x.com/login"><img src="/image/X.png" alt=""></a></li>
20                    <li><a href="https://www.instagram.com/"><img src="/image/Instagram.png" alt=""></a></li>
21                </ul>
22            </div>
23        </div>
24        <div class="footer-nav-list">
25            <ul>
26                <li class="logo"><a href="/index.html"><img src="/image/logo.png" alt=""></a></li>
27                <li><a href="/index.html#concept">Concept</a></li>
28                <li class="jp"><a href="/menu/index.html">商品一覧</a></li>
29                <li><a href="/index.html#news">News</a></li>
30                <li><a href="/index.html#access">Access</a></li>
31                <li><a href="/Contact/index.html">Contact</a></li>
32                <li class="jp"><a href="#">会社概要</a></li>
33            </ul>
34        </div>
35        <div class="copyright">
36            <p>© SOAP EARTH</p>
37        </div>
38    </footer>
39</body>
40</html>

Sass
1// フッター
2footer {
3    .footer-sns-list {
4        position: relative;
5        .sns {
6            .sns-list {
7                display: flex;
8                justify-content: space-between;
9                position: absolute;
10                top: 50%;
11                left: 50%;
12                transform: translate(-50%, -50%);
13                li {
14                    list-style: none;
15                    margin-right: 274px;
16                    &:last-child {
17                    margin-right: 0;
18                    }
19                    a {
20                        display: block;
21                        img {
22                            width: 100px;
23                            height: 100px;
24                        }
25                    }
26                    & {
27                        opacity: 1;
28                        transition: opacity 0.3s ease;
29                    }
30                    &:hover {
31                        opacity: 0.8;
32                    }
33                }
34            }
35        }
36    }
37    .footer-nav-list {
38        width: 1426px;
39        margin: 62px auto 24px;
40        ul {
41            display: flex;
42            justify-content: space-between;
43            align-items: center;
44            li {
45                list-style: none;
46                font-size: 32px;
47                line-height: 1.45;
48                position: relative;
49                img {
50                    width: 154px;
51                    height: 183px;
52                }
53                &::after {
54                        content: "";
55                        position: absolute;
56                        bottom: 0;
57                        left: 0;
58                        width: 0;
59                        height: 1px;
60                        background-color: #333;
61                        transition: width 0.8s ease;
62                    }
63                &:hover::after {
64                    width: 100%;
65                }
66                &.logo::after {
67                    content: none;
68                }
69            }
70            .jp {
71                font-size: 26px;
72                &::after {
73                    content: "";
74                    position: absolute;
75                    bottom: -4px;
76                }
77            }
78        }
79    }
80    .copyright {
81        width: 1566px;
82        margin: 0 auto;
83        text-align: center;
84        font-size: 18px;
85        line-height: 1.2;
86        padding: 40px 0 60px 0;
87        border-top: 1px solid #333;
88    }
89}

html
1<!-- 別のページのフッター -->
2    <footer>
3        <div class="footer-sns-list">
4            <img src="image/alexia-luyt-FlssFY7FxWA-unsplash.png" alt="">
5            <div class="sns">
6                <ul class="sns-list">
7                    <li><a href="https://ja-jp.facebook.com/"><img src="image/Facebook.png" alt=""></a></li>
8                    <li><a href="https://x.com/login"><img src="image/X.png" alt=""></a></li>
9                    <li><a href="https://www.instagram.com/"><img src="image/Instagram.png" alt=""></a></li>
10                </ul>
11            </div>
12        </div>
13        <div class="footer-nav-list">
14            <ul>
15                <li class="logo"><a href="#"><img src="image/logo.png" alt=""></a></li>
16                <li><a href="#concept">Concept</a></li>
17                <li class="jp"><a href="/menu/index.html">商品一覧</a></li>
18                <li><a href="#news">News</a></li>
19                <li><a href="#access">Access</a></li>
20                <li><a href="/Contact/index.html">Contact</a></li>
21                <li class="jp"><a href="/Company/index.html">会社概要</a></li>
22            </ul>
23        </div>
24        <div class="copyright">
25            <p>© SOAP EARTH</p>
26        </div>
27    </footer>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

キャッシュをクリアしてみましたが、変わりませんでした。

補足

https://github.com/moko443/my-website

maisumakun

2025/08/11 14:14

スクロールバーの有無で幅が違った、なんてオチはありませんか？（実際に遭遇したことがあります）

moko1768

2025/08/11 14:57

ご質問ありがとうございます。全てのページにスクロールバーがあるので、多分他に原因があると思います。

maisumakun

2025/08/12 06:41

＞文字や画像の位置が微妙にずれてしまい具体的に、どのような差があるのですか？

moko1768

2025/08/13 00:56

ご質問ありがとうございます。ほんの数pxですが、文字の位置やフッターの画像がページによって少しずれてしまいます。ですが、ページによっては同じものもあります。お時間ありましたら、こちらのリンク先をご確認ください。 https://moko443.github.io/my-website/

maisumakun

2025/08/13 01:47

そこから複数ページ辿っても、違いは見当たりませんでした。ブラウザ要因もあるのかもしれませんが、「このページとこのページのここが違う」ように、もっと具体的にご提示いただけないでしょうか。

moko1768

2025/08/13 09:30

ご質問ありがとうございます。具体的には、TOPページ・商品一覧ページは同じ、会社概要・News・商品詳細は同じ、Contactはどれとも合わないといった感じです。商品詳細は商品一覧ページの商品をクリックすると出てきます。違いはフッターの文字の位置、facebook等のアイコンの背景画像の位置です。わかりづらくててすみません。因みにEdgeで開いています。

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

回答2件

ベストアンサー

<main>要素の計算上のheightが小数であることがレンダリング結果に影響を及ぼしておるようです。

/my-website-main/Contact/index.html
/my-website-main/Company/index.html

表示がずれている上記2ページについてJavaScriptで無理やり小数以下を削るとフッターの見た目が揃うので、細かなズレを気にするのであれば小数が発生しないようにCSSを工夫する必要があります。

javascript
1const main = document.querySelector('main');
2main.style.overflowY = 'hidden';
3main.style.height = parseInt(getComputedStyle(main).height, 10) + 'px';

投稿2025/08/15 01:34

t-n

総合スコア156

moko1768

2025/08/15 23:17

ご回答ありがとうございます。上記のjavascriptで、フッターの見た目が揃いました!! ありがとうございます。ベストアンサーに選ばせていただきました。

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

ページによって　<html lang="jp"> と誤った指定になったりしているので
もしかしたらこれを直すとうまくいくかもしれません。

ブラウザ依存もあるようですが、例えば私の手元ではchromeはこの属性によらず全部同じ表示になってましたが
firefoxではfont-familyや全体的なサイズが変わっていました。
（※ほんの少しとかいうレベルではない差が出ていた）

もしこれでも直らないようであれば、

動作環境の詳細
自環境でのスクショ
開発者ツール上での計算済みスタイルの違い

等を追加情報として上げるとよいかもしれません

投稿2025/08/13 01:51

pecmm

総合スコア762

moko1768

2025/08/13 09:28

ご回答ありがとうございます。 <html lang="jp">を<html lang="ja">に修正してみましたが、変わらないようです。・動作環境の詳細　エディション Windows 11 Home バージョン 21H2 OS ビルド 22000.2538 プロセッサ Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz 3.20 GHz 実装 RAM 16.0 GB (15.9 GB 使用可能) ・開発者ツール上での計算済みスタイルの違いちょっと分かりません。line-heightやmargin等の数値上はどのページも同じようです。・自環境でのスクショこのサイトでは、スクショは一枚しか上げられないようなので（もしかしたらこちらのやり方が間違っているのかも知れませんが）、スクショで違いを確認するのはちょっと無理かも知れません。