Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

baseline-source

baseline-source は CSS のプロパティで、複数のベースラインを持つインラインレベルボックス、たとえば複数行のインラインブロックやインラインフレックスコンテナーなどに使用するベースラインを定義します。 これらの値により、ボックスの最初のベースライン、最後のベースラインへの配置、またはボックスの型に基づいてブラウザーが自動的に決定する方式を選べます。

ベースラインインライン配置

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
baseline-source
111
111
115
111
auto
111
111
115
111
first
111
111
115
111
last
111
111
115
111
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.inline-block {
  display: inline-block;
  baseline-source: first;
}

ライブデモ

first baseline

CSS First baseline demo.

プレビュー全画面表示

last baseline

CSS Last baseline demo.

プレビュー全画面表示

auto baseline

CSS Auto baseline demo.

プレビュー全画面表示

実務での使いどころ

  • 複数行インライン要素のベースライン制御

    複数行にまたがるインラインブロック要素が周囲のテキストと最初の行で揃うか最後の行で揃うかを明示的に制御できます。

注意点

  • Safariでは未サポートのため、ブラウザ間で表示の差異が生じる可能性があります。重要なレイアウトには他の配置手法も併用してください。

アクセシビリティ

  • ベースラインの調整は視覚的な変更であり、コンテンツの意味やスクリーンリーダーの読み上げには影響しません。

参考リンク