HTMLの3種類のdisplay要素について
HTMLの表示形式は主に3つに分かれています。
- block
- inline
- inline-block
主にこの3つに分かれていて、この3つの特性をよく理解していないと中央寄せにしたい場合などでどうしていいか分からず混乱してしまいます。初学者の段階でしっかりと理解を深めて行きましょう。
block
ブロック要素の特徴は3つ
- 横幅の大きさは文字数で決まらず、端から端まで広がる
- 自由な高さと幅を指定できる
- 横並びには出来ない
主な要素としては以下です
- <h1>~<h6>
- <p>
- <ul>
- <div>
- <header>,<footer>
- <section>
などなど、文書を覆う一つの塊として扱うという特徴があります。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
このように画面いっぱいに広がり、縦並びで表示されますね。
inline
インライン要素の特徴は2つ
- 高さは指定できない
- 横に展開していき、限界点で折り返す
主な要素としては以下です
- <span>
- <img>
- <a>
- <input>
- <textarea>
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
先ほどと変わり、spanタグで覆ってみました。
要素は横並びに変わり、端で折り返しているのが分かると思います。
CSSにおいても、幅と高さを指定しても、反映されていないのが分かると思います。
※注意点
ブロック要素にインライン要素を入れることは出来ても、インライン要素にブロック要素を入れることはできません。
inline-block
インラインブロック要素はインライン要素のように横に配置されるが、ブロック要素のように幅や高さを指定できます。要は2つのメリットを合体させたものですね。基本的に全ての要素はブロック要素とインライン要素の2つで構成され、インラインブロックを使用するにはCSSでインラインブロック要素を指定するという方法です。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
先ほどの<span>をインラインブロック要素に変えてみました。幅と高さが指定されていますね。
中央揃えの方法
text-align:center;
「text-align:center;」はインライン要素を中央揃えにしたい場合に使用します。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
タイトルが中央揃えになりましたね。
注意すべき点はインライン要素に対しては、その親要素に指定してあげるという点です。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
こちらは本題のspanタグに対して「text-align:center;」をしましたが、変化はありません。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
親要素である<div>に対して「text-align:center;」を指定しましょう。
よくある間違いが画像に対して直接「text-align:center;」を指定しまうケースです。
- 「text-align:center;」は親要素に指定する。
- インライン要素に直接「text-align:center;」を指定しない
margin:0 auto;
「margin:0 auto」は、ブロック要素に対して直接指定する中央寄せのCSSです。
分かりやすいように本題に色を入れています。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
こちらはブロック要素に「margin:0 auto」を指定しましたが、反映されていません。
なぜならブロック要素は幅いっぱいに存在するため、幅を指定しないとそもそも「margin:0 auto」は効きません。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
こんどは「witdh:50%;」でブロック要素に幅を入れてみました。ちゃんと中央揃えになっていますね。
## 縦中央揃え
次は要素を縦に持って行く方法です。
主にこの方法
- line-heightを使用する
- 上下に同じ大きさの余白を指定する
- 「vertical-align:middle」を使う
- positionプロパティを使う「transfotrm:translateY(-50%)」
- flexboxを使う
line-heightを使う
これは主にボタンなどで使用する際によく使用する方法です。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
aタグをインラインブロックで高さと幅を指定できるようにしてあげます。
- heightをしてしてあげる（height:50px;）
- それと同様のline-heightをしてしてあげる（line-height:50px;）
ちなみにこの方法はテキストが2行にわたる場合は使えません。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
2行にわたると、下に同じ高さの分まで折り返してしまうため、注意が必要です。上の例は50px下にはみ出てますね。
上下に同じ余白を指定する
2行に渡る場合などは、「padding」を使用し、要素の内側から均等に余白を付けてあげることで、中央にする方法があります。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
これであれば2行に渡っても中央揃えを維持できます。
「vertical-align:middle」を使う
要素がインライン要素、またはインラインブロック要素の場合は「vertical-align:middle」を使用します。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
positionプロパティを使う。
中央寄せにしたい要素がブロック要素である場合はpositionプロパティを使用します。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
水色のボックス、親要素のboxを「position:relative;」
青色のボックス、子要素のinnerを「position:absolute;」で親子関係にします。
そのうえで、「top:50%;」と「transform:translateY(-50%);」をしてしてあげます。
これで要素が縦中央の位置に配置されます。
上の図のように縦横中央寄せにしたい場合は
top:50%;
left:50%;
transform:translate(-50%,-50%);
とすることで縦横中央寄せになります。
※なぜtransform:translate(-50%,-50%);という指定が必要なのかというと、
これがないと中央になる要素はそれぞれ上端の部分、左端の部分になってしまうからです。
flex-boxを使う
最後にflexboxを用いた手法です。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
親要素に
display:flex;
align-items:center;
これだけです。
さらに横中央揃えしたい場合は、「justify-content:center;」を配置します。
他の指定よりもスマートですね。
display:flex;
align-items:center;
justify-content:center;
おわりに
この3つの要素をちゃんと理解していると中央揃えやレイアウト崩れの原因などにも対処しやすくなるはずです。逆にここを曖昧にしていると、いざ実際の現場でも初歩的な場面で躓くことになるので、この辺はしっかりと覚えておきましょう。