htmlソースメモ

投稿

ラベル（バグ）が付いた投稿を表示しています

モーダルウインドウで隠れないコンテンツがあるバグのコード

7/19/2025 07:36:00 午後

サイドバーのあるウェブページでメインブロックから全面のモーダルウインドウを開いたらサイドバーのコンテンツの一部が隠れなかった問題を再現するためのコード。メインブロックに z-index:0 があることで、メインウインドウとは親が異なるサイドバーは重なった場合にメインウインドウの上面に表示してしまう。モーダルウインドウはメインウインドウ内にあるため、z-indexの値を大きくしてもメインウインドウ内で最上面に表示されるだけで、その後にサイドバーを描画したらサイドバーの方が上面になる。htmlのコードでサイドバーの方を先に記述していれば、サイドバーの後にメインウインドウを表示するので、重なった場合もメインウインドウの方が上面になり、モーダルウインドウは最上面になる。モーダルウインドウをメインウインドウの外に出せば、 z-indexの値が効果を持つようになり、最上面に表示させることができる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure Original Code</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> #main{ z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */ position: relative; /* z-indexを有効にするため */ border: 3px dashed #000; padding: 10px; text-align:...

onloadでiframeに追加したsandbox属性が無視される。

10/17/2023 05:40:00 午後

対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる）の続きのようなもの。そもそもの発端「 iframe を含むページが先頭から表示されない場合がある。（「#～」との関係）」そこ対処法でiframeにsandbox属性を追加することにしたが、iframeの中を切り替える必要が生じて、そのうちの一つがGoogleカレンダーで、Googleカレンダーを埋め込みたいが、sandbox属性が邪魔をする。 test3-1-0.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>バグ？</title> </head> <body> <div style="height:200px;"> バナー、ヘッダなど。 </div> <div style="height:250px;"> <h4>↓↓↓iframe↓↓↓</h4> <iframe src="test00-0.html#y500" name="test00" id="test00" title="test00" sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts"></iframe> </div> <div style="height:1000px;"> <a href="test3-1-0.html">このページへのリンク</a><br> iframe内切替<br> [<a href="test00-0.html#y500" t...

このブログに自分がアクセスしたときのページビューをカウントしますか？

12/26/2021 02:32:00 午後

ブラウザを閉じるたびに無効になってしまう設定。・ページビュートラッキング設定（htmlソースメモ）・ページビュートラッキング設定（ひとりネズミの本音）このブログに自分がアクセスしたときのページビューをカウントしますか？自分のページビューを統計情報に含めないように Blogger を設定することができます。それには、Blogger でブラウザにブロック Cookie を追加する必要があります。複数のブラウザをご使用の場合は、各ブラウザを開いてこの設定を行ってください。 □このブログの自分のビューを追跡しない以下はクッキーが削除されないようにするフォーム。参考：「自分のページビューの追跡を管理」で「このブログの自分のビューを追跡しない」にチェックを入れているので、自分のアクセス数はカウントされないはずです。 …省略… これはどういうことなんでしょう？クッキーの有効期限/残存期間がSessionということは、Sessionが終了したら、即ちブラウザを閉じたらクッキーは消滅し、「自分のページビューの追跡を管理」で行った設定は無かったことになるのです。（あなたのブログはページビューが水増しされてませんか? - after work lab ） iOS SafariではBlogger：ページビュー設定(6)iOS Safari:Blogger管理画面での設定は不要でみたように、ページビューを設定したいサイトを開いた状態で、アドレスバーにjavascript:document.cookie="_ns=2;";を入力して実行すれば設定できました。ブラウザのアドレスバーにJavaScriptを入力して実行するで調べたようにFirefox以外ならiOS Safariと同じように設定できそうです。各ブラウザについて有効期限やドメインなどは設定せずに単純に_ns=2だけのCookieを設定して挙動を調べてみました。 IE8、IE10、Firefoxではブラウザを閉じると_ns=2が消えてしまいました。 Cookieの有効期限を設定していないのでCookieの仕様通りの動きです。ところがChromeではブラウザを再起動しても_ns=2が残っていました。（ Blogger：...

対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる）

