ナビゲーション内のmarginがずれる

marginの位置が画面の大きさによって変わるので
画面の大きさが変わってもストーリーアイコンの真ん中にくるようにしたいです。

vwや％を使ってもmarginがずれます。
画面いっぱいの場合

画面の3分の１

html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/destyle.css">
    <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav class="navigation">
            <ul  id="page-link">
                <li class="list active">
                    <a href="#story">
                        <span class="icon"><ion-icon name="chatbox-ellipses-outline"></ion-icon></span>
                        <span class="text">ストーリー</span>
                    </a>
                </li>
                <li class="list">
                    <a href="#chara">
                        <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                        <span class="text">キャラクター＆声優</span>
                    </a>
                </li>
                <li class="list">
                    <a href="#midokoro">
                        <span class="icon"><ion-icon name="glasses-outline"></ion-icon></span>
                        <span class="text">見どころ</span>
                    </a>
                </li>
                <div class="indicator"></div>
            </ul>
        </nav>
        </div>
</body>
<script src='js/bdd.js'></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</html>

style.css

:root{
  --clr: #fff;
}
.navigation{
  position: relative;
  width: 100%;
  height: 70px;
  background:turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-top: 15px;
}
.navigation ul{
  position: relative;
  display: flex;
  width: 100%;
}
.navigation ul li{
  position: relative;
  list-style: none;
  width: 33vw;
  height: 70px;
  z-index: 1;
}
.navigation ul li a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.navigation ul li a .icon{
  position: relative;
  display: block;
  line-height: 75px;
  font-size: 1.5em;
  text-align: center;
  transition: 0.5s;
  color: var(--clr);
}
.navigation ul li.active a .icon{
  transform: translateY(-32px);
}
.navigation ul li a .text{
  position: absolute;
  color: var(--clr);
  font-weight: 400;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  transition: 0.5s;
  opacity: 0;
  transform: translateY(20px);
}
.navigation ul li.active a .text{
  opacity: 1;
  transform: translateY(10px);
}
.indicator{
  position: absolute;
  top: -52%;
  margin-left: 14.2vw;
  width: 70px;
  height: 70px;
  background: #29fd53;
  border-radius: 50%;
  border: 6px solid var(--clr);
  transition: 0.5s;
}
.indicator::before{
  content: '';
  position: absolute;
  top: 50%;
  left:-22px;
  width: 20px;
  height: 20px;
  background: transparent;
  border-top-right-radius: 20px;
  box-shadow: 1px -10px 0 0 var(--clr);
}
.indicator::after{
  content: '';
  position: absolute;
  top: 50%;
  right:-22px;
  width: 20px;
  height: 20px;
  background: transparent;
  border-top-left-radius: 20px;
  box-shadow: -1px -10px 0 0 var(--clr);
}
.navigation ul li:nth-child(1).active ~ .indicator{
  transform: translateX(calc(33vw*0));
}
.navigation ul li:nth-child(2).active ~ .indicator{
  transform: translateX(calc(33vw*1));
}
.navigation ul li:nth-child(3).active ~ .indicator{
  transform: translateX(calc(33vw*2));
}

bdd.js

const list = document.querySelectorAll('.list');
function activeLink(){
    list.forEach((item) =>
    item.classList.remove('active'));
    this.classList.add('active');
}
list.forEach((item) =>
item.addEventListener('mouseover',activeLink));

recal

2022/01/09 07:26

これってなぜ伏せられてるのかわかりませんがionicも読み込んでるんですよね？その他にもreset.css的なものなど読み込んでたりしますか？そうゆうのも含めて調整や再設計する必要があると思うのでもし使っているものがあれば全部共有してもらわないと、と思いました。

takamaru_28

2022/01/09 10:47 編集

destyle.cssがcssをリセットするものですが、長すぎて追加できなかったです。必要なものを追加しておきました

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

回答1件

