baseline-source

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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;
}

結果

仕様書

Specification
CSS Inline Layout Module Level 3 # baseline-source

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on 2026年2月24日 by MDN contributors.

View this page on GitHub • Report a problem with this content