CSS ハンバーガーメニューの３本線の内１つの線だけ太さが異なって表示されてしまう。

ハンバーガーメニューの3本線のコードを書いているのですが、棒線の太さを調節すると、３本線の内1つの線だけが別な太さで表示されてしまいます。

CSSのheight: 1px; /* 横棒の太さ*/を2pxにすると3本とも太さは均一になるのですが、もう少し値を下げて線height:2px;からheght:1px;に下げて細くしようとすると上記のようになってしまいます。
原因はなんでしょうか？

html
1<label for="hamburger" class="c-hamburger-menu__button"><!-- ハンバーガーメニューのボタン -->
2  <span class="c-hamburger-menu__button-mark"></span>
3  <span class="c-hamburger-menu__button-mark"></span>
4  <span class="c-hamburger-menu__button-mark"></span>
5</label>

css
1.c-hamburger-menu__button {
2    display: block;/* ３本線を横から縦並びに配置 */
3    height: 32px; 
4    width: 32px; 
5  }
6
7/* ハンバーガー黒い線のデザイン */
8.c-hamburger-menu__button-mark {
9  background-color: #000; /* カスタマイズしてください */
10  display: block;
11  margin-top: 8px;/* 横棒と横棒の縦の余白*/
12  height: 1px; /* 横棒の太さ*/
13  width: 20px; /* カスタマイズしてください */
14}
15

NKTIDKSG

2023/03/31 02:06

>もう少し値を下げて線を細くしようとすると上記のようになってしまいます。もう少し値を下げて、というのは値をいくつにした時しょうか？画像の状態が再現するコードを掲載してください。

gujhufiugho

2023/03/31 05:43

.c-hamburger-menu__button-mark {height:2px;}からheight:1px;にした時です。

NKTIDKSG

2023/03/31 06:47

>３本線の内1つの線だけが別な太さで表示されてしまいます。であれば、キャプチャを見る限り、真ん中は1pxですから、別の太さになってしまっているのは上下の2つでは？

gujhufiugho

2023/03/31 08:27

すみません。説明が分かりにくかったようです。３本線の太さを全て1pxの太さで揃えたいです。

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

回答1件

ベストアンサー

元々「1px」というのは、物理的な1ドットを表す単位でした。しかし、最近はディスプレイの解像度が上がってきているため、「1px」をそのまま表示すると小さすぎる場合があります。そのため、環境によっては表示倍率( Device Pixel Ratio )が設定されています。

倍率を確認したい場合、ブラウザで F12 を押して開発者ツールを起動し、その中のコンソールで window.devicePixelRatio と入力してみてください。
私の場合は 1.5 と表示されましたが、この値は環境によって異なります。

Device Pixel Ratio で表示がズレる例

例えば、 window.devicePixelRatio が 1.5 の環境で考えてみます。

css で 2px と指定したら、画面上では 1.5倍されて 3px で表示されます。
端数が出ないので、常に 3px になってくれます。

一方 css で 1px と指定したら、1.5倍すると 1.5px ですが、そのまま表示するのは物理的に不可能です。
なので、端数を切り捨てて 1px または切り上げて 2px で表示します。

これが、同じピクセル数を指定したはずなのに見た目の太さが変わってしまう原因です。

解決方法

設定したい高さの2倍(2px)を指定して scaleY(0.5) で半分にするとイイ感じに揃います。

diff
1  .c-hamburger-menu__button-mark {
2    background-color: #000;
3    display: block;
4-   margin-top: 8px;
5-   height: 1px;
6+   margin-top: 7px;
7+   height: 2px;
8+   transform: scaleY(0.5) translateY(1px);
9    width: 20px;
10  }