ブロック要素とインライン要素の違いとは？インラインブロックで解決！

2019年9月21日 2021年1月27日

xxsuguruxx

1 あらすじ
2 ブロック要素とは
3 ブロック要素の形
4 ブロック要素の特徴とは
5 ブロック要素代表例10選
6 インライン要素とは
7 インライン要素の形
8 インライン要素の特徴
9 インライン要素代表例10選
10 inline-block(インラインブロック)
11 まとめ

あらすじ

ブロック要素やインライン要素とはhtmlではよく耳にする言葉です。

しかし、html初心者の人やhtmlの知識が浅い人にとっては少し理解に苦しむこともあるかと思います。

今回はそんな方達に向けて、ブロック要素やインライン要素とは何なのか詳しく説明していきたいと思います。

具体的には

ブロック要素とは
ブロック要素の形
ブロック要素の特徴とは
ブロック要素代表例10選
インライン要素とは
インライン要素の形
インライン要素の特徴とは
インライン要素代表例10選
inline-block(インラインブロック)

といった項目でご紹介していきます。

ブロック要素とは

ブロック要素とは、一つのかたまりとして認識される要素です。

チェック！ブロック要素は必ず新しい列で始まります。

例えば、

<body>
  <p>こんにちは</p><div>日本</div>
</body>

といったように、ブロック要素であるpタグとdivタグを横に並べても、二つともブロック要素であることから、divタグは新たな列に表示されます。

こんにちは日本

ではなく

こんにちは

日本

と表示されることになります。

ブロック要素の形

ブロック要素とは実際にはどのような形になるのでしょうか。

下記の例を見てみましょう。

See the Pen
wvwQjKN by 萩原英 (@suguru1989)
on CodePen.

ご覧いただいた通り、2つのブロックができているのがお分かりいただけたかと思います。

ここが後で説明するインライン要素と大きく異なる要素の一つです。

ブロック要素の特徴とは

ブロック要素の特徴として、

margin(要素の外側の幅)
padding(要素の内側の幅)
height(要素の高さ)
width(要素の幅)

といったCSSプロパティを自由に反映させることができます。

See the Pen
pozQVbv by 萩原英 (@suguru1989)
on CodePen.

上記の例では、CSSプロパティがブロック要素に反映されているのがお分かりいただけるかと思います。

ブロック要素代表例10選

ブロック要素はもっとたくさんありますが、ここではよく使うものを10個選んでご紹介いたします。

<div>：
どんな要素でも囲うことができるタグです。
<header>：
ヘッダー要素を囲うタグです。
<footer>：
フッター要素を囲うタグです。
<nav>：
ナビゲーションメニューを囲うタグです。
<h1>〜<h6>：
見出し要素を囲うタグです。
<p>：
パラグラフ(文)を囲うタグです。
<form>：
フォーム要素を囲うタグです。
<ol>：
番号が振られたタグを囲うタグです。
<ul>：
番号が振られてないタグを囲うタグです。
<table>：
テーブル(表)要素を囲うタグです。

ここであげたタグは全てブロック要素となります。

インライン要素とは

インライン要素とは、文字通りにline(ライン)にin(イン)している要素のことを指します。

ブロック要素とは異なり、列の中に収まる要素のことです。

チェック！ブロック要素が縦に続くのに対し、インライン要素は横に並ぶといったイメージです。

例えば、

<body>
  <p>こんにちは<span style="border-color:red">日本</span>、また明日</p>
</body>

といった場合、ブロック要素とは異なり

こんにちは日本、また明日

と表示されることになります。

インライン要素の形

インライン要素の形はどのようなものになるのでしょう。

下記をご覧ください。

See the Pen
vYBQjXj by 萩原英 (@suguru1989)
on CodePen.

いかがでしょうか。

ブロック要素とは異なり、しっかりと文の中に収まっています。

インライン要素の特徴

インライン要素では基本的にはmarginは左右に反映させることができますが、上下には反映させることができません。

また、paddingは左右に反映させることができますが、上下に指定すると思うように反映できないことがあるので、基本的にはインライン要素でpaddingは使いません。

See the Pen
XWryqpN by 萩原英 (@suguru1989)
on CodePen.

インライン要素代表例10選

インライン要素もたくさん種類がありますが、ここではブロック要素同様によく使用するタグを10個選んでご紹介したいと思います。

<a>：
リンク先を記載するタグです。
<img>：
イメージ(画像)を囲うタグです。
<script>：
javaScriptのコードを囲うタグです。
<q>：
他サイトなどからの引用部分を囲うタグです。
<strong>：
強調させたい文字を囲うタグです。
<i>：
イタリック体(斜体)にしたい文字を囲うタグです。
<b>：
太字にしたい文字を囲うタグです。
<span>：
特定の箇所を装飾したい際に使用するタグです。
<button>：
ボタンを作成する際に使うタグです。
<br>：
改行したい際に使うタグです。

ここで挙げたものは全てよく使うインライン要素です。

ぜひ覚えておきましょう。

inline-block(インラインブロック)

ではインライン要素にはwidthやheightといったものを反映することが絶対にできないのでしょうか。

実は、インライン要素にも幅や高さを指定することができる方法があります。

その方法とは、CSSを使ってdisplayプロパティにてinline-blockと指定してあげることで、インライン要素にも幅や高さを指定することができるようになります。

下記をご覧ください。

See the Pen
pozQVPJ by 萩原英 (@suguru1989)
on CodePen.

いかがでしょうか。

幅や高さが反映されていますね。

このようにインライン要素でありながら、ブロック要素にもなれてしまうのがこのinline-block(インラインブロック)なのです。

ちなみブロック要素やインライン要素に戻したい際は、

ブロック要素
display: block;

インライン要素
display: inline;

と指定するだけです。

まとめ

いかがだったでしょうか。

一見難しく感じますが、一度理解すると簡単な構造となっています。

ブロック要素は縦に表示され、インライン要素は横に表示されると覚えておきましょう。

そして、インラインブロックとは「ブロック要素とインライン要素のいいとこを全て兼ね備えた値」と覚えれば、すんなり覚えられるのではないでしょうか。

合わせて読みたい

HTMLのlist(リスト)タグ、ol、ul、liの使い分け方とは？

2019.8.8

あらすじ htmlには<ol>や<ul>といったリストを作成するためのタグがあります。 htmlについてはこちらをご覧くださいfa-arrow-circle-down 今回はこの<ol>や<ul>それぞれの役割や使い分け方、使う場面などを詳しく解説...

この記事を書いた人

xxsuguruxx

Web Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。