Jeffrey Francesco (JF)
LightNews LightNews
banner
jforg.bsky.social
Jeffrey Francesco (JF)
@jforg.bsky.social
11 followers 8 following 120 posts
海の京都に生息する、ハモンドオルガン & 鍵盤ハーモニカ奏者 / インターネットラジオ MC（お休み中）/ Web 系エンジニア / 2級ファイナンシャル・プランニング技能士。お肉と魚介類と麺類が好きです。
Posts Replies Media Videos
jforg.bsky.social
【ブログ書いたやで】 とりあえずトップページに新年明けた感を出すためだけに書いたあけおめ投稿です。あいさつ以外には何もありませんので、まぁ別に読まんでも…いや、いちおう読みにきていただけるとありがたいです😇
👇
2026 年 jeffreyfrancesco.org/weblog/20260...
2026 年
あけましたので新年のごあいさつです。
jeffreyfrancesco.org
January 1, 2026 at 6:00 AM
jforg.bsky.social
【ブログ書いてたやで】 2026年がやってくるまでに2025年を振り返っておくシリーズの第二弾です。前回のはおよそ1ヶ月前のネタを今さら書くんかい…でしたが、今回はさらにその10倍、10ヶ月前のネタを今さら書きました。涙
👇
ADAM Audio D3V レビュー: ついに我が家にもまともなモニタースピーカーがやってきたやで!（10ヶ月前に） jeffreyfrancesco.org/weblog/20251...
ADAM Audio D3V レビュー: ついに我が家にもまともなモニタースピーカーがやってきたやで!（10ヶ月前に）
2026 年がやってくるまでに 2025 年を振り返っておくシリーズ第二弾は、2 月末に購入した自分史上初のちゃんとした音楽制作用モニタースピーカー ADAM Audio D3V の話です。10ヶ月も前の話ですが、今さらかよと言わずお付き合いください。涙
jeffreyfrancesco.org
December 30, 2025 at 10:12 AM
jforg.bsky.social
【ブログ書いてたやで】 昨日の深夜27時に公開してました。2026年がやってくるまでに2025年を振り返っておくシリーズ第一弾です。基本12月頭に盛り上がる話題なんでちょっと出遅れ感はありますが、今年を振り返るのがコンセプトなので問題ないですね😇
👇
（いまさら）2025 年 Spotify まとめ — Natsudaidai, バックドロップシンデレラ, Jazzanova + α jeffreyfrancesco.org/weblog/20251...
（いまさら）2025 年 Spotify まとめ — Natsudaidai, バックドロップシンデレラ, Jazzanova + α
2026 年がやってくるまでに 2025 年を振り返っておくシリーズの第一弾としまして、昨年と同様、今年の Spotify まとめをざっくりまとめてみました。あわせてそれ以外の個人的な音楽事情などを書いております。
jeffreyfrancesco.org
December 29, 2025 at 9:02 AM
jforg.bsky.social
【動画】【メリクリ】 実は先週すでに公開されてたやつなのですが、ちょうどいい日なのでこのタイミングで放流しておきます。曲はマライアのアレです。よろしければ聴いてやってください。
ちなみに今回僕は演奏してませんが、代わりに僕の友達のとなかいが演奏しています🤣
👇
All I Want for Christmas Is You (Mariah Carey Cover) G-ground Orchestra youtu.be/IzBmso4Tuq8
All I Want for Christmas Is You (Mariah Carey Cover) G-ground Orchestra
YouTube video by G-ground Channel
youtu.be
December 24, 2025 at 11:37 AM
jforg.bsky.social
【ブログ書いたやで】 CSS で独自のチェックボックスやラジオボタンをデザインする時に label や span の擬似要素を使うより input 要素そのものの擬似要素を使った方が何かと便利で簡単だよ、という話を書きました。ギリギリですが何とかリリース日前に記事を公開できて良かったなと思います（ポイントはそこじゃないです。涙）
👇
えっ先輩まだチェックボックスやラジオボタンのカスタマイズに label とかの擬似要素使ってんすか? それもう古いっすよ… jeffreyfrancesco.org/weblog/20251...
えっ先輩まだチェックボックスやラジオボタンのカスタマイズに label とかの擬似要素使ってんすか? それもう古いっすよ…
CSS で独自のチェックボックスやラジオボタンをデザインする時、以前は label や span の擬似要素を使ってましたが、今ではもうフォーム部品そのものの擬似要素が問題なく使えますので、そちらを利用した方が何かと便利で楽ですよ、というお話です。
jeffreyfrancesco.org
December 23, 2025 at 2:07 PM
jforg.bsky.social
【ブログ書いたやで】 システムカラー・キーワードがだいたいどんな色になるのか一覧でバーって見られるやつを作ったので公開したよ、という宣伝を書きました。よかったら使ってね。なお「一覧で見られる」という以外に何の役に立つかは自分でもよく分かりません😇
👇
17 ある CSS のシステムカラー・キーワードが色々なブラウザの色々なカラーモードで何色になるかをざっと見渡せるやつ作った jeffreyfrancesco.org/weblog/20251...
17 ある CSS のシステムカラー・キーワードが色々なブラウザの色々なカラーモードで何色になるかをざっと見渡せるやつ作った
System Color Viewer という、CSS のシステムカラー・キーワードを color 系プロパティに指定すると各ブラウザの各カラーモードで何色になるかというのを一覧で見渡せるツールを公開しましたので、よかったら使ってね…というお知らせです。
jeffreyfrancesco.org
December 16, 2025 at 3:18 PM
jforg.bsky.social
【ブログ書いたやで】 1ヶ月も経って色々と落ち着いてきたので、あのできごとに関連する話をまとめておきました。
👇
はてブ砲に撃たれて Netlify の転送量無料枠が一瞬で吹き飛んだので、新有料プランに移行してみて分かったことを書いておく jeffreyfrancesco.org/weblog/20251...
はてブ砲に撃たれて Netlify の転送量無料枠が一瞬で吹き飛んだので、新有料プランに移行してみて分かったことを書いておく
突然普段の数百倍の PV がきたために旧無料プランの転送量上限 100GB を超えて追加支払が発生しそうになったので、一撃 $55 よりはましかと思って新有料プランに変更したという話と、実際に移行してみて分かった新プランの細かいところを書いておきます。
jeffreyfrancesco.org
December 5, 2025 at 12:41 PM
jforg.bsky.social
OGPや`twitter:card`のメタタグが複数のプラグインから出力されてダブってる場合にはどう扱われるのだろうと気になったので、それを調べるための投稿です。
coks.jp
coks.jp
November 19, 2025 at 5:26 AM
jforg.bsky.social
【ブログ書いたやで】 本当は先週末に書いて公開しようと思ってた記事なんだけど色々とよく分からないことがありましてなぜか今この時間の公開になってしまったという曰く付きの記事です😭
👇
vertical-align プロパティと cap 単位を使って、アイコンとテキストの縦位置をいい感じに中央で揃える CSS jeffreyfrancesco.org/weblog/20251...
vertical-align プロパティと cap 単位を使って、アイコンとテキストの縦位置をいい感じに中央で揃える CSS
現在の CSS ですとアイコンとテキストの縦中央揃えはおおむね Flexbox を使えば事足りますが、場合によっては Flexbox を使えないことがあります。そんな場面でも vertical-align だけでいい感じに縦中央揃えする方法を書きました。
jeffreyfrancesco.org
November 13, 2025 at 3:34 PM
jforg.bsky.social
朝起きたら何がどうなってるのか知らないけど普段のウチではありえないくらい PV 数が爆上がりしていて混乱しているアカウントがこちらです😭
あまりにも動揺しすぎて気が付いたらアフィリンクを追加していた。今は反省している。
👇
Affinity アプリが永久無料と聞いてこれで脱 Adobe できるかと思ってるあなたに、Affinity 歴約 5 年の私から伝えておきたいこと jeffreyfrancesco.org/weblog/20251...
Affinity アプリが永久無料と聞いてこれで脱 Adobe できるかと思ってるあなたに、Affinity 歴約 5 年の私から伝えておきたいこと
新しい Affinity が永久無料ということで話題になってますが、どうやら「これで Adobe 不要や!」みたいな極端なこと言ってる方もおられるようなので、両方使った経験から「そんな簡単にはいかないっすよ…」というのをお伝えしておきたいと思います。
jeffreyfrancesco.org
November 9, 2025 at 2:04 AM
jforg.bsky.social
【おしえてえらい人】
#macOS と #iOS の #VoiceOver 今試したら #Safari で開いてるページにある #SVG 画像の title 要素の内容を role="img" 指定があれば（ラベルとして）読み上げてくれるようになってたんだけど、この仕様になったのいつからでしょう?（昔は読まれなかったですよね）🤔

