htmlソースメモ

投稿

スクロールを邪魔する「スクロールスナップ」のデモコード（CSS）

12/11/2025 03:58:00 午後

　いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか 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; } /* -------------------------------------- */ /* メインのスクロールコンテナ (親要素) */ /* -------------------------------...

スクロールを邪魔する「スクロールスナップ」のデモコード（JavaScript）

12/11/2025 03:30:00 午後

　いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか 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...

短縮URLを展開するbatファイル

11/03/2025 02:11:00 午前

Gemini作注意：Shift-JISで保存すること。普通にUTF-8で保存すると文字化けが生じる。 chcp 65001 > nul を使ってUTF-8で保存すると、日本語処理で問題が生じる可能性がある。 @echo off REM Use Shift-JIS / ANSI encoding for this bat file :START_LOOP echo. echo ========================================================== set /p short_url="展開したい短縮URLを入力してください: " echo ========================================================== echo. REM Check for empty input if "%short_url%"=="" ( echo 入力がありませんでした。再度入力してください。 goto START_LOOP ) echo 短縮URL: %short_url% echo リダイレクトの追跡を開始します... REM Core command: -L (follow redirects), -v (verbose output), -s (silent/no progress), -o nul (don't download content) REM Filter output for Location: and Host: headers curl -L -v -s -o nul "%short_url%" 2>&1 | findstr /i "Location: Host:" echo. echo 処理が完了しました。 :ASK_CONTINUE set /p continue_prompt="続けて別のURLを展開しますか？ (y/n): " REM y or Y to continue if /i "%continue_prompt%"=="y" goto START_LOO...

textareaが自動的に縦に伸び縮みするJavascript

10/18/2025 07:07:00 午前

　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...

マストドンのアーカイブをcsv形式にするコード

10/12/2025 06:23:00 午後

　mastodon-japan.netサーバーが閉鎖されるとのことなので、アーカイブをダウンロードした。その中に、outbox.jsonがあった。これはテキストエディタで開くには重すぎる。ただし、Windowsの「メモ帳」なら開ける。このoutbox.jsonから重要なデータを抽出してcsv形式にすることにした。jqというものを利用した。 https://jqlang.org/ 　このコードについては全く分からないので、Geminiにコードを作成してもらった。　to_csv.jq というファイルと to_csv.bat というファイルを作成して同じディレクトリーに置き、to_csv.bat を実行すると mastodon_data.csv というファイルが同じディレクトリーに作られる。　画像などの添付ファイルについては、アーカイブのzipファイルの media_attachments フォルダーの中のかなり深い階層に収納されていて、その位置は outbox.json に記載されているので、その位置も抽出することにした。投稿のidと日時とactorとコンテンツとinReplyToと画像などの添付ファイルの位置を抽出したのだが、idとactorはURL形式だった。　また、コンテンツに「"」や「,」が含まれている場合が心配だったが、Geminiによると、「ご使用になった jq のフィルタには、CSVの標準ルールに従ってこれらを自動で処理する仕組みが組み込まれていますので、基本的に列がずれる心配はありません。」とのことだった。最終行の @csv 演算子のおかげらしい。この @csv 演算子が非常に重要で、以下の標準的なCSVルールに従ってデータを安全にエンコードします。カンマ ( , ): （Geminiの嘘だと思ったが正しかった。「データフィールド内にカンマが含まれている場合」に限らず、コンテンツ全体が""で囲まれているから,のままで大丈夫）データフィールド内にカンマが含まれている場合、そのフィールド全体は二重引用符 ( " ) で括られます。例: あ,い,う → "あ,い,う" 二重引用符 ( " ): （Geminiの嘘。コンテンツ内の"は...

康煕部首、CJK部首補助、サロゲートペアの検出（修正版）

9/14/2025 03:53:00 午後

【康煕部首、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" ...

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

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:...