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プロパティの使い方:

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:

<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>vertical-alignサンプル</title>

    <link rel="stylesheet" href="main.css" />
  </head>

  <body>
    <h2>サンプルコード</h2>
    <div class="main-contents">
        <span class="font-samurai">侍エンジニア</span>
        <span class="vertical-align-top">top</span>
        <span class="vertical-align-middle">middle</span>
        <span class="vertical-align-bottom">bottom</span>
        <span class="vertical-align-text-top">text-top</span>
        <span class="vertical-align-baseline">baseline</span>
        <span class="vertical-align-text-bottom">text-bottom</span>
        <span class="vertical-align-30per">30%</span>
        <span class="vertical-align-20px">20px</span>
    </div>
</body>
</html>

サンプルコード - CSS:

/* 文字全体に下線を引く */
span{
    text-decoration:underline; 
}

/* 文字のあるdivタグに上下線を引く */
.main-contents{
    border-top:solid 1px black;
    border-bottom:solid 1px black;
}

/*「侍エンジニア」の文字サイズを指定 */
.font-samurai{
    font-size:50px;
}

/********** 以下でvertical-alignを設定 **********/
.vertical-align-top{
    vertical-align:top;
    font-size:25px;
    background-color: orange
}
.vertical-align-middle{
    vertical-align:middle;
    font-size:25px;
    background-color: aqua
}
.vertical-align-bottom{
    vertical-align:bottom;
    font-size:25px;
    background-color: orange
}
.vertical-align-text-top{
    vertical-align:text-top;
    font-size:25px;
    background-color: aqua
}
.vertical-align-baseline{
    vertical-align:baseline;
    font-size:25px;
    background-color: orange
}
.vertical-align-text-bottom{
    vertical-align:text-bottom;
    font-size:25px;
    background-color: aqua
}
.vertical-align-30per{
    vertical-align:30%;
    font-size:25px;
    background-color: orange
}
.vertical-align-20px{
    vertical-align:20px;
    font-size:25px;
    background-color: aqua
}

実行結果:

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

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

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

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

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

サンプルコード - HTML

<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>vertical-alignサンプル</title>

    <link rel="stylesheet" href="main.css" />
  </head>

  <body>
    <h2>サンプルコ  ード</h2>
    <div class="main-contents">
        <div class="font-samurai">侍エンジニア</div>
        <div class="vertical-align-top">top</div>
        <div class="vertical-align-middle">middle</div>
        <div class="vertical-align-bottom">bottom</div>
        <div class="vertical-align-text-top">text-top</div>
        <div class="vertical-align-baseline">baseline</div>
        <div class="vertical-align-text-bottom">text-bottom</div>
        <div class="vertical-align-30per">30%</div>
        <div class="vertical-align-20px">20px</div>
        <div class="clear-both"></div>
    </div>
</body>
</html>

サンプルコード - CSS

/* 文字のあるdivタグに上下線を引く */
.main-contents{
    border-top:solid 1px black;
    border-bottom:solid 1px black;
    display:table-cell;
}

/*「侍エンジニア」の文字サイズを指定 */
.font-samurai{
    font-size:50px;
    float: left; /* 並べて表示するために追記 */
}

/********** 以下でvertical-alignを設定 **********/
.vertical-align-top{
    vertical-align:top;
    font-size:25px;
    background-color: orange;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-middle{
    vertical-align:middle;
    font-size:25px;
    background-color: aqua;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-bottom{
    vertical-align:bottom;
    font-size:25px;
    background-color: orange;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-text-top{
    vertical-align:text-top;
    font-size:25px;
    background-color: aqua;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-baseline{
    vertical-align:baseline;
    font-size:25px;
    background-color: orange;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-text-bottom{
    vertical-align:text-bottom;
    font-size:25px;
    background-color: aqua;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-30per{
    vertical-align:30%;
    font-size:25px;
    background-color: orange;
    float: left; /* 並べて表示するために追記 */
}
.vertical-align-20px{
    vertical-align:20px;
    font-size:25px;
    background-color: aqua;
    float: left; /* 並べて表示するために追記 */
}
.clear-both{
    clear: both;
}

実行結果:

このように、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

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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

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

おすすめコンテンツ

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

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