今回は、Webページ作成において重要なインライン要素とブロックレベル要素についてご紹介していきます。

Webページを作成する際、HTMLで文字や画像などを表示させ、CSSでフォントサイズや配置などのレイアウトを行っています。実際にWebページをレイアウトする際に、CSSで指定した書式や配置が反映されないといったことがHTML・CSSを学び始めた方によくあります。
このような場合、HTML上で使用されているタグが持っているインライン要素とブロックレベル要素の性質の違いがCSSで命令されているコマンドと一致していない
原因で発生していることが多くあります。
これらの違いを理解することで、Webページのレイアウトがうまくいくようになります。

〇インライン要素
インライン要素とは、文章の一部として扱われる要素です。指定された範囲内の要素が横並びになり高さや幅を設定できない特徴があります。(一部例外あり)
基本的にブロックレベル要素の中で使用され、ブロックレベル要素の内容に効果をもたらす要素が多く含まれています。
インライン要素の代表的なHTMLタグは、<a>、<img>、<select>などがあります。
インライン要素を中央に配置したい場合は、「text-align」プロパティで左右配置、「vertical-align」プロパティで上下配置できるようになります。
※「vertical-align」を使用するには、インライン要素をテーブル化させる必要があります。

〇ブロックレベル要素
ブロックレベル要素とは、コンテンツをまとめる箱のような使い方をする要素です。このブロックレベル要素によってWebサイトの大枠を形作られます。
ブロックレベル要素の代表的なHTMLタグは、<div>、<h1〜h6>、<p>、<form>、<ul>などがあります。
ブロックレベル要素を中央に配置したい場合は、「margin」プロパティの使用のみで中央配置することができます。



以上、インライン要素・ブロック要素についてでした。
参考にしていただけると幸いです。


■参考資料
https://www.itra.co.jp/webmedia/block-inline-difference.html