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
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
jforg.bsky.social
【書いたやで】僕の Web サイトはフォントについて語るサイトではないはずですが、なぜか今回もフォントの話です。でもみんな大好き Noto CJK フォントの話だよ! 実践上では役に立たないと思うけどね!! 涙

（あと最後にちょっとネタを仕込んでおいたのですが、気が付いていただけるかどうか少し心配です😭）
👇
Noto CJK のバリアブルフォントを Web ブラウザがバリアブルフォントとして扱ってくれるようがんばってみたが、いちユーザーではどうにもできない問題があってあきらめた jeffreyfrancesco.org/weblog/20250...
Noto CJK のバリアブルフォントを Web ブラウザがバリアブルフォントとして扱ってくれるようがんばってみたが、いちユーザーではどうにもできない問題があってあきらめた
Noto CJK ファミリーのバリアブルフォントをインストールして CSS の font-family にただ指定しても普通のフォントとしてしか扱ってくれないのを何とかしようとがんばってみた顛末記です。ちなみに最終的な結論は「無駄な作業だった」です。涙
jeffreyfrancesco.org
April 8, 2025 at 3:16 PM
jforg.bsky.social
全部トランプのせい
April 7, 2025 at 4:13 PM
jforg.bsky.social
一瞬で戻った
April 7, 2025 at 2:46 PM
jforg.bsky.social
胃もたれ感
April 7, 2025 at 12:45 PM
jforg.bsky.social
人生詰んだ
April 7, 2025 at 10:41 AM
jforg.bsky.social
【書いたやで】コマンドラインツールを紹介する軽めの記事です。よし今回は中一日で新しい記事が出せたぞ。涙
👇
フォントに関する色々な情報を調べるのにコマンドラインで使える otinfo が便利 jeffreyfrancesco.org/weblog/20250...
フォントに関する色々な情報を調べるのにコマンドラインで使える otinfo が便利
フォントファイルのフルネームや PostScript 名、どんな OpenType 機能が使えるか…などの情報をコマンドラインで調べられる otfinfo というツールがけっこう便利だったので、インストール方法やその使い方などを軽く解説してみました。
jeffreyfrancesco.org
April 6, 2025 at 3:05 PM
jforg.bsky.social
【書いたやで】なんか気が付いたら前回の記事から1ヶ月以上経過してた訳ですが、全部トランプとイーロン・マスクが悪いということにしておいてください。涙
👇
Inter の Web フォントをセルフホストして Google Fonts 経由では使えない豊富な OpenType 機能を有効にするまでの手順 jeffreyfrancesco.org/weblog/20250...
Inter の Web フォントをセルフホストして Google Fonts 経由では使えない豊富な OpenType 機能を有効にするまでの手順
Google Fonts にある Inter は、元のフォントに実装されているせっかくの OpenType 機能がほぼ無効になっています。それはあまりにももったいないので、自前でホストしたフォントを使ってその実力を十分に発揮させてあげようと思います。
jeffreyfrancesco.org
April 4, 2025 at 12:41 PM