ベストアンサー

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <!-- <link rel="stylesheet" href="css/destyle.css"> -->
6    <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
7    <link rel="stylesheet" type="text/css" href="style.css">
8    <title>Document</title>
9</head>
10<body>
11    <div class="container">
12        <nav class="navigation">
13            <ul  id="page-link">
14                <li class="list active">
15                    <a href="#story">
16                        <span class="icon"><ion-icon name="chatbox-ellipses-outline"></ion-icon></span>
17                        <span class="text">ストーリー</span>
18                    </a>
19                </li>
20                <li class="list">
21                    <a href="#chara">
22                        <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
23                        <span class="text">キャラクター＆声優</span>
24                    </a>
25                </li>
26                <li class="list">
27                    <a href="#midokoro">
28                        <span class="icon"><ion-icon name="glasses-outline"></ion-icon></span>
29                        <span class="text">見どころ</span>
30                    </a>
31                </li>
32                <!-- <div class="indicator"></div> -->
33                <div class="indicator-wrap">
34                    <div class="indicator"></div>
35                </div>
36            </ul>
37        </nav>
38        </div>
39</body>
40<script src='bdd.js'></script>
41<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
42<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
43<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
44</html>

css
1:root{
2    --clr: #fff;
3  }
4  .navigation{
5    position: relative;
6    width: 100%;
7    height: 70px;
8    background:turquoise;
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    border-radius: 10px;
13    margin-top: 15px;
14  }
15  .navigation ul{
16    position: relative;
17    display: flex;
18    width: 100%;
19  }
20  .navigation ul li{
21    position: relative;
22    list-style: none;
23    width: 33vw;
24    height: 70px;
25    z-index: 1;
26  }
27  .navigation ul li a{
28    position: relative;
29    display: flex;
30    justify-content: center;
31    align-items: center;
32    flex-direction: column;
33    width: 33vw;
34    text-align: center;
35    font-weight: 500;
36  }
37  .navigation ul li a .icon{
38    position: relative;
39    display: block;
40    line-height: 75px;
41    font-size: 1.5em;
42    text-align: center;
43    transition: 0.5s;
44    color: var(--clr);
45  }
46  .navigation ul li.active a .icon{
47    transform: translateY(-32px);
48  }
49  .navigation ul li a .text{
50    position: absolute;
51    color: var(--clr);
52    font-weight: 400;
53    font-size: 0.75em;
54    letter-spacing: 0.05em;
55    transition: 0.5s;
56    opacity: 0;
57    transform: translateY(20px);
58  }
59  .navigation ul li.active a .text{
60    opacity: 1;
61    transform: translateY(10px);
62  }
63  .indicator-wrap{
64    position: absolute;
65    width: 33vw;
66    height: 70px;
67    top: -2%;
68    transition: 0.5s;
69  }
70  .indicator{
71    position: relative;
72    top: -52%;
73    width: 70px;
74    height: 70px;
75    margin-left:auto;
76    margin-right:auto;
77    background: #29fd53;
78    border-radius: 50%;
79    border: 6px solid var(--clr);
80    transition: 0.5s;
81  }
82  .indicator::before{
83    content: '';
84    position: absolute;
85    top: 50%;
86    left:-22px;
87    width: 20px;
88    height: 20px;
89    background: transparent;
90    border-top-right-radius: 20px;
91    box-shadow: 1px -10px 0 0 var(--clr);
92  }
93  .indicator::after{
94    content: '';
95    position: absolute;
96    top: 50%;
97    right:-22px;
98    width: 20px;
99    height: 20px;
100    background: transparent;
101    border-top-left-radius: 20px;
102    box-shadow: -1px -10px 0 0 var(--clr);
103  }
104  .navigation ul li:nth-child(1).active ~ .indicator-wrap{
105    transform: translateX(calc(33vw*0));
106  }
107  .navigation ul li:nth-child(2).active ~ .indicator-wrap{
108    transform: translateX(calc(33vw*1));
109  }
110  .navigation ul li:nth-child(3).active ~ .indicator-wrap{
111    transform: translateX(calc(33vw*2));
112  }

修正したポイントとして、まずHTMLに

html
1          <!-- <div class="indicator"></div> -->
2          <div class="indicator-wrap">
3              <div class="indicator"></div>
4          </div>