ブロック要素とインライン要素とは?指定方法を解説!

ブロック要素とインライン要素とは?指定方法を解説!

IT(情報技術)の世界において、Webページを構成しているHTML。

このHTMLで定義されている要素のうち、bodyタグ内の要素の大半はブロックレベル要素かインライン要素かのいずれかとなっています。
この要素の指定によって、各要素の配置などのルールが変わってきますので、今回はその指定方法について詳しく解説していきます。

 

ブロックレベル要素とは何か

ブロックレベル要素とは何か


ブロックレベル要素とは、見出し・段落・表などの文章を構成する基本となる要素です。
1つのブロックと認識され、指定がなければブラウザ上での表示もこのブロック(かたまり)で扱われるため、改行が入ります。HTML5以降、divタグでのCSSレイアウトをするため、displayに指定されることが多くなっています。例えば<divclass=“display:block”>などです。また、HTML5以降ではブロック要素のことはフロー・コンテンツと呼ぶこともあります。

他にも、中央寄せに使われるcenterタグやリストの項目を記述するulやliタグなどにも指定されることがあります。

タグって何?と思われた方は下記の記事を見てから読み進めていただければと思います。
初心者向けHTMLの基礎 タグの意味と使用方法

ひとかたまりの要素となるため、ブロックレベル要素にbackground-colorを指定した場合にはこのかたまり全体に背景色が入ることになります。ただし、widthとheightが指定されていなければ範囲が決まらないため、pxやremなどのサイズを指定する単位で指定するようにしましょう。
上下左右にmarginとpaddingを指定できるのも特徴で、text-alignは要素の中身に適応され、vertical-alignは指定できません。

主なブロックレベル要素は以下のようなものです。
div、p、ul、Li、ol、table、header、main、footer、section、form、h

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

インライン要素とは何か

インライン要素とは何か


インライン要素とは、ブロックレベル要素の内容として指定されることが多い要素です。文章の一部として扱われるものなので、例えば、pタグの中のstrongタグなどがこれにあたります。
指定がなければブラウザ上では基本的に改行が入らず、横並びになる要素となります。
また、widthとheightの指定は基本的にできません。ただし、img、input、textareaなどの一部例外は指定ができるので、ブロック要素と誤解することもあると思います。注意するようにしましょう。

左右にmarginとpaddingを指定することができるのも特徴ですが、上下の指定は画面上に反映されず、他の要素と相殺されることもあります。text-alignを指定できず、代わりにvertical-alignを指定できるようになっています。text-alignは親のブロックレベル要素によって決まるため、そちらに指定しましょう。

なお、HTML5以降ではインライン要素のことはフレージング・コンテンツと呼ぶこともあります。

主なインライン要素は以下のようなものです。
span、a、strong、b、font、img、small、input、br、textarea、u、b

 

ブロックレベル要素とインライン要素の配置ルールとは

ブロックレベル要素とインライン要素の配置ルールとは


ブロックレベル要素とインライン要素の中に入れることができるものは配置ルールとして決まっています。

ブロックレベル要素の中→他のブロックレベル要素か、インライン要素
インライン要素の中→テキストデータか、他のインライン要素

配置ルールは上記の通りで、インライン要素の中にブロックレベル要素を入れることはできません。逆に、ブロックレベル要素の中にインライン要素を入れることは可能なので覚えておきましょう。

インライン要素にwidthとheightの指定が基本的にできないこともルールのひとつですが、このルールで困ることもあります。その解決策については、後ほどinline-blockの解説でお話します。

 

HTML5以降のブロックレベル要素とインライン要素の役割

HTML5以降のブロックレベル要素とインライン要素の役割


HTML5以降では、ブロックレベル要素とインライン要素の分類はなくなりました。用途としては、displayプロパティの状態として、レイアウトを決めるものとして使われています。
displayの値を変更することで、ブロックレベル要素をインライン要素にしたり、インライン要素をブロック要素にしたりできるので、この指定ひとつで設定できるものが大きく変わってきます。
displayに指定される代表的な値は下記になります。

・block
・inline
・inline-block
・flex
・table
・grid
・inline-grid
・none

かたまりとして横並びの配置指定をしたいのではなく、テキストに配置の指定をしたい場合、CSSに記述することになりますが、この時にもブロック要素とインライン要素の考え方が出てきます。詳しくは、下記の記事を参考にすると良いでしょう。

text alignとは?初心者でもわかる意味と使い方

 

よく使われる混合型要素 inline-blockとは?

よく使われる混合型要素 inline-blockとは?


blockとinlineの混合型であるinline-blockはよく使われる要素です。
グローバルメニューなど、横並びのレイアウトに使われることも多いかと思います。

「インライン要素とは」でお話した通り、インライン要素にwidthやheightの設定はできないのですが、そうなると作りたいものが横並びの時に困ってしまいます。
inline-blockであれば、横並びを維持しながらwidthとheightの指定ができますから、作りたいものに合わせて活用していきましょう。

 

ブロックレベル要素とインライン要素は状況に応じて使い分けよう

ブロックレベル要素とインライン要素は状況に応じて使い分けよう

 

ブロックレベル要素とインライン要素の違いをまとめると次のようになります。

・ブロックレベル要素は縦並びで、インライン要素は横並びになる。
・ブロックレベル要素に出来る事とインライン要素に出来る事は違う。
・ブロックレベル要素とインライン要素はHTML5の分類にはなくなったが、displayに対する指定で役割がある重要な要素。

これらのことを踏まえ、違いを整理、理解して適切に使用していきましょう。

 

マーケティングでお悩みでしたら、
Bigmacにお任せください。

バナーlefty
バナー総合
バナー総合
  • この記事を書いた人
  • 最新記事