CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

The CSS alignment-adjust property is used to fine-tune the baseline of text or elements to control their vertical alignment.

alignment-adjust

　alignment-adjustプロパティは、インライン要素やテキストのベースラインを調整するために提案されたプロパティです。このプロパティは、要素の垂直方向の配置を微調整し、他の要素との整合性を保つことを目的としています。

基本的な機能

目的

要素のベースラインを調整し、異なる言語やフォントが混在する場合でも、テキストの垂直方向の配置を統一する。

使用方法

CSS

.element {
	alignment-adjust: <値>;
}

値

数値

ピクセル（px）、パーセンテージ（%）、エム（em）などで指定。

キーワード

auto: デフォルトのベースライン位置を使用します。
baseline: フォントの標準的なベースラインに合わせます。
before-edge: ボックスの上端にベースラインを合わせます。
text-before-edge: テキストの上端にベースラインを合わせます。
middle: ボックスの中央にベースラインを設定します。
central: 中央ベースラインに合わせます（数式や特定の記号の配置に使用）。
after-edge: ボックスの下端にベースラインを合わせます。
text-after-edge: テキストの下端にベースラインを合わせます。
ideographic: 表意文字（漢字など）のベースラインに合わせます。
alphabetic: アルファベット文字のベースラインに合わせます。
hanging: 吊り下げベースラインに合わせます（デーヴァナーガリー文字などの配置に使用）。
mathematical: 数学的なベースラインに合わせます。
top: ボックスの上端にベースラインを合わせます（before-edgeと同義）。
center: ベースラインをボックスの中央に設定します（middleと同義）。
bottom: ボックスの下端にベースラインを合わせます（after-edgeと同義）。

注意点

サポート状況: 現在、このプロパティは主要なブラウザでサポートされていません。そのため、alignment-adjustを使用しても効果が現れない場合があります。
仕様の状態: このプロパティは CSS3の提案段階にあり、正式な勧告には至っていません。

代替手段

　alignment-adjustがサポートされていないため、以下のプロパティや手法を使用して同様の効果を得ることができます。

vertical-align

　インライン要素やテーブルセルの垂直方向の配置を調整します。

CSS

.text {
	vertical-align: middle;
}

line-height

　行の高さを調整し、テキストの垂直方向の配置を制御します。

CSS

.text {
	line-height: 1.5;
}

Flexboxを使用

　Flexboxを使用して、要素の垂直方向の配置を柔軟に調整できます。

CSS

.container {
	display: flex;
	align-items: center; /* 垂直方向の中央揃え */
}

Gridレイアウトを使用

　Gridレイアウトでも同様に配置を調整できます。

CSS

.container {
	display: grid;
	align-items: center; /* 垂直方向の中央揃え */
}

まとめ

　alignment-adjustプロパティは、要素の垂直方向の配置を微調整するための便利なプロパティとして提案されましたが、現在のところブラウザのサポートがなく、実用的ではありません。代わりに、vertical-alignやline-height、Flexboxや Gridレイアウトなどの他の CSSプロパティや手法を使用して、目的のレイアウトを実現することをお勧めします。