2345 日目（曇り）例の面での菊一文字の最適発動位置を知った日

zoxide のパッケージ管理システムを APT から Homebrew に移行。麻雀練習。

2026-09-27：buzz、Cabin、相見積もり

■

最近知った概念がつぶし玉。 ビーズをテグスに通して、つぶし玉をはさみ、つぶし玉をペンチでつぶすと、つぶし玉がテグスを挟んで、ビーズが動かなくなる。テグス玉の購入難易度は高くて、小さいゴマみたいな物体なので、ビーズ売り場で見つけることができない。 店の人に聞いたら、最初にやってきた新人はみつけることができず、もう一人レジから来てくれて、これです、と教えてくれた。 視力が一定以下の人には決して見つけられないと思う。IRIWA つぶし玉 かしめ玉 2㎜ 1000個 サンキャッチャー ビーズ カシメ玉 潰し玉 アクセサリー パーツ ハンドメイド ジュエリー作り クラフト手芸用品 プラチナ色 ゴールド …

2026-09-27 Sun : ふたり合わせて8806

日記/2026年/9月27日/日本癌学会2026のSNS投稿に関する所感

2026-09-27

日記

今日は初めてファミレス作業をしてみた。ロボット配膳・セルフレジ完備なのでかなり極限まで人と関わらなくて良いのめちゃくちゃ気が楽なんだけどなんか入店時にすでに人のいるテーブルに誤案内されて若干気まずい感じになった上、清算の時セルフレジがエラー… (全1506文字) -- Posted by toyama

URLのフラグメントがCSSの:targetになるまでをOmoikaneで追う

ページ内の見出しへ飛ぶリンクは単純に見える。 詳細へ ... このリンクを押すとURLの末尾が#detailsになり、該当する要素がページ内の移動先になる。CSSで:targetを使えば、その要素だけを強調することもできる。 :target { outline: 2px solid red; } 普段は「URLの#以降とidが一致する」という理解で困らない。ただ、自作ブラウザのOmoikaneへ:targetを入れようとすると、それだけでは足りなかった。URLを読む処理、対象を選ぶHTMLの規則、Documentが持つ状態、CSSのセレクタ照合、location.hashを変えた後の更新がそれぞれ別の場所にあるからだ。 特に面白かったのは、:targetの条件をCSSの関数内で毎回URLとidから計算するのではない、という点だった。HTMLの側でDocumentの対象要素を決め、その状態をCSSが参照する。今回は、その間にある処理を対象要素の追加と同一Document内のフラグメント遷移への対応から追ってみる。 まず、何が変わるのか 次のHTMLを考える。 section:target { color: rgb(13, 42, 71); } 最初の節 次の節 URLがhttps://example.test/page#firstなら、firstの要素が:targetに一致する。#secondへ変われば一致先も移る。getComputedStyle()の色だけでなく、document.querySelector(':target')やelement.matches(':target')の結果も変わる。これらを別々の規則で実装すると、画面では色が変わったのにDOM検索は古い要素を返す、といった不整合が起きる。 ここには二種類の仕事がある。一つはURLから「このDocumentの対象はどの要素か」を決めること。もう一つは、決まった対象をCSSやDOMのセレクタ照合に反映することだ。URLが変わったときは、前者をやり直し、後者が古い結果を使わないようにする必要がある。 flowchart TB URL["DocumentのURL#second"] --> HTML["HTMLの規則で対象を選ぶ"] HTML --> STATE["Documentのtarget elementsecondの要素"] STATE --> MATCH["セレクタ照合:target"] MATCH --> STYLE["CSSのスタイル・描画"] MATCH --> DOM["querySelector / matches"] 上の図でCSSに入る前の箱が重要になる。URLそのものをCSSの各呼び出しへ渡すのではなく、Documentの状態を更新してから照合する。 :targetはCSSだけの規則ではない Selectors Level 4の:targetは、文書のURLが指す対象要素に一致する擬似クラスとして定義されている。#detailsというフラグメントがあれば何でも一致する、という意味ではない。対象要素が選ばれなければ、:targetに一致する要素もない。 では、その対象要素を誰が選ぶのか。HTML文書では、HTML Standardのフラグメントに関する手順が決める。仕様には「Documentのindicated part」と「target element」が登場する。前者はURLのフラグメントが示す部分で、通常は要素だが、文書の先頭を示す特別な値になる場合もある。後者は:targetの判定に使われるDocumentの対象要素だ。 この区別はhttps://example.test/page#を考えると分かりやすい。空のフラグメントは文書の先頭を指す扱いだが、「文書の先頭」という特別な値はHTML要素ではない。したがって、空のフラグメントを付けたからといって、htmlやbodyが自動的に:targetへ一致するわけではない。ページ内の移動先と、CSSで一致する要素は似ていても同じ概念ではない。 また、:targetは:hoverや:focusとも違う。マウスが上にあるか、キーボード入力先か、という状態ではなく、そのDocumentのURLに結び付いた状態である。別のURLを持つiframeのDocumentまで、親ページの#detailsで同じ要素を対象にしてはいけない。 フラグメントとidを単純に比較できない 対象の選び方を「location.hash.slice(1)と各要素のidを比較する」と書くと、普通の例は通る。しかしHTMLの規則には照合する順序がある。 まず、フラグメントをそのまま使って候補を探す。同じ値のidを持つ要素があれば文書順で最初のものを選ぶ。該当するidがなければ、古い形式のも候補になる。それでも見つからなければ、フラグメントをパーセントデコードし、UTF-8として解釈してから同じ探索をもう一度行う。仕様にはその後のtopの特例もある。HTML Standardの選択手順は、こうした順序まで指定している。 flowchart TB F["URLのフラグメント"] --> RAW["元の文字列で探す"] RAW --> ID1{"一致するidはあるか"} ID1 -->|はい| HIT1["文書順で最初の要素"] ID1 -->|いいえ| NAME1{"一致するa[name]はあるか"} NAME1 -->|はい| HIT2["文書順で最初のa要素"] NAME1 -->|いいえ| DEC["パーセントデコードして再探索"] DEC --> ID2["idを優先し、次にa[name]"] ID2 --> RESULT["要素、または対象なし"] 例えば、URLが#encoded%20valueで、ページ内に次の二つがあるとする。

QUIC実装月報 2026年9月

Translated by AI (and reviewed by me) from handwritten Japanese text. (日本語が後に続きます) RubyKaigi 2026 follow up and Fastly Tech Meetup vol.1 I gave talks at two events in September: RubyKaigi 2026 followup Fastly Tech Meetup vol.1: QUIC...

"変な趣味"を集めているのでまとめていこうかなと。

変わった趣味を楽しむ 昔からユニークな趣味を集めるのが好きで、いい感じにリストが溜まってきたので、週末のノリで公開しようと思います。 死亡記事を読む 星1レビュー集め 高級家具を難しい顔をして眺める ロードバイクならぬロード一輪車 ヘビハンティング 古代ギリシャ語 骨集め 自分だけの言語を作る (Conlanging) ナイフ投げ Xball (ペイントボール) 植物のためのセーター編み ジャンクジャーナル ステンドグラスづくり ミョウバンの結晶アート 化石ハンティング ピンボールマシン修理 牡蠣を育てる グーグルマップの誤情報を修正する ハムラジオ(素人無線) 鳥の写真に字幕をつけてミーム化…