ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

効かない?text-alighとvertical-alignの使い方(垂直水平の位置調整)

CSSでコンテンツの位置調整をするときにまず思い浮かぶのがtext-alignとvertical-alignです。

それぞれ水平方向、垂直方向の位置調整をするのに使いますが、
『うまく位置調整できない!』
という声をよく聞きます。

本記事は、CSS初心者の方が、text-alignとvertical-alignを使う時に注意すべきポイントについて解説します。

この記事でわかること

・text-alignを使う時の注意点と効かないときの対処方法
・vertical-alignを使う時の注意点と効かないときの対処方法

text-align

text-alignとは

文字や画像などのコンテンツを配置すると、デフォルト状態では左上から詰めて配置されていきます。

これを中央揃えや右揃えなど、テキストの水平方向の配置をコントロールするのにtext-alignを使います。

  • text-align: left;・・・左揃え(デフォルト状態)
  • text-align:center;・・・中央揃え
  • text-align:right;・・・右揃え

事例をあげると、

HTML

<p style="background-color:#0ff;">
  ワードプレスはシェアNo1のCMSだ。
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

とwebではデフォルトでは左詰めで表示されます。

これをtext-align:center;で中央揃えにすることができます。

HTML

<p style="background-color:#0ff; text-align:center;">
  ワードプレスはシェアNo1のCMSだ。
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

text-alignを使うときの注意点

しかし、画像をセンター配置にしようとtext-align:center;としても、なぜかうまく効かないことがあります。

次のポイントを見逃しているからです。

  • 位置調整の対象はインライン要素である必要がある
  • 位置調整対象の親要素(ブロック要素)にtext-alignは適用する必要がある

インライン要素というのは、テキストのように横並びに表示されるコンテンツをいいます。
<span>や<img>など、テキスト以外にもデフォルト状態で横並びに表示されるHTMLタグもインライン要素です。

それに対してブロック要素というのは、行単位でブロックを形成しているコンテンツです。
例えば<p></p>で囲まれた領域は段落というブロックを形成しています。

先の事例の

<p style="background-color:#0ff; text-align:center;">
  ワードプレスはシェアNo1のCMSだ。
</p>

というHTMLの場合は、

・位置調整の対象・・・"ワードプレスはシェアNo1のCMSだ"というインライン要素
・位置調整したい対象の親要素・・・<p></p>

ですから、親要素である<p>タグにtext-alignを記述することで、その中に入っているインライン要素であるテキストを中央揃えにすることができたわけですね。

text-alignはインライン要素の位置調整に使う、かつ、効かせるのはその親要素

text-alignが効かないときの対処方法

text-alignが効かないのは、次のような間違った方法でtext-alignを使っている場合です。

  • ブロック要素を中央揃えにしようとしている
  • インライン要素そのものにtext-alignを適用している

2つ目のインライン要素そのものにtext-alignを記述するのはそもそも使い方が間違っている、ということはご理解頂けたかと思うので、1つ目のブロック要素のセンター配置について少し解説します。

ブロック要素を中央揃えにしようとしている

次のような構成のコンテンツがあったとします。
シアン色のブロックの中に横幅60px高さ20pxの赤いボックスが入っています。

HTML

<div style="background-color: #0ff">
  <div style="width:60px; height:20px; background-color: red;">
  </div>
</div>

web表示

この赤いボックスをセンター配置しようとtext-align:center;を親要素に記述しても位置は変わりません。

HTML

<div style="background-color: #0ff; text-align:center;">
  <div style="width:60px; height:20px; background-color: red;">
  </div>
</div>

web表示

このように、位置調整したい対象がブロック要素の場合は、text-alignは効かないのです。

ブロック要素をセンター配置するためには

では、どうすればよいかというと、対象ブロックを”インライン要素の特徴を合わせ持ったインラインブロックに変更”すればよいのです。display: inline-block; を使います。

HTML

<div style="background-color: #0ff; text-align:center;">
  <div style="width:60px; height:20px; background-color: red; display: inline-block;"> 
  </div>
</div>

web表示

このように、対象要素をブロック要素からインラインブロック要素に変換すればtext-alignが効くようになります。

ブロック要素をセンター配置とする別の方法として、marginプロパティを使う方法もあります。

margin: 0 auto;

を、センター配置にしたいブロックに適用します。
この方法の方がブロックのレイアウトとしては一般的です。

先のインラインブロック化してtext-alignを適用する方法は、ボタンのレイアウトによく使われます。

vertical-align

