コンテンツにスキップ

AI Session Notes - 2026-03-15

Webフォントのフォールバックによる文字幅・ベースラインのズレ

学んだこと

  • 欧文専用フォント（例: JetBrains Mono）を指定しても、日本語カタカナなどフォントに含まれない文字はブラウザのフォールバックチェーンでシステムフォント（プロポーショナル）に切り替わる
  • 結果として、同じ font-family 指定でも ASCII 文字（#, ♭）と日本語文字（ド, レ）で異なるフォントが適用され、ベースラインや文字幅が不揃いになる
  • セリフ体ディスプレイフォント（Cormorant Garamond 等）はラテン数字と日本語の混在テキストでベースラインのズレが顕著に出やすい

詳細

解決アプローチ: 日本語文字セットを含む等幅フォントを使う。Google Fonts で無料利用可能な M PLUS 1 Code は日本語カタカナ・ひらがなを含む等幅フォントで、ラテン文字と日本語が同じ文字幅で揃う。

使い分けの指針: - タイトル・見出し → ディスプレイフォント（セリフ・サンセリフ）OK - 数字+日本語が混在する短いラベル → 本文フォント or 日本語対応等幅フォント - 記号（#, ♭）と日本語が並ぶ場面 → 日本語対応等幅フォントが最適

CSS Flexbox の align-items: center とテキスト整列の落とし穴

学んだこと

  • flex-direction: column + align-items: center は、各子要素をコンテンツ幅に縮小してから中央配置する
  • テキスト幅が異なる2行（例: "ド#" と "レ♭"）を縦に並べると、各行が異なる幅で独立して中央寄せされるため、テキストの中心軸が揃わない
  • width: 100% を子に指定しても、親の幅が auto（コンテンツに依存）の場合は効果がない

詳細

正しいアプローチ: align-items: stretch に変更すると、全子要素が最も幅の広い要素に合わせて引き伸ばされる。その上で text-align: center を指定すれば、全行が同じ幅の中でテキスト中央揃えとなり、視覚的に揃う。

/* NG: 各行が独立して中央寄せ → 幅が違うとズレる */
.container { display: flex; flex-direction: column; align-items: center; }

/* OK: 全行が同じ幅に引き伸ばされ → text-align で揃う */
.container { display: flex; flex-direction: column; align-items: stretch; }
.container > * { text-align: center; }

ギター指板の暗記法 — ランドマークフレットの概念

学んだこと

  • ギターの標準チューニング（EADGBE）では、0フレット（開放弦）・5フレット・10フレットの3箇所で全6弦がナチュラルノート（派生音なし）になる
  • これは開放弦の各音に+5半音、+10半音するとすべてナチュラルノートに着地するという偶然（standard tuning の性質）に基づく
  • この18ポジションをランドマークとして覚えると、任意のポジションから最大2〜3フレットの距離で音名を導出できる
  • 英語圏では "3 Remarkable Rows" として知られたアプローチ

参考リンク

メタ情報

  • ツール: Claude Code
  • 関連技術: CSS, Flexbox, Web Fonts, Google Fonts, 音楽理論, ギター