CSSのテキストのベースライン(baseline)とは?

ベースライン(baseline)とはアルファベット等の文字の基準となる線で、親要素のベースラインに合わせます。またvertical-alignは、ブロック要素だと効かない為インライン要素にする必要があります。

コンテンツ [表示]

  1. 1CSSのテキストのベースライン(baseline)とは?
  2. 1.1vertical-alignとは
  3. 1.2vertical-alignが効かない

CSSのテキストのベースライン(baseline)とは?

今回は、CSSのテキストのベースライン(baseline)の説明をいたします。

ベースラインとは、エックスハイトの下側のことを言います。

エックスハイトとはアルファベットの小文字表記において『x』の上から下までの部分のことを言います。

また、『b』『d』のようなアルファベットは、エックスハイトよりも文字の位置が上に突き出る部分があり『b』『d』のように上に突き出るアルファベットのことをアセンダと言います。

『g』『p』などのようなアルファベットは、エックスハイトよりも文字の位置が下に突き出る部分があり『g』『p』のように下に突き出るアルファベットのことをディセンダと言います。

下記の図を参考にして下さい。

vertical-alignが効かない

vertical-alignとは

vertical-alignとは、行内のテキストまたは、画像の縦位置の方向に揃え位置を指定するプロパティです。

下記のサンプルコードを参考に見ると、左から

baseline…初期位置で、親要素のベースラインに合わせます。
top…行ボックスの上端に合わせます。
middle…親要素の中心に揃えます。
bottom…行ボックスの下揃えに合わせます。
text-top…親要素の文字の上揃えに合わせます。 (テーブルセルへの指定はできません。)
text-bottom…親要素の文字の下端に合わせます。 (テーブルセルへの指定はできません。)
super…上付き文字です。(テーブルセルへの指定はできません。)
sub…下付き文字です。 (テーブルセルへの指定はできません。)

下記のサンプルコードを参考にして下さい。別ウィンドウで開いて大きい画面で見るとわかりやすいです。
 

vertical-alignが効かない

インライン要素以外に適用している

vertical-alignが効かない時の対処法としては、vertical-alignはインライン要素に効くのでブロックレベル要素の『divタグ』や『pタグ』には効かないため、ブロックレベル要素をインライン要素に変更する必要があります。

vertical-alignを指定したい場合には、『divタグ』や『pタグ』にdiplay: inlinediplay: inline-blockをCSSで指定する必要があります。

下記のサンプルコードを参考にして下さい。

display: inline;

.baseline {
  vertical-align: baseline;
  display: inline;
}

CSSの文法ミスや優先順位の問題

またにCSSの文法エラーや優先順位の問題でも効かない場合がありますので、念の為確認することをおすすめします。

詳細は下記を参考にしてみて下さい。

あわせて読みたい
CSSが効かない原因とその対処法を解説!のイメージ
CSSが効かない原因とその対処法を解説!
CSSを更新しても「ブラウザ上でスタイルが効かない!」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場合の原因と対処法について解説しています。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。