htmlソースメモ

 【 マウスでスクロールアンカリングをコントロールしたい 】に載せたデモのコード。 <div style="border:1px solid gray; padding:5px;"> <button onclick="startAutoAdd()">ボックス追加スタート</button> <button onclick="stopAutoAdd()">ストップ</button> <button onclick="startAutoRemove()">ボックス削除スタート</button> <div id="container20251229" style="overflow-anchor:auto;"> <pre class="child-box" style="height:auto;background-color:yellow;"> このボックス：class="child-box" 上に追加される追加ボックス：class="child-box" マウスでアンカーをコントロールするためのＣＳＳ .child-box { overflow-anchor: none !important; } .child-box:hover, .child-box:active, .child-box:focus-within {     overflow-anchor: auto !important; } </pre> <p style="margin-top:300px;background-color:yellow;">常に、overflow-anchor:auto;</p> </div> <button onclick="toggleScrollAnchor()">overflow-anchor:切替</button> <div id="st...

　ほとんどのブラウザはCSS のプロパティoverflow-anchorのデフォルトがauto;だけど、特殊な事情でnone;にされていることがある。私も閲覧中のウェブページで一時的にnone;にすることがある。そして、実際にnone;になっているかどうか確認したい。そのためのブックマークレット。Geminiに作ってもらった。 overflow-anchor確認 　読みやすいように整形したコードは次の通り。 javascript: (function() {     'use strict';     // スタイルを取得するユーティリティ関数     const getStyle = (element, property) => {         return window.getComputedStyle(element).getPropertyValue(property);     };     const elements = document.querySelectorAll('*');     const results = [];     const overflowAnchorProperty = 'overflow-anchor';     // すべての要素を反復処理     elements.forEach(element => {         try {             const computedValue = getStyle(element, overflowAnchorProperty);             // overflow-anchorが 'none' の要素を検出             if (computedValue && computed...

 　いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか Gemini と相談してデモ用のコードを作った。 　スクロールスナップで実現できるようで、 最近ではcssで実現するらしい。JavaScriptを使ったデモのコードは前回書いた。 スクロールを邪魔する「スクロールスナップ」のデモコード（JavaScript） https://html-memo-hitorinezumi.blogspot.com/2025/12/scrollLockDemo.html 　ここでは、CSSを使った単純なコードを残しておく。JavaScriptを使ったデモと比べて吸着力が弱いが、スムーズにスクロールできないので鬱陶しくはある。   scrollLockDemoCSS.html  <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS Scroll Snapによるセクション吸着</title>     <style>         /* ページ全体のリセット */         body { margin: 0; padding: 0; font-family: Arial, sans-serif; }         /* -------------------------------------- */         /* メインのスクロールコンテナ (親要素) */         /* -------------------------------...

 サイドバーのあるウェブページでメインブロックから全面のモーダルウインドウを開いたらサイドバーのコンテンツの一部が隠れなかった問題を再現するためのコード。 メインブロックに 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:...

赤丸の速度 (秒): 青丸の速度 (秒): 更新 オリジナル： 赤丸を青丸が追いかけるアニメーションのコード（正式） <!DOCTYPE html> <html lang="ja"> <head>   <title></title>   <style>     #container {       position: relative;       height: 300px;       width: 300px;       border: 1px solid black;     }     #circle {       position: absolute;       height: 20px; /* 赤丸のサイズ */       width: 20px; /* 赤丸のサイズ */       background-color: red;       border-radius: 50%;    ...

オリジナル： 青丸を赤丸が追いかけるアニメーションのコード <!DOCTYPE html> <html> <head>   <style>     #container {      position: relative;      height: 300px;      width: 300px;      border: 1px solid black;     }     #circle {      position: absolute;      height: 20px; /* 赤丸のサイズ */      width: 20px; /* 赤丸のサイズ */      background-color: red;      border-radius: 50%;       transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */       z-index: 1; /* 赤丸を前面に表示 */  ...

オリジナル： 青丸を赤丸が追いかけるアニメーションのコード <!DOCTYPE html> <html> <head>   <style>     #container {      position: relative;      height: 300px;      width: 300px;      border: 1px solid black;     }     #circle {      position: absolute;      height: 20px; /* 赤丸のサイズ */      width: 20px; /* 赤丸のサイズ */      background-color: red;      border-radius: 50%;      transition: top 1s, left 1s; /* 連続的な移動 */      z-index: 2; /* 赤丸を前面に表示 */   ...

<!DOCTYPE html> <html> <head>   <style>     #container {      position: relative;      height: 300px;      width: 300px;      border: 1px solid black;     }     #circle {      position: absolute;      height: 20px; /* 赤丸のサイズ */      width: 20px; /* 赤丸のサイズ */      background-color: red;      border-radius: 50%;      transition: top 1s, left 1s; /* 連続的な移動 */      z-index: 2; /* 赤丸を前面に表示 */     }    ...

 参考サイト： 【CSS】CSSだけでタブ切り替えを作る方法 - bagelee（ベーグリー） <style type="text/css"> <!-- #timetable{font-size:0;} .content{display:none;} .check{display:none;} #check1:checked ~ #check1_content, #check2:checked ~ #check2_content, #check3:checked ~ #check3_content, #check4:checked ~ #check4_content, #check5:checked ~ #check5_content, #check6:checked ~ #check6_content, #check7:checked ~ #check7_content {display:block;} .label:hover{color:red;} .check:checked + .label{border-bottom: solid 5px red;} .check:checked + .label:hover:after{color:red;} .label{   font-size:36px;   padding:0 5px 0 5px;   border-right: solid 1px gray;   cursor:-moz-pointer;   cursor:-webkit-pointer;   cursor: pointer; } .content{   padding-top:10px; } .time{   width:80px;   font-size:24px;   text-align:right; } .subtime{   width:80px;   font-size:16px;   text-align:right; } .summary{   padding-left:10px;   font-size:16px; } --> </styl...

予約状況 予約状況 時刻 月 火 水 木 金 土 日 0:00～0:30 　 済 　 　 　 　 　 0:30～1:00 　 　 　 　 　 　 　 1:00～1:30 　 　 　 　 　 　 　 1:30～2:00 　 　 　 　 　 　 　 <!DOCTYPE html> <html lang="ja"> <head> <title>予約状況</title> <style type="text/css"> <!-- .border{border:1px solid gray;padding:5px;} .reserved{background-color:gray;font-weight:bold;color:white;text-align:center;} .waiting{background-color:white;} --> </style> </head> <body> <table style="border-collapse:separate;border-spacing:2px 2px;"> <caption style="font-weight:bold;">予約状況</caption> <tbody> <tr> <th class="border">時刻</th> <th class="border">月</th> <th class="border">火</th> <th class="border">水</th> <th class="border">木</t...

 　SSブログの「ひとりネズミの本音」をBloggerに引っ越す方法として、SSブログでエクスポートしたファイルをBloggerでインポートできる形式に変換してからインポートするのが一般的だと思われるが、元のブログの記事を公開されている状態でコピーして、Bloggerにペーストするだけで、引っ越せそうである。「ひとりネズミの本音」の記事数は50。手動コピーの方が早そうなので、検討している。 　その際に引用（<blockquote>タグ）がある記事をペーストしたら、引用部分の文字が極端に大きくなり、しかも中央揃えになってしまった。このままでは引っ越せないので、ネットで検索して次のページを見つけた。 ・ Bloggerで引用スタイルを変更する デフォルトの引用のスタイル。中央揃えで少し字が大きくなっただけ・・・ これは何とかせねばということで、引用スタイルの変更を行います。 （ Bloggerで引用スタイルを変更する ） 　このページに載っているcssを少し変えて使わせてもらった。 ちなみに、「CSSを追加」の場所は今は異なる。 　 「CSSを追加」に載せたコードは次のとおりである。 赤文字 の所は自分好みに変えた。  /*変更後*/ /*フォントサイズ、テキスト位置を変更しました*/ blockquote{ color:$(blockquote.color); font:$(blockquote.font); font-size:medium; text-align:left } blockquote {     position: relative;     padding: 5px 5px;     margin: 14px;     box-sizing: border-box;     font-style: italic;     color: #464646;     border-left: solid 32px #c4c4c4;     background: #f3f3f3;...

 "パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます" height - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/height 次のようなHMLソースで「フッタなど」が上のブロックに重なってしまった。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>height:100%の注意</title> </head> <body> <div style="width:300px;height:400px;"> <h4>タイトル</h4> <div style="background-color:yellow; height:100%; "></div> </div> <div>フッタなど</div> </body> </html> 原因は冒頭の様な仕様のためだった。 height:100%;を使用したのはiframeで高さが包含ブロックいっぱいに広がるようにするためだったのだが、iframeに限ったことではなく、height:100%;を使った時にはそのブロックが包含ブロックをオーバーしてしまうので注意が必要らしい。私が作った 【ホームページ雛形】 では問題が生じなかったので気付かなかった。 この問題を解決するためには次のように包含ブロックに overflow-y:hidden; を指定しておいた方が良さそう。  <!DOCTYPE html> <html lang="ja"> <head> <meta ...