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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

3044閲覧

画面をズーム拡大、縮小すると、要素間に白い隙間が空くのはなぜ?

Silky

総合スコア34

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/09/11 23:04

編集2019/09/11 23:05

Googleクロームの画面の拡大、縮小機能(ズーム)を使用すると、要素と要素の間に白い隙間ができます。
これは何故なのでしょうか?

下記のコードでは長方形の要素と三角形の要素を合体させたものですが、
ブラウザ100%(拡大、縮小なし)の場合には正常の表示なのですが、
90%や110%に変更すると2つの要素の間に白い隙間ができてしまいます。。

イメージ説明

ちなみにコードは下記の通りです。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <div class="test__desc"> <h2>テキストテキストテキスト</h2> </div> </body> </html>
.test__desc{ font-size: 3rem; color: #ffffff; text-align: center; width: 100%; height: 80px; line-height: 80px; background-color: #AAAAAA; position: relative; } .test__desc:after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border-color: #AAAAAA transparent transparent transparent; border-style: solid; border-width: 28px 28px 0; transform: translate(-50%, 100%); content: ""; }

もしご存じの方や、原因の推測等あればよろしくお願いいたします。

◆クロームのズーム機能はこちらのことです。
https://support.google.com/chrome/answer/96810?hl=ja

◆私の環境
Google chromeバージョン: 76.0.3809.132(Official Build) (64 ビット)

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSS

1transform: translate(-50%, 95%);

に変えてみてください。

CodePen

ちなみにiOSブラウザでも同様の挙動が確認できました。
pxの計算の関係では?

投稿2019/09/11 23:20

編集2019/09/12 11:12
kyoya0819

総合スコア10429

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

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

Silky

2019/09/12 00:52

ご回答ありがとうございます! 今外出先で頂いたコードは試すことはできないのですが、、 Translateについて、何故第二引数を100%から99%にするのでしょうか?
kyoya0819

2019/09/12 01:23

100%だと要素の下にぴったりくっつきます。 99%にすると三角形と四角形が少しかぶります。 それによって三角形と四角形が離れて背景の白い線が出ることを防止できます。 50%などの他の値にしてみると100%や99%がどのような定義かわかり後学に活かせると思います。
Silky

2019/09/12 02:18

なるほど。。ありがとうございます!帰ったら、早速確認してまます!
kyoya0819

2019/09/12 03:13 編集

// 勘違いだったので削除 //
Silky

2019/09/12 11:09

>// 勘違いだったので削除 // やはり倍率を変えると白い線が見えてしまいました。。 これはよくあることなんですかね?他のウエブサイトも同じような事例がないか見てみます。 >50%などの他の値にしてみると100%や99%がどのような定義かわかり後学に活かせると思います。 その通りですね。ただのコピペじゃなくていろいろ試して動きを把握することを大事にします。 ありがとうございます。
kyoya0819

2019/09/12 11:12 編集

もう少し値を小さくしてみるとどうでしょう? 回答追記しました。
Silky

2019/09/12 11:15

99%はまだ白い線が出たんですが、transform: translate(-50%, 98%);から白い線が出なくなりました! ありがとうございました!
Silky

2019/09/12 11:16

そうですね。余裕をもって95%くらいにしておいたほうがいいかもれしれないですね!非常に助かりました。ありがとうございます。
kyoya0819

2019/09/12 11:23 編集

おそらく原因ですがpxの計算だと思います。 ぴったりにするとtranslateの動かすpx値が1未満になってしまって繰り上げになって余計に下に動かしすぎてしまい微妙に余白が出るものと思われます。 同様の理由で99%もダメだったと思われます。 95%あたりが良いかもしれません。(文字が重ならない範囲で)
Silky

2019/09/12 11:27

なるほど、pxの計算が原因かもしれないんですね。 なら、やっぱり文字が重ならないよう余裕をもって95%くらいがいいですね 勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問