お世話になっております。
h1にheight 100pxを指定しているのですが
実際画面に表示されるのは80pxで表示されてしまいます。
他に120pxで試したところ96pxで表示がされ、どうやら指定したピクセルが0.8掛けになっているようです。
試しにnavの外に新しい要素を作り100pxで指定しましたが同様でした。
何が影響しているのかわからないので教えていただきたいです。
添付画像はfirefoxの開発ツールです。
自分のモニタサイズは1600 × 900で、1920 x 1080を想定して作成しております。
html
1 2<!DOCTYPE HTML> 3<html lang="jp" /> <!-- 言語の指定 --> 4 <head> 5 <meta name="author" content="作者の名前" /> 6 <meta name="description" content="検索で表示される文章" /> 7 <meta name="keyword" content="ページの,内容を,表す,キーワード" /> 8 <meta charset="utf-8" /> <!-- 文字コードの指定 --> 9 <base href="xxx" /> <!-- 基準のURL --> 10 <link rel="stylesheet" href="css/home.css" type="text/css" /> <!-- 読み込みCSS --> 11 <link rel="icon" type="image/png" href="xxx" /> <!-- アイコンの指定 --> 12 <link rel="canonical" href="xxx" /> <!-- 検索エンジンの基準URL --> 13 <title>サイトタイトル</title> 14 </head> 15<body> 16 <header> 17 <h1> 18 <a href="xxx"><span>sample quest</span></a> 19 </h1> 20 <nav> 21 <ul> 22 <li class="story"><a href="xxx"><span>世界観</span></a></li> 23 <li class="world"><a href="xxx"><span>ストーリー</span></a></li> 24 <li class="charcter"><a href="xxx"><span>キャラクター</span></a></li> 25 <li class="system"><a href="xxx"><span>システム</span></a></li> 26 <li class="special"><a href="xxx"><span>スペシャル</span></a></li> 27 <li class="product"><a href="xxx"><span>製品情報</span></a></li> 28 </ul> 29 </nav> 30 </header> 31</body> 32
css
1html{ 2 width: 100%; 3 height: 100%; 4} 5 6body{ 7 margin: 0; 8 padding: 0; 9 font-size:100%; 10} 11 12h1{ /* TOPの作品タイトルアイコン */ 13 width: 20%; 14 height: 100px; 15 margin: 0; 16 float:left; 17 background-color: #000; 18 } 19 20 21nav{ 22 width:80%; 23 float:left; 24} 25 26ul{ /* ナビゲーションメニュー */ 27 margin: 0; 28 padding: 0; 29 height: 100px; 30 display:flex; 31 list-style:none; 32 background-color: #000; 33} 34 35li{ 36 width:16.666%; 37 text-align: center; 38 background-color: #000; 39} 40 41li a{ 42 display: block; 43 text-decoration:none; 44} 45 46h1{ 47 background-image: url(../img/title.gif); 48 background-repeat:no-repeat; 49 background-position:center; 50 background-size: 75%; 51} 52 53.world{ 54 background-image:url(../img/charcter.gif); 55 background-repeat:no-repeat; 56 background-position:center; 57 background-size: 75%; 58} 59 60.story{ 61 background-image:url(../img/charcter.gif); 62 background-repeat:no-repeat; 63 background-position:center; 64 background-size: 75%; 65} 66 67.charcter{ 68 background-image:url(../img/charcter.gif); 69 background-repeat:no-repeat; 70 background-position:center; 71 background-size: 75%; 72} 73 74.system{ 75 background-image:url(../img/charcter.gif); 76 background-repeat:no-repeat; 77 background-position:center; 78 background-size: 75%; 79} 80 81.special{ 82 background-image:url(../img/charcter.gif); 83 background-repeat:no-repeat; 84 background-position:center; 85 background-size: 75%; 86} 87 88.product{ 89 background-image:url(../img/charcter.gif); 90 background-repeat:no-repeat; 91 background-position:center; 92 background-size: 75%; 93} 94 95span{ 96 visibility: hidden; 97} 98
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/14 07:09