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

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

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

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

Q&A

解決済

1回答

460閲覧

imgの大きさが違って見える

ratezou

総合スコア64

CSS

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

0グッド

0クリップ

投稿2023/01/14 05:27

編集2023/01/14 06:05

サイト作成の勉強中です。

imgの見え方がページによって違うので困ってます。

html

1<img src="../../img/home.png" onclick="location.href='../index.php'" width="32" height="32">

という具合に縦横32pxにしています。
これが、AというページとBというページでサイズが違って見えます。
ぱっと見でAを1とするとBは1/4に見えます。

imgはheaderに入れて使ってます。

AのCSS

1body { 2 font-family: Arial, sans-serif; 3 margin: 0; 4} 5header { 6 height: 48px; 7} 8img { 9 margin: 0; 10 padding: 8px; 11 cursor: pointer; 12} 13main { 14 width: 350px; 15 margin: 0 auto; 16} 17h1 { 18 font-size: 24px; 19 margin: 0; 20} 21ul { 22 margin: 0; 23 padding: 0; 24 margin: 0px 0px 8px; 25} 26li { 27 font-size: 16px; 28 list-style: none; 29} 30 31.bundle { 32 width: 100px; 33 font-size: 16px; 34 text-align: right; 35 margin-left: 24px; 36 margin-right: 8px; 37} 38button { 39 height: 32px; 40 width: 100px; 41 background-color: skyblue; 42 color: black; 43 border: none; 44 border-radius: 8px; 45 cursor: pointer; 46 font-size: 16PX; 47 margin: 4px; 48} 49

BのCSS

1body { 2 font-family: Arial, sans-serif; 3 margin: 0; 4} 5header { 6 height: 48px; 7} 8img { 9 margin: 0; 10 padding: 8px; 11 cursor: pointer; 12} 13main { 14 width: 350px; 15 margin: 0 auto; 16} 17#video { 18 width: 100%; 19 height: auto; 20}

ちなみに、Bのページのvideoはスマホで見たら(350pxなので)画面いっぱいくらいに見えるハズですが、1/2に見えます。

追記1)
スクショを削除しました。
追記2)

<?php ini_set('display_errors', 1 ); error_reporting(E_ALL); require_once(__DIR__ . "/../../app/config.php"); use MyApp\Database; use MyApp\Bundle; use MyApp\Utils; $pdo = Database::getInstance(); $bundle = new Bundle($pdo); $bundle->processPost(); $b = $bundle->get(); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tools</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <img src="../../img/home.png" onclick="location.href='../index.php'" width="32" height="32"> </header> <main> <h1>2F 食堂</h1> <ul> <li><label for="f2a4">A4</label><input id="f2a4" class="bundle" type="number" name="f2a4" onFocus="this.select();" value=<?= Utils::h($b->f2a4); ?>></li> <li><label for="f2a3">A3</label><input id="f2a3" class="bundle" type="number" name="f2a3" onFocus="this.select();" value=<?= Utils::h($b->f2a3); ?>></li> <li><label for="f2b5">B5</label><input id="f2b5" class="bundle" type="number" name="f2b5" onFocus="this.select();" value=<?= Utils::h($b->f2b5); ?>></li> <li><label for="f2b4">B4</label><input id="f2b4" class="bundle" type="number" name="f2b4" onFocus="this.select();" value=<?= Utils::h($b->f2b4); ?>></li> </ul> <h1>3F 会議室</h1> <ul> <li><label for="f3a4">A4</label><input id="f3a4" class="bundle" type="number" name="f3a4" onFocus="this.select();" value=<?= Utils::h($b->f3a4); ?>></li> <li><label for="f3a3">A3</label><input id="f3a3" class="bundle" type="number" name="f3a3" onFocus="this.select();" value=<?= Utils::h($b->f3a3); ?>></li> <li><label for="f3b5">B5</label><input id="f3b5" class="bundle" type="number" name="f3b5" onFocus="this.select();" value=<?= Utils::h($b->f3b5); ?>></li> <li><label for="f3b4">B4</label><input id="f3b4" class="bundle" type="number" name="f3b4" onFocus="this.select();" value=<?= Utils::h($b->f3b4); ?>></li> </ul> <button id="save">Save</button> <button id="done">Done</button> <input type="hidden" id="token" name="token" value="<?= Utils::h($_SESSION['token']); ?>"> </main> </body> <script src="js/main.js"></script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Camera Test</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <img src="../../img/home.png" onclick="location.href='../index.php'" width="32" height="32"> </header> <main> <video id="video" muted="muted" autoplay playsinline></video> </main> <footer> <span>aaaa</span> </footer> </body> <script src="https://unpkg.com/tesseract.js@4.0.1/dist/tesseract.min.js"></script> <script src="js/main.js"></script> </html>

追記3)
マスクしたスクショアップします。
ページA
イメージ説明
ページB
イメージ説明

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

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

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

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

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

m.ts10806

2023/01/14 05:31

幅や高さもcssで指定した場合はどうでしょうか
ratezou

2023/01/14 05:35

回答ありがとうございます。 CSSにも指定したのですが変化ありませんでした。 ページAとページBの全体的なサイズが違うみたいな感じです。 chromeでそんなことが出来るか知りませんが、そういったことをした覚えはありません。
m.ts10806

2023/01/14 05:38

実際のコードを画面キャプチャを提示してください。 CSSは他の要素の影響を受けやすいです。 ただ、同様の要素があるのにページ毎にCSSを定義するのは悪手に思います。 メンテナンス性も悪いですし、今回のように統一感のないレイアウトになりがちです。
ratezou

2023/01/14 05:48

スクショの左上のホームボタンのことをお聞きしています。 よろしくお願いします。
m.ts10806

2023/01/14 05:51

htmlも一通りご提示を。 「他の影響」はhtmlの構造にも言えます(むしろそれが原因の半分) あと、写真での提示はよろしくないかと。 画面に反射してうつっているものから様々な情報がとれます。
ratezou

2023/01/14 05:55

スクショは削除しました。 お気遣いありがとうございます。
ratezou

2023/01/14 06:21

PCで見てみたら、ページAもBも同じ大きさでした。 iOS+Chromeだから発生するようなことがあるのでしょうか・・・?
guest

回答1

0

自己解決

違いは何かなとじーーっと眺めてたところ、metaタグに不一致がありました。
一致させたところ、大きさも同じになりました。
お騒がせしました。

投稿2023/01/14 07:08

ratezou

総合スコア64

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問