5/28/2021 05:14:00 午後

【Chromeのバグ対策：URLに「#～」を付けずにscrollToを使って「id=～」までスクロールさせる】の続き。【Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題】の続きの続き。 2021/5/28 16:00頃まず、Chromeだけの問題ではない、Firefoxでは起こらないが、Chromiumベースのブラウザ（Microsoft Edge、Opera）でも起こり、Internet Explore でも起こることが確認された。これまでの所、問題が起こらないのはFirefoxだけ。・ iframe を含むページが先頭から表示されない場合がある。（「#～」との関係）バグ？を再現するソース。 test3-0.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>バグ？</title> </head> <body> <div style="height:200px;"> バナー、ヘッダなど。 </div> <div style="height:250px;"> <h4>↓↓↓iframe↓↓↓</h4> <iframe src="test00-0.html #y500 " id="test00" title="test00"></iframe> </div> <div style="height:1000px;"> <a href="test3-0.html">このページへのリンク</a> </div> </body> </html> test00-0.html <!DOCTYPE html> <html ...

BlueGriffonのバグ：tableタグ内のtdタグで「セルの分割」をするとtdタグではなくtbタグが作られて失敗する

5/19/2021 07:58:00 午前

2021/5/19 7:55頃。 BlueGriffonはWYSIWYG方式でウェブページの編集が行えるフリーソフトウェアで最初からウェブページを作成するとソースが汚くなるが編集ならば汚くなりにくく便利なソフト。BlueGriffonにはいくつかのバグがあるらしく、空行が勝手に挿入されたり、新たに保存したら別名で保存する時に保存用ダイアログが表示されずに反応が無くなって保存できず強制終了せざるを得なくなったりするバグには遭遇していたが、今回、表の編集を試したところ、致命的なバグに遭遇した。元のソース。 <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>bluegriffonの表修正のバグ：セルの分割に失敗する</title> <style type="text/css">  </style> </head> <body> <table> <tbody> <tr><th><br></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr> <tr> <th>1</th> <td>A1</td> <td...

Chromeのバグ対策：URLに「#～」を付けずにscrollToを使って「id=～」までスクロールさせる

5/13/2021 11:14:00 午前

【Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題】の続き。 2021/5/13 11:00頃 Chromeのバグを再現するソース test3.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Chromeのiframeのバグ？</title> </head> <body> <div style="height:200px;"> バナー、ヘッダなど。 </div> <div style="height:250px;"> <h4>↓↓↓iframe↓↓↓</h4> <iframe src="test00.html #y500 " id="test00" title="test00"></iframe> </div> <div style="height:1000px;"> <a href="test3.html">このページへのリンク</a> </div> </body> </html> test00.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>iframe内</title> </head> <body> <p style="height:500px;">iframe内</p> <p style="height:500px;" ...

Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題

5/06/2021 07:57:00 午後

【iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題】の続き。 test.html http://hitorinezumi.html.xdomain.jp/test.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Chromeのiframeのバグ</title> <style>  </style> </head> <body> <div id="block_banner"> バナー、ヘッダなど。 </div> <div id="container"> <h4>↓↓↓iframe↓↓↓</h4> <iframe src=" YouTubeLive.html #top " id="Schedule" title="予定表"></iframe> </div> <div style="height:1000px;"> <a href="test.html">このページへのリンク</a> </div> </body> </html> "YouTubeLive.html#top"の所は何...

iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題

4/23/2021 06:32:00 午後

テストソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>予定表</title> <style>  </style> </head> <body> <div id="block_banner"> </div> <div id="container"> <h4>予定表</h4> <iframe src="Schedule.html #Tuesday " id="Schedule" title="予定表"></iframe> </div> </body> </html> 暫定的なテストページ http://hitorinezumi.html.xdomain.jp/template/timetable/index0.html（削除済み） iframeのsrcが上記のように「Schedule.html#Tuesday」とページ内リンク（#～）付きだとスマホでリンク先から飛んできた時に親ページの先頭から表示するのではなく、iframeの所までスクロールして表示されてしまう。まるで親ページのページ内リンクに飛んでいるかのよう。確認したスマホの環境は次の通り。...