お世話になっております。 h1にheight 100pxを指定しているのですが実際画面に表示されるのは80pxで表示されてしまいます。他に120pxで試したところ96pxで表示がされ、どうやら指定したピクセルが0.8掛けになっているようです。試しにnavの外に新しい要素を作り100pxで指定しましたが同様でした。何が影響しているのかわからないので教えていただきたいです。添付画像はfirefoxの開発ツールです。自分のモニタサイズは1600 × 900で、1920 x 1080を想定して作成しております。 ![イメージ説明](877bddbf0967d8261c7858fa13062c3d.png) ```html サイトタイトル

sample quest

``` ```css html{ width: 100%; height: 100%; } body{ margin: 0; padding: 0; font-size:100%; } h1{ /* TOPの作品タイトルアイコン */ width: 20%; height: 100px; margin: 0; float:left; background-color: #000; } nav{ width:80%; float:left; } ul{ /* ナビゲーションメニュー */ margin: 0; padding: 0; height: 100px; display:flex; list-style:none; background-color: #000; } li{ width:16.666%; text-align: center; background-color: #000; } li a{ display: block; text-decoration:none; } h1{ background-image: url(../img/title.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } .world{ background-image:url(../img/charcter.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } .story{ background-image:url(../img/charcter.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } .charcter{ background-image:url(../img/charcter.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } .system{ background-image:url(../img/charcter.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } .special{ background-image:url(../img/charcter.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } .product{ background-image:url(../img/charcter.gif); background-repeat:no-repeat; background-position:center; background-size: 75%; } span{ visibility: hidden; } ```

	@@ -1 +1 @@
1	- CSS heightのpxが20％される
1	+ CSS heightのpxが0.8掛けされる

質問編集履歴