htmlソースメモ

投稿

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

デモ「マウスでスクロールアンカリングをコントロールしたい」のコード

12/29/2025 10:26:00 午前

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

Webページ内のidのinnerHTMLを新しいタブで開くためのブックマークレット

7/09/2025 09:25:00 午前

　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("要素が見つかりません"); } })();

TextAreaのキャレットの位置で行番号を取得するコード

4/30/2025 11:40:00 午後

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

Javascriptを使わずCSSだけでタブ切り替えのタイムテーブルを作るソース

10/10/2022 06:23:00 午後

参考サイト：【CSS】CSSだけでタブ切り替えを作る方法 - bagelee（ベーグリー） <style type="text/css">  </styl...

手動で予約状況を入力する場合のtableのサンプル

1/13/2022 10:46:00 午前

予約状況予約状況時刻月火水木金土日 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">  </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...

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

インラインフレームの中のボタンをクリックしてフレームの外のページの一番上を表示させる

4/20/2021 02:35:00 午後

index.html <div id="block_footer" class="background"> <iframe src="footer.html" name="ifr_footer" id="ifr_footer" title="フッター"></iframe> </div> footer.html <a href="javascript:location.href=location.href;" title="一番上に戻る" target="_top"><img src="img/totop.png" width="36" height="36" alt="一番上に戻る" /></a> インラインフレームの中でなければ <a href="#top">とでもすれば良いのだろうけれど、インラインフレームの中ではインラインフレームのsrc#topに飛んでしまうらしいので使えない。「target="_top"」は親フレームに表示させるらしい。 "javascript:location.href=location.href;"は再読込の代わりで、正規の方法ではなく思いついてscriptを使用している。ただ、再読込でも同じかもしれないが、ブラウザに「以前の表示した場所を表示する」なんてお節介な仕様があると再読込してもページの一番上を表示しないかもしれない。インラインフレームの内側からフレームの外の親フレームのページの一番上を表示させる方法は、ちゃんと確認する必要がある。ページのトップに戻るボタンをjavascriptでjQueryで表示させる方法はあるけれど、面倒なので確認してない。<a href="#top">に匹敵する単純な方法を求めている。 2021/4/20 14:30頃記載。

縦に広げるメニュー

4/19/2021 02:03: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> <input type="checkbox" id="menu00" class="check" value="0" /><label for="menu00" class="switch"><span>▼</span></label> <a>メニュー</a> <ul class="menu"> <li><input type="checkbox...