htmlソースメモ

　数式の画像をコピーする必要が生じたので、数式のコードを入力したら数式に変換して表示してくれるページが欲しくなった。他のサイトに用意されてはいるが、複雑な機能はいらないので自分で用意することにした。コードはGeminiに教わった。ウィンドウの左側にTeXを入力すると右側に数式が表示される仕組み。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <title>MathJax リアルタイムプレビュー</title>     <script>         window.MathJax = {             loader: { load: ['[tex]/empheq'] },             tex: {                 packages: { '[+]': ['empheq'] },                 tags: 'ams',                 inlineMath: [['$', '$'], ['\\(', '\\)']]             },             chtml: {                 displayAlign: 'left'             }     ...

 【 マウスでスクロールアンカリングをコントロールしたい 】に載せたデモのコード。 <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...

　一部のマストドンでmp3動画（映像はマストドンが付加）を含む投稿の下の投稿に移動した後にmp3動画の投稿に戻れないバグがあったので、それに似せたデモ。実際の原因は別にあるが、同じ対処法が使えた。   　下のコードでscroller内に見えなくなったarticleは内側のboxを削除し、articleタグにheightを記載する。scroller内に見えている場合はboxを生成し直し、articleタグにheightは削除される。各articleのheightはboxが存在する時に計算され170pxであるが、隠れてboxが存在しない場合も170pxが保たれる。ただし、「コンテンツ #2」だけは隠れている時のheightを修正できて、大きくすると、「コンテンツ #2」が隠れた後に「コンテンツ #2」を再表示しにくくなる。そのような時の対処法として「overflow-anchor: none;」がある。ただし、マストドンの方はスムーズにスクロールするが、このデモでは、揺れながらスクロールされる。 test20251213-1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール妨害の再現と対処策のデモ</title> <style>     /* スクロールコンテナ */     .scroller {         height: 350px;         overflow-y: scroll;         border: 2px solid #3498db;         position: relative;     }     /* リスト全体 */     .list-container {         width: 100%;   ...

 　いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか Gemini と相談してデモ用のコードを作った。 　スクロールスナップで実現できるようで、 最近ではcssで実現するらしい。  Scroll snap (スクロールスナップ) - MDN Web Docs 用語集 | MDN https://developer.mozilla.org/ja/docs/Glossary/Scroll_snap CSS スクロールスナップ - CSS | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Scroll_snap   　ここでは、JavaScriptで作ってみた。 scrollLockDemo.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ロック/非ロック混在 スナップバックデモ</title> <style>     body { margin: 0; padding: 0; }     /* スクロールコンテナは相対配置にし、絶対配置の子要素の基準とする */     .scroll-container {          height: 100vh;          width: 100vw;          overflow-y: scroll;          scroll-behavior: smooth;         position: relat...

 　textareaに入力した文字が増えた時に自動的に縦に伸びるコードはcssだけでは実現できないらしく、Javascriptが必要らしい。その為のコードをGeminiに教わったのだけど、外側にdivの枠があると、そのdivの高さを超えた場合にtextareaのスクロールバーだけでなく、その外側にdivのスクロールバーが現れて、見た目が悪いだけでなく使いにくくなる。そこで、Javascriptでtextareaが overflow:hidden; になるようにする。cssで overflow:hidden;にすると、Javascriptが無効な場合にスクロールバーが現れなくなるのでダメだそうだ。 　実験用のコードは次の通り。 <div style="width:300px; height:100%; overflow:auto; border:1px solid;"> <textarea id="autoResizeTextarea" style="resize:none; width:100%; min-height:100px; overflow:auto; "> １２３４５６７８９０１２３４５６７８９０１２３４５６７８９０ </textarea> </div> <script> document.addEventListener('DOMContentLoaded', () => {     const textarea = document.getElementById('autoResizeTextarea');     const minHeight = 100; // CSSのmin-heightと合わせる     textarea.style.overflow = 'hidden'; // textareaにスクロールバーが表示されないようにする     function adjustHeight() {         // textareaの文字が減った場合にサイズを縮める         textarea.sty...

【康煕部首、CJK部首補助、サロゲートペアの検出】 のコードでは「異体字セレクタ」を含む文字の検出で問題が生じたので、修正したものを作成した。そのコード。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="description" content="康煕部首とCJK部首補助を検出して修正案を示したり、サロゲートペアを検出してUnicodeを示す">     <title>康煕部首、CJK部首補助、サロゲートペア等の検出</title>     <style>         body { font-family: sans-serif; }         table { border-collapse: collapse; width: auto; /* テーブルの幅を内容に合わせて調整 */ }         th, td { border: 1px solid #ccc; padding: 8px; text-align: left; white-space: nowrap; /* セルの内容が折り返されないように */ }         th { background-color: #f0f0f0; }     </style> </head> <body>     <h1>康煕部首、CJK部首補助、サロゲートペア等の検出</h1>     <textarea id="inputText" rows="10" ...

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

 　Webページの一部（例：id=" kashi_area "）をブラウザの新しいタブで表示するためのブックマークレット。表示しているWebページではテキストを取得できず、その所得したいテキスト部分のidが分かっている場合に利用する。  javascript:(function(){     const element = document.getElementById(" kashi_area ");     if (element) {         const newWindow = window.open();         newWindow.document.write(element.innerHTML);         newWindow.document.close();     } else {         alert("要素が見つかりません");     } })();

ウェブページに康煕部首、CJK部首補助、サロゲートペアが含まれているか確認するためのブックマークレットをGeminiに作ってもらった。サロゲートペアは「CJK統合漢字拡張B以降」と表現している。 javascript:(function() {     const patterns = {         "康煕部首": /[\u2F00-\u2FDF]/g,         "CJK部首補助": /[\u2E80-\u2EFF]/g,         "CJK統合漢字拡張B以降": /[\u{20000}-\u{2FFFF}]/ug,         "絵文字": /[\u{1F000}-\u{1FFFF}\u{1F300}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F1E6}-\u{1F1FF}\u{1F191}-\u{1F251}\u{1F004}\u{1F0CF}\u{1F170}-\u{1F171}\u{1F17E}-\u{1F17F}\u{1F18E}\u{3030}\u{3297}\u{3299}\u{FE00}-\u{FE0F}\u{1F018}-\u{1F02F}]/ug     };     const bodyText = document.body.innerText;     const foundChars = [];     for (const [name, pattern] of Object.entries(patterns)) { ...

　TextAreaに行番号を付加するのは、折り返しでも行番号が追加されてしまうコードか、折り返しを禁止するコードしか、作ることができず、難しい。そこで、キャレットの位置で行番号が分かるようなコードを用意することにした。この場合、折り返して数行に見えてもそれは同じ行としてカウントされるので、テキストエディタで表示される行番号と同じになる。コードはGeminiに教わった。 <!DOCTYPE html> <html> <head>     <title>TextArea キャレット行番号取得</title> </head> <body>     <textarea id="inputText" rows="10" cols="50"></textarea>     <div id="caretLineNumber">現在のキャレット行番号: 1</div>     <script>         const textarea = document.getElementById('inputText');         const caretLineNumberDiv = document.getElementById('caretLineNumber');         function updateCaretLineNumber() {             const caretPosition = textarea.selectionStart;             con...

康煕部首を検出して修正案を表示するコード をGeminiに作ってもらったが、CJK部首補助やサロゲートペアも問題を起こしそうなので検出する必要が生じた。そこで、CJK部首補助も検出して修正案を表示できるようにコードを変更し、サロゲートペアを検出して表示するコードも作成してもらった後、それらをまとめた。  「異体字セレクタ」を含む文字の検出で問題が生じたので、修正したものを作成した。 【康煕部首、CJK部首補助、サロゲートペアの検出（修正版）】    以下は修正前のコード。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="description" content="康煕部首とCJK部首補助を検出して修正案を示したり、サロゲートペアを検出してUnicodeを示す">     <title>康煕部首、CJK部首補助、サロゲートペアの検出</title>     <style>         body { font-family: sans-serif; }         table { border-collapse: collapse; width: auto; /* テーブルの幅を内容に合わせて調整 */ }         th, td { border: 1px solid #ccc; padding: 8px; text-align: left; white-space: nowrap; /* セルの内容が折...