にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定する方法 [テキスト]

強調する目的で文字サイズを大きくするなど、1行の中に「大きさの異なる文字」が現れることがあります。そのとき、それぞれの文字の表示位置は、標準ではベースラインに合わせて揃えられます。(※ベースラインとは、英字の場合だと「大文字の下端」です。小文字の「g」や「y」などは、ベースラインよりも少し下にはみ出て表示されます。)

しかし、場合によっては、(ベースラインで揃えるのではなく)縦方向の中央に寄せて表示させたい場合もあるでしょう。または、行の上端に揃えたい場合もあるかも知れません。そのように、1行の中に大きさの異なる文字があるときに、(縦方向で)『どの位置で文字を揃えたいか』を指定できるプロパティとして、CSSには「vertical-align」プロパティがあります。

使い方は簡単で、以下のように記述します。

span {
   vertical-align: (縦方向の位置を表すキーワード);
}

縦方向の位置を表すキーワードには、デフォルトである「baseline」のほか、「top」や「bottom」など様々な値が用意されています。詳しくは、後述します。

大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定する例

ここでは、縦方向で揃えられる位置が分かりやすいように、若干大きめの文字サイズで表示してみます。具体的には、標準で15ptの大きさで表示されている段落内に、大きめの文字として24pt、小さめの文字として9ptの文字を含めています。
何がどう配置されるのかが分かりやすいように、それぞれに色を付加しています。色の詳細は以下の通りです。

  • ブロック(p要素)内は、背景黄色
  • ブロック(p要素)内の親要素(span要素)は、緑色背景に白色文字
  • 大きめの文字(em要素)は、30%透過の淡い青色背景に、青色文字
  • 小さめの文字(em要素)は、30%透過の淡い赤色背景に、赤色文字

※RGBAカラーモデルに対応していない古いブラウザでは、透過背景は見えません。

vertical-alignプロパティは、em要素に対して指定しています。
各値を指定した場合の表示例は以下の通りです。

vertical-align: baseline; 親要素のベースラインに揃える(デフォルト)

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: middle; 親要素のミドルラインに揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: top; 行の上端に揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: text-top; (※)親要素のテキストの上端に揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: bottom; 行の下端に揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: text-bottom; (※)親要素のテキストの下端に揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: sub; (※)親要素の下付き文字のベースラインに揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: super; (※)親要素の上付き文字のベースラインに揃える

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: 50%; 親要素のベースラインを基準に、行の高さ(line-heightプロパティの値)に指定割合を掛けた分だけ上下に移動(値がマイナスだと下に移動)

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

vertical-align: -15px; 親要素のベースラインを基準に、指定した量だけ上下に移動(値がマイナスだと下に移動)

文章内のHuge大文字とかTiny小文字の縦方向の表示位置を調整。

上記のサンプルでは、所々にアイコンフォントを使ったアイコン()も掲載してあります。行内にアイコンフォントを使ってアイコンを表示する場合にも、アイコンの(上下方向の)配置を調整したいことが多いような気がします。

ブロックレベル要素には使えないので注意

vertical-alignプロパティの使い方は上記の通り簡単なのですが、使いどころには制限があります。ブロックレベル要素には使えない点に注意して下さい。つまり、p要素やdiv要素に対してvertical-alignプロパティを指定しても無視されるということです。
vertical-alignプロパティを適用できるのは、インライン要素と、テーブルセル要素のみです。(ただし、「(※)」記号を付加した値はテーブルセルに対しては適用できません。)

vertical-alignプロパティは、

  • ブロックに対して指定して「このブロック内に含まれる要素の上下方向の配置」を指定するわけではなく、
  • インライン要素に指定して、「このインライン要素はどう配置するか」を指定します。

意図通りの配置にならない場合

line-heightプロパティ(行の高さ)の値によっても配置が異なってきますので、「どうも予想通りの配置になってくれない」という場合は、親要素などに適用されているline-heightプロパティの値も確認してみて下さい。一旦、その指定を削除してみて、見栄えがどう変化するのかを確認してみると良いと思います。

なお、使用するフォントによって見え方が若干異なるような気がします。(^_^;)
特に「メイリオ」みたいなフォントの高さが独特なフォントだと、その他のフォントよりも若干見栄えが違う気がします。まあその辺は、自分の使いたいフォントで表示確認をしてみつつ、指定してみて下さい。多少見栄えが違うとは言え、配置の方針は同じ(=「上端」を指定しているのに下端に表示されたりはしない)ですから。

サンプルのソース

最後に、上記のサンプルで使ったHTMLとCSSソースの例を掲載しておきます。
vertical-alignプロパティは、(インライン要素である)em要素に適用しています。
em要素を使った理由はあまりありませんが、親要素をspan要素にしたので、同じspan要素は使わないでおこう、と思っただけです。

■HTMLソース:

<p>
   <span>
      文章内の
      <em class="huge">Huge大文字</em>
      とか
      <em class="tiny">Tiny小文字</em>
      の縦方向の表示位置を調整。
   </span>
</p>

■CSSソース:

p {
   font-size: 15pt;
   background-color: #ffeecc;
   line-height: 1.3;
}
p span {
   background-color: #008000;
   color: white;
}
p em {
   font-style: normal;
   vertical-align: baseline;
}
p em.huge {
   font-size: 24pt;
   color: #0000cc;
   background-color: rgba(204,204,255,0.7);
}
p em.tiny {
   font-size: 9pt;
   color: #cc0000;
   background-color: rgba(255,204,204,0.7);
}

vertical-alignプロパティは12行目にあります。上記では値を「baseline」にしてありますが、この値を他のキーワードに修正することで様々な配置に変更できます。

というわけで、大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定するための「vertical-align」プロパティの解説でした。
異なる大きさの文字を混在させたときや、アイコンフォントを使った際など、行内の上下方向の表示位置を調整したくなったら使ってみて下さい。

《2016/03/10 11:21 改訂》
《2014年6月3日 10:55 初版公開》

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連書籍など

--- 当サイト内を検索 ---