【CSS Modules】text-edge型の使い方
text-edge型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
text-edgeプロパティは、ブロックレベル要素内でテキストが表示される際の、視覚的な端（エッジ）の解釈方法を制御するプロパティです。このプロパティは、テキストの縦方向のアラインメントをより精密に調整することを目的としています。異なるフォントやフォントサイズを使用した場合でも、テキストの視覚的な上端や下端が期待通りに揃わないことがあります。text-edgeプロパティは、このようなフォント固有の視覚的な差異を吸収し、異なるテキスト要素間、あるいはテキストと画像などの非テキスト要素との間で、より一貫性のあるデザインを実現するために役立ちます。
具体的には、このプロパティは、フォントが持つ多様なメトリクス（例：アセンダー、ディセンダー、キャップハイト、xハイトなど）のうち、どの基準をテキストの「エッジ」として扱うかを指定できます。例えば、textという値を指定すると、フォントが定義するテキスト領域全体をエッジとして考慮し、capという値を指定すると、大文字の視覚的な上端を基準にテキストのエッジを決定します。これにより、テキストの描画位置や、行の高さにおける視覚的な余白の扱いを開発者が細かく制御できるようになります。
特に、UIコンポーネント内でアイコンとテキストを隣接させる場合や、多言語環境において、フォントによる見た目のずれを軽減し、より統一感のあるユーザーインターフェースを構築する上で非常に有効なツールです。
公式リファレンス: <text-edge>
構文(syntax)
1.element { 2 text-edge: cap; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません