CSSでvertical-alignプロパティを使って縦軸の位置を変える方法とは?

皆さんは、CSSで画面のテキスト・画像などの縦位置を指定する方法を知っていますか?文字の読みやすさ・画像の見やすさに直結するので、使い方を覚えておくと便利です!そこで今回は、

  • CSSで縦位置を揃えるための、vartical-alignプロパティとは?
  • vartical-alignプロパティの使い方
  • vertical-alignプロパティが使えない例と対処方法について
  • 文字の上下余白を設定するline-heightプロパティとは?

といったように、基礎的なことから応用的な方法まで、徹底的に解説します!

vertical-alignプロパティとは?

まず、vertical-alignプロパティについて簡単に解説します。vertical-alignプロパティとは、テキストの縦軸の位置を指定するためのプロパティです。

上端揃え・中央揃え・下端揃え以外にも、複数の設定方法があります。読みやすさ・使いやすさに直結するプロパティなので、使い方を覚えておくのがおすすめです!

vertical-alignプロパティの使い方

次に、vertical-alignプロパティの使い方について解説します。

vertical-alignプロパティの使い方:

設定値一覧:

No意味使用例
1top行の上端top
2middle行の中央middle
3bottom行の下端bottom
4text-topフォントの上端text-top
5text-bottomフォントの下端text-bottom
6baselineフォントの基準線baseline
7数値 + %指定した数値の位置
・プラスの場合は基準線の上
・マイナスの場合は基準線の下
20% , -30%
8数値 + 単位指定した数値の位置
・プラスの場合は基準線の上
・マイナスの場合は基準線の下
10px , -0.2em

ただこれだけだと、値ごとに表示される位置が、少しわかりにくいですよね。また、topとtext-topの違いや、baselineとmiddleの違いなども、分かりにくいと感じる方が多いと思います。

そこで、わかりやすく解説するための図を用意しました!

vertical-alignの値をわかりやすく解説した図:

上記を確認しつつ実際にCSSでvertical-alignプロパティを使ってみて、意図した結果にならないときのみ「数値 + %」または「数値 + 単位」で直接値を指定して、ちょうどいい位置に設定する流れがおすすめです!

vertical-alignプロパティのサンプルコード

次に、サンプルコードをもとに、具体的な書き方を解説します!

サンプルコード – HTML:

サンプルコード – CSS:

実行結果:

文字のサイズが同じの場合はtext-top、text-bottom、baselineなどに違いが出ないため、「侍エンジニア」の文字と、各設定値に適用した文字のフォントサイズを変えています。このように、簡単に文字の縦軸の位置を指定することができます。

慣れないうちは「background-color」等のプロパティを使って、サンプルのように背景色表示して確認しつつ、位置調整するとやりやすいのでおすすめです!

vertical-alignプロパティが使えない例と対処方法について

ここまで、vertical-alignプロパティの使い方を解説してきましたが、vertical-alignプロパティは、そのままではうまく動かないケースがあります。それが、ブロックレベル要素のタグにvertical-alignプロパティを設定してしまったときです。

先ほどのサンプルを、ブロックレベル要素のdivタグに置き換えたサンプルを用意しました。

サンプルコード – HTML

サンプルコード – CSS

実行結果:

このように、divタグでは、正しくvertical-alignプロパティが動きません。

慣れるまでは難しいかもしれませんが、vertical-alignプロパティを設定して上手くいかなかった時は、ブロック要素になっていないか?を確認することを、頭の片隅に入れておくと良いかもしれません。

ちなみに、「ブロック要素ってなに!!!?」と思った方は、以下で詳しくまとめています!

CSSのdisplay:block;とは?ブロック要素について詳しく解説
更新日 : 2019年7月31日

左揃え・中央揃え・右揃えにする方法とは?

ここまで縦軸の位置を設定するためのvertical-alignプロパティについて解説してきましたが、文字の位置調整をする場合は、横軸に揃えたいときも多いですよね!

そのため、縦軸の位置を変えるvertical-alignプロパティだけでなく、横軸の位置を変えるtext-alignプロパティを合わせて覚えておくのがおすすめです!

text-alignプロパティを含めた、左揃え・中央揃え・右揃えにする方法について以下で徹底的にまとめているので、気になる方は見てみてくださいね!

CSSで左寄せ・中央寄せ・右寄せをする3つの方法
更新日 : 2019年7月6日

まとめ

今回は、文字の縦軸の位置を設定するためのvertical-alignプロパティの使い方について解説してきました。冒頭でも話しましたが、文字の見やすさはアプリの使いやすさに直結します。

「神は細部に宿る」という格言にもありますが、細かいところだからこそ手を抜かないことが重要です。使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説