Q&A
ご提示のコードを試してみましたが、灰色の線は確認できませんでした。
問題が再現するコードをご提示ください。
１．実現したいこと
下に表示される、灰色の線だけを消したい
※実際、この問題は解決済みです。
ただ、この解決策がなぜ有効なのかわからないので、説明していただける方を探しております。
実際のコードはないですが、スクショでわかる方を探しております。
２．発生している問題
私が行ったことは、デベロッパーツールを使って内側から要素を１つずつ消していきました。
そして、2つの<iframe> を削除した時に初めて灰色の線が消えました。
つまり、以下の<iframe> が灰色の線を表示させているようです。
HTML
1<iframe id=parent-iframe30> 2<iframe id=parent-iframe40>
３．解決したコード
2つの <iframe> に次のCSSコードを反映させれば、灰色の線が消えました。
{display: none;}
しかし、そうなってしまうと表示させたい内容も消えてしまいます。
そこで、内容は表示させたまま、灰色の線だけを消すには次のCSSコードにすればうまくいきました。
{display: table;}
しかし、なぜこのコードでうまくいったのか理由がわかりません。
４．試してみたこと
実際、コードを見ないとわからないかもしれません。
もしかしたら、他が原因なのかもしれません。
心当たりがある場合は教えていただけるとありがたいです。
５．補足情報
ちなみに、補足情報です。
以下のコードを足しても、変化はなかったです。
<iframe frameborder=0>
スクショを見ていただければわかると思います。
そのコードは2つの <iframe> にすでに記述済みです。
━━━━━━━━━━━
1-border や outline はNG
━━━━━━━━━━━
2-display：none でも消えるが中身も一緒に消える
3-やっぱり display：none では思うようにはいかない
━━━━━━━━━━━
4-display：table で消えた
━━━━━━━━━━━
5-border や outline を消しても OK
━━━━━━━━━━━
6-display：table を消すとやっぱり NG
━━━━━━━━━━━
7-display：table 完成
ご回答ありがとうございます。
しかし、コード量が多すぎてコンパクトにこのエラーを再現することができません。
おそらく、ベーシック認証されているので、URLからチェックしていただくことも現在できない状況です。
もし、URL のベーシック認証が解除されたら、再度ご連絡差し上げます。
タイミングが合えばぜひもう一度アドバイスいただければありがたいです。
先日は私からの質問に丁寧にご回答いただきまことにありがとうございます。
只今、Basic 認証が解除されています。
もし、お時間がありましたら、実際にデベロッパーツールで調べることができます。
https://kmtest.gunkanjima-tour.jp/
該当の箇所はスマホサイズになった際、上部に表示される３つのボタンの内一番左の青いボタン『運航状況』です
=========================
前回、私からの質問は{display: table;}だけを限定して質問させていただきました。
しかし、他にも試してみると以下のものでもグレーの線は消えました。
・display: block;
・display: flex;
・display: grid;
・display: table-cell; など滅多に使わないtable 類のコードではほとんど消えます
私は勝手に以下のことを予想していました。
「<iframe>は初期値として display: block; を持っているので、コードを書く意味はない」
しかし、この仮説は間違っていました。
確かに、ブロック要素かもしれませんが、書くことでグレーの線は消えました。
ちなみに、以下の場合ではグレーの線は消えません。
・display: inline;
・display: inline-block;
インライン要素が含まれると上手くできないみたいです。
もし、お時間がゆるし解説できるのであればよろしくお願いいたします。
問題を把握しました。回答します。
回答2件
0
ベストアンサー
その灰色の線はスクロールバーです。
現象を端的に説明するサンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/9nhb8s05/
html
1 <div> 2 <img src="http://placehold.jp/150x150.png?text=" alt=""> 3 </div> 4 <div> 5 <p>ブロック要素の場合はスクロールバーが出ない</p> 6 </div>
css
1 div { 2 width: 300px; 3 overflow: auto; 4 } 5 6 img, 7 p { 8 width: 100%; 9 margin-right: 10px; 10 }
まず、なぜスクロールバーが出るか、について説明します。
iframeのスタイルを見るとstyle="width: 100%; margin: 0px 1em 0px 0px;となっています。ですので、横幅100%（親要素と同じ幅）に加えてマージンが1emあるので、親要素から必ずはみ出すことになります。
親要素のスタイルを見るとoverflow-y: autoとなっており、そのためoverflow-x: autoになりますので、親要素からはみ出す要素がある場合はスクロールバーが発生する、ということです。
次に、なぜdisplay:tableでスクロールバーが消えるか、について説明します。
iframeのdisplayはデフォルトでinlineのところ、display:tableによりblockになり、そのために右マージンが計算されなくなり、オーバフローしなくなっています。
なぜ、ブロックになると右マージンが消えるのかについてですが、これはCSS仕様では over-constrained（過剰制限）と説明されているものです。詳しく説明すると長くなりますが、ブロックの「左マージン+左ボーダー+左パディング+横幅+右パディング+右ボーダー+右マージン」が親要素の幅と異なる時は、右マージンを無視して親要素の幅に合わせなさい、という仕様です。これにより右マージンが0として扱われています。
参考：
ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible/clip はそれぞれ auto/hidden と計算される
overflow-y - CSS: カスケーディングスタイルシート | MDN
二つの値の構文に対応しているブラウザーは、 display: flex や display: grid などの内部表示種別のみが指定されていると、外部表示種別を block に設定します。
<display-inside> - CSS: カスケーディングスタイルシート | MDN
If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true.
Visual formatting model details
投稿2022/04/28 02:26
編集2022/04/28 02:55総合スコア36852
とても、わかりやすく説明していただいてありがとうございます。
実際<iframe>はどっかからコードをコピペする程度です。
なかなか自分でコードを記述することがないので、性質をよく熟知しておりませんでした。
今回はかなり詳しく説明していただき勉強になりました。
ベントアンサーさせていただきます。
0
実行して回答しているわけではないので、推測の話になってしまう点はすいません。
何故治るのか...というより解決の仕方の説明みたいな感じです。
私なら同じ現象に出会った時に、まず下に出てくるグレーの色を線だとは思わないですね🤔
なぜなら、線の設定が問題なら上下左右に出てくるのが自然では？と思うからです。
（border-bottomを使っているなら別ですが👀）
なので、おそらくサイズの調節ミスで、背景がはみ出ているのでは無いか？とまず疑います。
こんな感じで👀（緑の部分がそうです。iframeの下側にpaddingをつけて、iframeの背景を緑にしています）
すぐに試せる方法としては、iframeより外側の要素の背景、iframe自体の背景、iframeの参照先の背景、を全て変更してみるのも手です。開発時に背景色をカラフルにするのは結構デバッグには便利だったりしますよ😊
もしくは、google.comとか信頼があるページを参照してみますね👀
それでも下にグレーが現れるならiframeを呼んでいる側の原因でしょう。
もしgoogleだと治るならiframeの中身のページに問題があるかもと考えます。
iframeの表示先を背景が透明なページ（htmlやbodyのbackgroundが透明）に一度変更してテストしてみるのも手かな？🤔
そうしたらまずiframe自体の背景が分かりますよね？それが今回のようにグレーなら、背景の原因がかなり濃厚なのでは無いでしょうか？
display: table;にすると見た目上は治るということですが、今テストしている環境で治っているだけの可能性もあるのでやはり気持ち悪いですよね。（だからこそ質問しているのだと思いますが😊）
後考えられるとしたら、スクロールバーという可能性もありますね👀
特にiPhoneのスクロールバーは特徴的（基本的にはバーが表示されず、スクロール時にのみ半透明のグレーが出てくる）なので、怪しいかもです👀
display: table;ではスクロールバーが表示されないみたいな理由で治ってたり？
最後に、テスト環境だけの問題という可能性も一応残っていますよ👀
iPhone 12 Proのサイズでテストしていますが、実機だと治るなんてこともざらにあります。
アプリの開発とかでもiPhoneシミュレータで実行しているときに表示が上手くいかなくて四苦八苦していたら、実機では治る...よくよく調べるとシミュレータのエラー...なんて経験があります😑
私はそんなのが嫌いなので、HPを作る時はテストサーバーもローカルでは無くサーバーに上げるタイプです😅
その場所には自分しかアクセス出来ない仕組みを作ってからWeb経由でテストします。
参考になれば幸いです😊
投稿2022/03/27 16:16
編集2022/03/27 16:26
総合スコア322
とても、詳しい解説ありがとうございます。
確かに、 border ではなく背景とは想像しませんでした。
しかし、それなのに table で消えるものまた不思議ですね。
今、このサイトはベーシック認証されているので一般公開されていません。
一般公開されたら、実際にみていただきたく思いました。
もちろん、時間の余裕があればで問題ありません。
見るのは全然構いませんよ😊
私はどちらかというとアプリ方面から勉強しているので、Webはまだまだの所もありますが😅
「display: table」で消えるのは不思議なので、それでOKとするかは考えどころですね🥺
私が昔働いていた環境なんかだと「理由が分からないコード=NG」という方針だったので他の方法で解決するか、公式ドキュメントなどで根拠を述べるように指導されましたね👀（まぁ...金に関わるコードでもあったので当然かもしれませんが😅）。
今のところOKにしておいて、解決策を模索する方針もあるでしょうね😊
先日は私からの質問に丁寧にご回答いただきまことにありがとうございます。
只今、Basic 認証が解除されています。
もし、お時間がありましたら、実際にデベロッパーツールで調べることができます。
https://kmtest.gunkanjima-tour.jp/
該当の箇所はスマホサイズになった際、上部に表示される３つのボタンの内一番左の青いボタン『運航状況』です
=========================
前回、私からの質問は{display: table;}だけを限定して質問させていただきました。
しかし、他にも試してみると以下のものでもグレーの線は消えました。
・display: block;
・display: flex;
・display: grid;
・display: table-cell; など滅多に使わないtable 類のコードではほとんど消えます
私は勝手に以下のことを予想していました。
「<iframe>は初期値として display: block; を持っているので、コードを書く意味はない」
しかし、この仮説は間違っていました。
確かに、ブロック要素かもしれませんが、書くことでグレーの線は消えました。
ちなみに、以下の場合ではグレーの線は消えません。
・display: inline;
・display: inline-block;
インライン要素が含まれると上手くできないみたいです。
もし、お時間がゆるし解説できるのであればよろしくお願いいたします。
あなたの回答
tips
プレビュー
