Webサイト制作を行なっていると高確率で聞かれる単語「インライン要素」「ブロックレベル要素」
どちらもWebサイト制作には欠かせない知識の一つですが、うろ覚えの人もいるかもしれません。
今回は、基本的な事柄のインライン要素とブロック要素の違いについて紹介していきます。
インライン要素とは
htmlではタグを使いWebサイトを構成しますが、このタグは大きく分けてインライン要素とブロックレベル要素に分けられます。
その中でもインライン要素とは、以下のようなタグを指します。(たくさんありますが、よく使うものだけピックアップします) その他のタグはこちらで確認できます。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements
- <a>
- <b>
- <br>
- <img>
- <span>
- <strong>
インライン要素は続けて記述しても、横並びになるという特徴を持っています。
例えば画像を挿入するimgタグはそのまま記述すれば、画像は横並びで表示されます。
ブロックレベル要素とは
次にブロックレベル要素を見ていきましょう。
ブロックレベル要素は以下のようなタグが挙げられます。(たくさんありますが、よく使うものだけピックアップします) その他のタグはこちらで確認できます。
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
- <div>
- <header>
- <footer>
- <h1,2,3..>
- <hr>
- <ul>
- <li>
- <nav>
- <p>
ブロックレベル要素の特徴としては横並びにならない、つまり続けて記述しても上から下に配置されるという特徴を持っています。
例えば、見出しで使われるhタグは続けて書いても横並びになりませんよね。
配置が思い通りにいかないのは要素の認識違い
インライン要素が横並び、ブロックレベル要素が縦に並ぶという基本的な認識さえ抑えておけば大丈夫のような気もするが、実際はそうはいかない。
インライン要素とブロックレベル要素ではmarginやheightなどの「効き」が異なるからです。
インライン要素
- margin:左右は効かない。上下は効く
- padding:効く
- width:効かない
- height:効かない
ブロックレベル要素
- margin:効く
- padding:効く
- width:効く
- height:効く
ブロックレベル要素はmarginなどで余白を指定したり、widthで幅などを指定できますが、インライン要素は効かないものもあるのでこの点だけ注意しましょう。
インライン要素をブロックレベル化するdisplayプロパティ
インライン要素は使いづらいような気もしますが、インライン要素をブロックレベル要素のように扱うことのできるプロパティも存在します。
displayというもので、以下の4つの値を設定することができます。
- display: inline
- display: block
- display: inlin-block
- display: none
例えばインライン要素に対して、display:blockを使えばその要素はブロックレベルのように扱うことができます。