プロンプトとコンテキスト
デザインシステムにおいて、ステータスアイコン、単位記号、インライン SVG を本文テキスト、ボタンラベル、数式表記と整列させる必要があります。開発者は負の top 値や transform を使用していましたが、フォント、行の高さ、RTL レイアウトが変化するとアイコンがずれてしまいます。baseline-shift、SVG ベースライン、フォールバック、アクセシビリティ、ビジュアルリグレッションをカバーする、CSS ベースラインに基づくソリューションを設計してください。
面接官がテストするポイント
- インライン整形コンテキスト、フォントベースライン、上付き文字、下付き文字、代替ベースラインの理解。
baseline-shift、vertical-align、transformの区別。- HTML テキストと SVG コンテンツ間のブラウザ差異の処理。
- ピクセル単位の微調整に追われるのではなく、読みやすいテキスト、フォーカス順序、RTL セマンティクスを維持すること。
- フォントマトリクス、スナップショット、実ブラウザカバレッジを用いた検証。
明確にすべき質問
- アイコンは装飾用ですか、それとも状態を伝達するものですか？可視テキストやアクセシブルな名前はありますか？
- 対象は通常のインラインアイコン、上付きの単位、数式、あるいは SVG 内部のテキストですか？
- どのブラウザ、フォント読み込みの失敗、ズームレベルをサポートする必要がありますか？
- 基準となるのはアルファベットベースライン、数式ベースライン、SVG の
dominant-baseline、それとも視覚的な中央ですか？ - コンポーネントは RTL、動的なフォントサイズ、強制ハイコントラストをサポートする必要がありますか？
30秒の回答
まずセマンティックなベースラインを定義します。本文アイコンは通常アルファベットベースラインに従いますが、数式や上付き文字には明示的なシフトが必要です。アイコンをインライン整形コンテキスト内に保持し、関係性を表現するために baseline-shift を使用します。インラインボックスの配置には vertical-align を使用し、transform を組版ルールとして扱わないようにします。SVG の viewBox とベースライン動作を正規化し、レガシーブラウザ向けには控えめな vertical-align やサイズによるフォールバックを用意します。装飾用アイコンは非表示にし、状態アイコンには名前を付け、フォント読み込み、ズーム、RTL、SVG、ブラウザのスナップショットをテストします。
ステップごとの詳細解説
1. ベースラインセマンティクスの確立
ベースラインはボックスの垂直方向の中央ではありません。本文アイコンは通常アルファベットベースラインに整列しますが、上付き文字、下付き文字、数学記号は異なる関係を持ちます。フォントごとにピクセル値を適当に設定するのではなく、CSS プロパティを選択する前に要件を「現在の行ベースラインに対する相対シフト」として定義してください。
.status-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: baseline;
baseline-shift: 0.08em;
}この値はコンポーネントトークンであり、普遍的な定数ではありません。実際のフォントとサイズで測定してください。
2. baseline-shift、vertical-align、transform の分離
baseline-shift は、テキストレイアウトを維持する必要がある上付き文字、下付き文字、およびインラインコンテンツのベースラインに対するオフセットを表現します。vertical-align は、インラインボックス、テーブルセル、または選択されたベースラインに関与します。transform: translateY() は行ボックスの計算を変更せずに描画位置を変更するため、ヒット領域、オーバーフロー、後続のテキストの配置がずれる可能性があります。
3. SVG とフォントジオメトリの処理
SVG に安定した viewBox を設定します。パスの余白は、CSS が正しくても視覚的なエラーを引き起こす可能性があります。インライン SVG のベースライン動作には代替ベースラインや dominant-baseline も関与するため、1 つのブラウザでの目視確認だけでは不十分です。呼び出し側で個別に上書きを繰り返すのではなく、アイコンコンポーネント内でベースライン、上付き文字、下付き文字のバリアントを提供してください。
4. フォールバックレイヤーの設計
正確なシフトを適用する前に機能検出を行います。サポートされていないブラウザでは、控えめな vertical-align、サイズ、または line-height のフォールバックを使用します。フォールバックは読みやすさとクリック可能性を維持し、非表示のテキストを画面外に押し出してはなりません。フォントの読み込み中はシステムフォントのベースラインを受け入れ、フレームごとのスクリプト補正ではなく、読み込み後に安定したトークンを使用します。
5. アクセシビリティと国際化
装飾用アイコンには空の代替テキストを付与し、二重に読み上げられないようにします。状態アイコンには可視テキストまたはアクセシブルな名前が必要です。位置はセマンティクスではありません。RTL は記述方向を変更するものであり、垂直ベースラインを変更するものではありません。ズーム、強制ハイコントラスト、視覚効果の抑制（reduced motion）が有効な場合でも、コンポーネントの明瞭さと操作性を維持する必要があります。
6. テストとリグレッションゲート
一般的なフォント、フォント読み込み失敗、12〜32px のサイズ、さまざまな line-height、SVG パス、上付き文字、下付き文字、RTL、ブラウザ、ズームをカバーします。スクリーンショット比較では、アクセシビリティのチェックと並行して、ベースラインのエラー、行の高さの変化、クリッピング、ヒット領域を確認する必要があります。不一致が発生した場合は、さらに transform を重ねる前に、ベースラインモデルまたはアセットのジオメトリに誤りがないかを判断してください。
模範回答
本文アイコン、上付き/下付き文字、SVG テキストはベースラインが異なるため、これらを分けて扱います。本文アイコンはインライン整形コンテキストに維持し、相対的なオフセットには baseline-shift を使用します。インラインボックスの配置には vertical-align を使用し、transform はレイアウトを変更できない場合の最終的な視覚的補正としてのみ使用します。SVG の viewBox を正規化し、代替ベースラインとパスの余白をテストします。
システムフォントや古いブラウザ向けには機能検出されたフォールバックを提供し、ヒット領域と読みやすいテキストを維持します。装飾用アイコンは非表示にし、状態アイコンには名前を付けます。テストではフォント、サイズ、行の高さ、SVG、RTL、ズーム、スクリーンショットのリグレッションをカバーします。位置ずれが発生したときの最初の対応は、マジックナンバーを積み重ねることではなく、ベースラインのセマンティクスとアセットのジオメトリを確認することです。
よくある間違い
- ベースラインをボックスの中央として扱い、すべてのフォントに単一の
translateYを使用すること。 vertical-align、baseline-shift、transformが交換可能であると思い込むこと。- デフォルトフォントの Chrome のみでテストし、フォント読み込み失敗、ズーム、RTL を無視すること。
- SVG の
viewBoxに余分な余白が含まれているのに CSS のせいにすること。 - 装飾用アイコンを二重に読み上げさせたり、状態アイコンに名前を付けなかったりすること。
- スクリプトで毎フレーム測定を行い、レイアウトのジッターやメンテナンスコストを発生させること。
フォローアップの質問と回答
なぜ固定の top: -2px を使用しないのですか？
特定のフォント、サイズ、行の高さに依存し、ベースラインの意図を表現できず、行ボックスの計算にも関与しないためです。相対的なベースライントークンの方が適応やテストが容易です。
SVG パスがまだ低く見える場合はどうすればよいですか？
コンポーネントトークンを調整する前に、viewBox の余白、パスのジオメトリ、SVG の代替ベースラインを調査してください。すべてのアイコンに transform を追加してシステム全体の整合性を損なわないようにしてください。
サポートされていないブラウザではどのようにユーザー体験を維持しますか？
読みやすさ、クリック可能性、クリッピングのない状態を維持する控えめな vertical-align やサイズのフォールバックを使用します。正確なシフトは拡張機能として扱い、実際のブラウザでフォールバックの行の高さを検証してください。