【CSS Modules】alignment-baselineプロパティの使い方

alignment-baselineプロパティは、CSSにおいて、インラインレベルの要素やSVGグラフィック内のテキスト要素の垂直方向の基準線、すなわち「ベースライン」をどのように定義し、揃えるかを制御するプロパティです。このプロパティを使用することで、ウェブページ上で異なるフォントサイズや種類のテキスト、アイコン、画像などが混在する行において、それらの要素が垂直方向にどのように整列するかを詳細に指定し、視覚的な一貫性を確保できます。

具体的には、テキスト行内にある複数の要素の配置を視覚的に整える際に重要な役割を果たします。例えば、テキストと隣接するアイコン、または異なるサイズのテキストブロックを同じ高さで揃えたい場合に、要素の基準となる線を調整します。この基準線には、baseline（テキストの通常のベースライン）、middle（要素の中央）、text-top（テキストボックスの上端）、text-bottom（テキストボックスの下端）などの値があり、これらを選択することで、要素同士が不揃いに見えることを防ぎ、統一感のある美しいレイアウトを実現することが可能です。

特にSVGの<text>要素や<tspan>要素に適用されることが多く、グラフィックとテキストの精密な配置が求められる場面でその効果を発揮します。また、display: inline-blockが指定された要素など、インラインレイアウト内で垂直方向の整列を細かく調整したい場合にも有効です。

このプロパティは、要素のコンテンツそのもののベースラインを決定し、そのベースラインが親要素や兄弟要素のどのベースラインと揃うかを定義するという点で、vertical-alignプロパティとは異なる側面を持ちます。vertical-alignが主に要素を親要素に対して垂直方向に揃えるのに対し、alignment-baselineは要素自身の基準線を設定するために使われます。システムエンジニアを目指す方にとっては、ユーザーインターフェースの見た目を正確に制御し、あらゆる環境で一貫性のある表示を保証するために理解しておくべき重要なプロパティの一つです。

Copy
1alignment-baseline: auto;

引数なし

引数はありません

戻り値なし

戻り値はありません