【CSS Modules】text-box-edgeプロパティの使い方

text-box-edgeプロパティは、インライン要素に含まれるテキストコンテンツの視覚的な「端」を定義し、そのテキストを囲むボックスの垂直方向の寸法を調整するために使用されるプロパティです。このプロパティは、テキストの実際のグリフ（文字の形状）やフォントが持つ高さ情報（フォントメトリクス）に基づいて、テキストを格納するボックスの上下の境界をより細かく制御することを可能にします。

通常、ウェブページ上のテキストはline-heightプロパティによって行の高さが決定されますが、これにはテキスト自体の高さ以上の余白が含まれることがあります。text-box-edgeプロパティを使用すると、これらの余分な余白を削減し、テキストの「キャップハイト」（大文字の高さ）や「ベースライン」（文字が配置される基準線）など、特定の基準にボックスの上下の境界を一致させることができます。これにより、テキストブロック間の垂直方向の間隔をより厳密に制御したり、異なるフォントサイズやフォントファミリーが混在するテキスト行であっても、視覚的なアライメントのずれを最小限に抑えたりすることが可能になります。

このプロパティは、特にコンポーネントベースのCSS Modules環境において、各コンポーネント内のテキスト要素が周囲のレイアウトに与える影響を予測しやすくし、再利用可能なスタイルを構築する上で役立ちます。アイコンとテキストを並べる際のアライメント調整や、リストアイテムなどでの一貫した行間隔の維持、また視覚的に密度の高いユーザーインターフェースデザインにおいて、テキストの占有スペースを最適化する際に非常に有効です。text-box-edgeプロパティを適用することで、テキストのベースラインや全体の視覚的な高さが変更されるため、周囲の要素との配置に影響を与える可能性があります。他のレイアウト関連プロパティとの相互作用を考慮し、慎重に適用することが推奨されます。

Copy
1text-box-edge: content;

引数なし

引数はありません

戻り値なし

戻り値はありません