baseline-source

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

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

Syntax

css

/* キーワード値 */
baseline-source: auto;
baseline-source: first;
baseline-source: last;
/* グローバル値 */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;

値

auto: last baseline はインラインブロック要素に対して、first baseline はそれ以外の要素に対して、それぞれベースライン位置を指定します。
first: first baseline の配置を指定します。
last: last baseline の配置を使用します。

公式定義

初期値	`auto`
適用対象	inline-level boxes
継承	なし
計算値	指定通り
アニメーションの種類	離散値

形式文法

baseline-source = 
 auto | 
 first | 
 last

例

インラインフレックスコンテナー内でベースラインの選択

この例は、baseline-source プロパティを使用してインラインフレックスコンテナーのベースライン配置を制御する方法を示しています。

HTML

HTML には複数の <span> 要素が含まれており、これらは記述コンテンツ用の汎用インラインコンテナーです。 3 つの <span> 要素には、入れ子になった <span> の子要素が含まれています。

html

<span>ベースライン ___</span>
<span class="box first">
 <span>First</span>
 <span>A</span>
 <span>B</span>
 <span>C</span>
</span>
<span class="box auto">
 <span>Auto</span>
 <span>A</span>
 <span>B</span>
 <span>C</span>
</span>
<span class="box last">
 <span>A</span>
 <span>B</span>
 <span>C</span>
 <span>Last</span>
</span>

CSS

body {
 font-family: sans-serif;
}
.box {
 border: 2px solid #888888;
 width: 50px;
}
span {
 padding: 0.4rem;
}

すべてのボックスをインラインフレックスコンテナーとして定義します。 .first ボックスには最初のベースラインを、.auto ボックスにはデフォルトのベースライン(インラインフレックスコンテナーでは first)を、.last ボックスには最後のベースラインを設定します。

css

.box {
 display: inline-flex;
 flex-direction: column;
}
.first {
 baseline-source: first;
}
.auto {
 baseline-source: auto;
}
.last {
 baseline-source: last;
}

結果

[フレーム]

仕様書

仕様書
CSS Inline Layout Module Level 3 # baseline-source

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年2月24日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告