ちなみに当方で試した OS バージョンは
- macOS が 15.7.2
- iOS が 18.6.2
です。
November 6, 2025 at 8:35 AM
jforg.bsky.social
【ブログ書いたやで】 ちょっと出遅れた感ありますが、そこそこ使用歴のあるユーザーの立場から、話題になってる例のアプリの話を書きました。内容は多分他のところでも触れられていそうな話で、特に目新しさはないかと思います。涙
ちなみにこの OGP 画像も新しい Affinity で作ったやつだよ! 手抜きだけど! 😭
👇
Affinity アプリが永久無料と聞いてこれで脱 Adobe できるかと思ってるあなたに、Affinity 歴約 5 年の私から伝えておきたいこと jeffreyfrancesco.org/weblog/20251...
Affinity アプリが永久無料と聞いてこれで脱 Adobe できるかと思ってるあなたに、Affinity 歴約 5 年の私から伝えておきたいこと
新しい Affinity が永久無料ということで話題になってますが、どうやら「これで Adobe 不要や!」みたいな極端なこと言ってる方もおられるようなので、両方使った経験から「そんな簡単にはいかないっすよ…」というのをお伝えしておきたいと思います。
jeffreyfrancesco.org
November 5, 2025 at 3:04 PM
jforg.bsky.social
【課外活動】 #zenn に dialog 要素に関する話を2つ書いたのだけどそれぞれ関連する内容でもあるのでまとめて同時公開してみた。の、その1
👇
button 要素の command & commandfor 属性のフォールバックを自力で書いてみた（ポップオーバー関連には目を背けつつ）｜Jeffrey Francesco zenn.dev/jforg/articl...
button 要素の command & commandfor 属性のフォールバックを自力で書いてみた（ポップオーバー関連には目を背けつつ）
zenn.dev
November 4, 2025 at 10:08 AM
jforg.bsky.social
【ブログ書いたやで】 いったい何ヶ月ぶりやねん! っていうくらい久々の音楽活動報告記事は、昨晩ひとつ演奏動画を公開したよっていうお知らせと近況報告、それからちょっとだけ来年の活動についてです。
👇
Rika + G-ground Orchestra “Tea time” の MV（演奏動画）を公開しました jeffreyfrancesco.org/weblog/20251...
Rika + G-ground Orchestra “Tea time” の MV（演奏動画）を公開しました
舞鶴のシンガー Rika が 2012 年にリリースしたオリジナルアルバム「りかのじかん」の収録曲 “Tea time” を、本人 + G-ground Orchestra の演奏で動画撮影、MV 風に編集して公開しました。いい曲なんでみんな聴いてね。
jeffreyfrancesco.org
October 11, 2025 at 2:53 PM
jforg.bsky.social
【書いたやで】【課外活動】 知ってる人は知ってるけど知らない人は知らない（当たり前やんけ） の infinity & -infinity に関する小ネタを Zenn の方に書きました。
👇
zenn.dev/jforg/articl...
CSS: calc() 関数の infinity や -infinity を使用した数式はゼロ除算で短く書ける
zenn.dev
October 7, 2025 at 2:38 PM
jforg.bsky.social
【ブログ書いたやで】 Node.js のバージョン管理ツール fnm の○○についておそらく初めて日本語で言及した記事です。何とかギリギリ冒頭のネタがネタとして機能する時間にアップできました😭
👇
fnm を使うならシェルの設定ファイルにこの一行を指定しておくときっと幸せになれる（はず） jeffreyfrancesco.org/weblog/20251...
fnm を使うならシェルの設定ファイルにこの一行を指定しておくときっと幸せになれる（はず）
Node.js のバージョン管理に fnm を使う場合、シェルの設定を公式のインストールスクリプト任せにしてるとまじで基本的な設定しかやってくれないので、最初に .zshrc などを開いてここ（どこ）をこう変更しておくといいぞ、という話です。
jeffreyfrancesco.org
October 1, 2025 at 2:50 PM
jforg.bsky.social
【書いた】できた当時に作ったもののずっと放置していたZennのアカウントをちょっとは活用するかと思って、まずは手元に眠っていた8年くらい前のメモ書きの内容をほぼそのままアップしてみました。