vertical-alignとは

text-alignが水平方向の位置調整に使いましたが、vertical-alignは縦方向の位置調整に使います。

といっても、ブロック内の縦方向に自由に動かせるわけではなく、テキストをその行内で縦方向に動かすのに使います。

テキストの位置は、デフォルト値としては行の中でベースラインという架空のラインに沿って表示されています。
これを縦方向に動かすことができるわけです。

  • vertical-align: baseline; ・・・テキストを行のベースラインに揃って表示
    (デフォルト値)
  • vertical-align: top; ・・・テキストを行内のトップに表示
  • vertical-align: middle; ・・・テキストを行内のセンターに表示
  • vertical-align: bottom; ・・・テキストを行内のボトムに表示

vertical-alignと使うときの注意点

vertical-alignは行内の縦方向の位置調整と説明しましたが、その”行”をもう少し具体的に表現すると、”インライン要素”または”表の各セル”となります。すなわち、

  • vertical-alignは、インライン要素内または表のセル内のテキストを縦方向に位置調整するのに使う
  • vertiacal-alignは調整したいインライン要素または表のセルそのものに適用する

text-alignは調整したいインライン要素の親要素に適用しましたが、vertical-alignは調整したいインライン要素そのものに適用する必要があるということですね。

インライン要素への適用例

テキストの一部の文字サイズを変更した事例です。

HTML

<p style="background-color: #0ff">
  ワードプレスは<span style="font-size: 2em;">シェアNo1のCMS</span>だ。
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

文字を大きくした”シェアNo1のCMS”をvertical-align:middle;で行の中央に配置します。

HTML

<p style="background-color: #0ff">
  ワードプレスは<span style="font-size: 2em; vertical-align: middle;">シェアNo1のCMS</span>だ。
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

インライン要素である<span>タグにvertical-alignを適用して位置調整ができました。

表のセルへの適用例

表の事例です。

HTML

<table style="width:80%;">
    <tr style="height: 5em;"><th>1位</th><td>WordPress</td></tr>
    <tr style="height: 5em;"><th>2位</th><td>Shopify</td></tr>
    <tr style="height: 5em;"><th>3位</th><td>Joomla</td></tr>
</table>

web表示

1位WordPress
2位Shopify
3位Joomla

表の行を表す<tr>タグにvertical-align:middle;を適用して、テキストをセル内縦方向の中央に配置します。

HTML

<table style="width:80%;">
    <tr style="height: 5em; vertical-align:middle;"><th>1位</th><td>WordPress</td></tr>
    <tr style="height: 5em; vertical-align:middle;"><th>2位</th><td>Shopify</td></tr>
    <tr style="height: 5em; vertical-align:middle;"><th>3位</th><td>Joomla</td></tr>
</table>

web表示

1位WordPress
2位Shopify
3位Joomla

vertical-alignが効かないときとは

よくある間違いが、ブロック内のテキストの配置を変えようとvertical-alignを使う事例です。

高さが5文字分ある段落ブロックにテキストが入っています。

HTML

<p style="height: 5em; background-color: #0ff">
  ワードプレスはシェアNo1のCMSだ。
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

これをvertical-align:middleでテキストをセンターに持ってこようとしてもできません。

HTML

<p style="height: 5em; background-color: #0ff; vertical-align :middle">
  ワードプレスはシェアNo1のCMSだ。
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

こういう場合は、まずテキストをspanタグで囲ってから、テキストの行高さをブロックと同じ5文字分に変更してvertical-align: middle;をかけるとよいでしょう。

HTML

<p style="height: 5em; background-color: #0ff; vertical-align :middle">
  <span style="line-height: 5em; vertical-align: middle;">ワードプレスはシェアNo1のCMSだ。</span>
</p>

web表示

ワードプレスはシェアNo1のCMSだ。

テキストをブロックの高さ方向センターに配置するには、テキストの行高さをline-heightプロパティでブロックと同じ高さにしてからvertical-align:middle; をかける

まとめ

text-alignとvertical-alignについて解説してきました。

text-alignは水平方向、vertical-alignは垂直方向の配置をコントロールするのに使うCSSですが、万能的に配置を変更できるかけでもなく、その使い方にも注意が必要です。

もう一度簡単におさらいすると次の通りです。

  • text-alignはインライン要素の水平位置を調整するのに使い、その親要素(ブロック要素)に適用する
  • vertical-alignは行内のテキストなどを高さ方向に調整するのに使う。その要素自身に適用する。
書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる