質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1017閲覧

CSS heightのpxが0.8掛けされる

shabo

総合スコア24

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/14 07:00

編集2017/02/14 07:01

お世話になっております。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ブラウザで、Ctrl+0 をしてみてください。ズームされている可能性があります。

投稿2017/02/14 07:03

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shabo

2017/02/14 07:09

いただいた回答で解決しました。 コードに原因があるばかりと思い込んでいましたが初歩的な問題でお恥ずかしいです。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問