zenn.dev/jforg/articl...
CSS: 文字色が「最低限のコントラストに関する達成基準」を満たすためのメモ
zenn.dev
September 29, 2025 at 11:01 AM
jforg.bsky.social
【ブログ書いたやで…を深夜にこっそり上げてみるテスト】 calc() 関数で単位の付いた値同士を除算して単位のない数値を算出できるようになったので、その実践的なユースケースをひとつ書いてみました。
👇
Chrome v140 に入った CSS 型付き算術 (typed arithmetic) で単位なし line-height 値の動的算出をわずか一行で書く jeffreyfrancesco.org/weblog/20250...
Chrome v140 に入った CSS 型付き算術 (typed arithmetic) で単位なし line-height 値の動的算出をわずか一行で書く
Chrome v140 の calc() 関数で単位の付いた値同士を除算して単位のない数値を算出できるようになったので、その実践的なユースケースとして単位のない line-height 値を動的に算出する方法を書いてみました。
jeffreyfrancesco.org
September 6, 2025 at 6:51 PM
jforg.bsky.social
【ブログ書いたやで】 もう実装は入ってるはずの Safari v26（β版）で SVG ファビコンが表示できなかったのでその秘密を探るべく我々はジャングルのおk（ry
👇
Safari にも実装が入ることだし、あらためて SVG ファビコンのベスト・プラクティスを考えよう 2025 晩夏（実験） jeffreyfrancesco.org/weblog/20250...
Safari にも実装が入ることだし、あらためて SVG ファビコンのベスト・プラクティスを考えよう 2025 晩夏（実験）
Safari v26 でようやく SVG ファビコンのサポートが入りますが、β版で試したところ ICO ファイルの内容によってはそちらを優先する場合があるようでしたので、どうすれば確実に SVG の方が使われるのかを大量? の実験結果から探ってみました。
jeffreyfrancesco.org
August 29, 2025 at 12:10 PM
jforg.bsky.social
【ブログ書いたやで】 Pocket の代替どうするかの件 Raindrop.io でだいたい解決したやで（意訳）という話を、無事 Pocket がサービス終了する前に書き終えました。涙
👇
Pocket から Raindrop.io に移行しました（自分のデータも記事下のシェアボタンも） jeffreyfrancesco.org/weblog/20250...
Pocket から Raindrop.io に移行しました（自分のデータも記事下のシェアボタンも）
Pocket のサービス終了に伴い記事下のシェアボタンをどうするかの件ですが、Raindrop.io というサービスに記事保存用の URL があり、サービス自体の使い勝手も悪くなさそうでしたので、とりあえずそれを後釜に据えてみましたよ、というご報告です。
jeffreyfrancesco.org
July 7, 2025 at 1:20 PM
jforg.bsky.social
【ブログ書いたやで】 年一回恒例のやつと、もうすぐ Pocket が終わってしまうけどサイトに置いてる「Pocket に保存」ボタンの後釜には何を置くのがいいんでしょうかね🤔 という話を書きました。
👇
36 歳になりました（16 進数で） jeffreyfrancesco.org/weblog/20250...
36 歳になりました（16 進数で）
こなさんみんばんわ。 そんな訳で、本日 6 月 30 日をもちまして無事に 0x36 回目の誕生日を迎えることができました。人間の年齢に換算すると 54 歳になりますかね。いやお前人間違うんかい。
jeffreyfrancesco.org
June 30, 2025 at 2:38 PM
jforg.bsky.social
死ぬのは嫌だが、消えていなくなりたいと思うことはよくある
June 18, 2025 at 2:41 PM
jforg.bsky.social
【書いたやで】オレにしては早めに書けたので早めにアップして早めに告知しておきます…というてもこれ書き始めたの1週間ほど前のことなんですが。涙
👇
ユーザーの iOS に入っているヒラギノ角ゴシックのウエイトに合わせて font-weight を調整するためのスクリプトを書いてみた jeffreyfrancesco.org/weblog/20250...
ユーザーの iOS に入っているヒラギノ角ゴシックのウエイトに合わせて font-weight を調整するためのスクリプトを書いてみた
iOS にヒラギノの W4 が入ったのは割と最近なので、サイト側で W4 指定をしてても iOS 17.x 以前の環境では W3 で表示されてしまいます。でもそれだと困る場面もあるので、閲覧環境に合わせてウエイトを調整したいと思って試行錯誤してみました。
jeffreyfrancesco.org
May 1, 2025 at 9:03 AM
jforg.bsky.social
【書いたやで】こんな真夜中にこんなターゲット層の限られたブログ記事のアップ告知を出しても誰も読まないとは思いますが、せっかく書いたので出しておきます。涙
👇
右寄せやゼロ埋めを使わずに月リストのお尻のラインを揃える CSS jeffreyfrancesco.org/weblog/20250...
右寄せやゼロ埋めを使わずに月リストのお尻のラインを揃える CSS
年月別アーカイブの月のリストがスマホなどで複数列になる場合には「月」の位置で縦列を合わせたいのだけど、デザイン上右寄せにはしたくないし頭に 0 も付けたくないので、どちらも使わずに揃える方法はないものか…と考えてたら思いついた CSS のコードです。
jeffreyfrancesco.org
April 27, 2025 at 6:16 PM
jforg.bsky.social
【書いたやで】 がんばって考えて試してみてよしこれでうまく行きそうやってなったので公開したんですが、読んだ人は多分「ふーん」てなるだけの記事を書きました。涙
👇
CSS カスケード・レイヤーのサポート有無を判別して、非対応ブラウザにも最低限のスタイルを当てる方法を（それをやる必要があるかどうかはともかく）考えてみた jeffreyfrancesco.org/weblog/20250...
CSS カスケード・レイヤーのサポート有無を判別して、非対応ブラウザにも最低限のスタイルを当てる方法を（それをやる必要があるかどうかはともかく）考えてみた
カスケード・レイヤーを使って CSS を書くと、非対応ブラウザには一切のスタイルが当たらなくなってしまうので、せめて最低限のスタイルだけでも当てたいんだけど、その仕様上 CSS だけではどうにもならないので、何とかする方法を考えてみました。
jeffreyfrancesco.org
April 25, 2025 at 12:13 PM