【CSS】displayについて【ブロック要素とは？まとめて解説】

こんにちは。

今回はCSSで良く使う「display」について解説していきます。

指定したところに余白が取れなかったり、中央寄せにならない事がありませんでしたか？

このページを読み終わる頃に以下についての知識がついています↩︎

1. displayとはそもそもなんなのか
2. 要素それぞれの違い
3. 要素の正しい使い方

それでは、今回も自分が学び初めた頃に出会いたかったページになるように分かりやすく解説していきますね。

　

displayとは

まずは、displayの意味について解説していきます。

displayは CSSのプロパティであり、要素の表示する種類を指定します。

これは、要素がどのように配置され、どのような種類になるのかという方法の二つの種類から成り立ちます。

引用元（https://developer.mozilla.org/ja/docs/Web/CSS/display）

外部表示種別

外部表示種別はボックスがどのように表示されるかを定義します。

要素はもともと「通常フロー」で表示されます。

通常フローでの表示というのは、

インライン要素はインライン方向に。つまり、文の中で言葉が表示される方向に表示されます。

ブロック要素は、文の中で言葉が表示される方向の中で段落として一段落後に表示されます。

この通常フローに対して、要素の種類を定義していくのが外部表示種別です。

内部表示種別

内部表示種別はボックスの子要素ががどのように配置されるのかを定義します。

こちらの種類は今回では紹介しきれないので、簡単に紹介してまた違うページで紹介していきます。

代表的な物ですと、「flex」「grid」などがありますがこちらは次回に回します。

　

要素の違いについて

それでは、今回の本題である要素それぞれの違いについて紹介していきます。

今回取り上げる要素は

• ・block
• ・inline
• ・inline-block

この3種類の要素について解説していきます。

他にも種類があるので知りたい方はこちらから。

ブロック(block)要素

まずはブロック要素から見ていきましょう。

通常フローでブロック要素の例を紹介します。

これはすぐに覚えようとはせずに使っていく中で覚えていきましょう。

では、実際にブロック要素の特徴を紹介します。

1. ブロック要素は前後で改行され縦に表示される
2. 親要素の幅いっぱいに広がる
3. 幅(width)や高さ(height)を指定する事ができる
4. marginやpaddingなどで余白を指定する事ができる

文字だけだと分かりづらいと思うので画像を用意しました。

<h1>要素1</h1>
<h1>要素2</h1>

ページ幅いっぱいに広がりながら縦に並びます。

インライン（inline）要素

次にインライン要素です。

インライン要素は基本的にブロック要素の中に記述する要素です。

<p><span>Hello!<span><p>

正しい例です。

<span><p>Hello!<p><span>

誤った例です。

このルールは覚えておきましょう。

では、実際にインライン要素の特徴を紹介します。

1. ブロック要素のように改行されず横に表示される
2. 要素の幅は文字の幅
3. 幅(width)や高さ(height)を指定できない
4. marginやpaddingなどで余白は左右のみ指定できます

　　

こちらも画像を見てみましょう。

コードはこちらです。インライン要素であるspanタグで記述しました。

<span>要素1</span>
<span>要素2</span>

先ほど紹介したブロック要素と比べると分かりやすいですね。

文字幅分の要素で横並びになっています。

お疲れ様です。これで二つの違いが分かりましたね。

上でもう一つ紹介した「インラインブロック（inline-block）要素はCSSで定義するdisplayの要素なので、通常はブロック要素とインライン要素に区別されます。

ここで、気づいた方もいると思いますが、

インライン要素にも幅を指定したり縦に並べたい。

となりますよね。

この問題を解決してくれるのがdisplayプロパティです。

CSSで「display: ;」を使ってコーディングをしていくというわけです。

では、見ていきましょう。

displayプロパティの違い

今回は、幅や余白の問題を解決できる

1. display: block;
2. display: inline-block;
3. display: inline;

の3つの違いを解説していきます。

　　

分かりやすくまとめてみました。

これで要素の並べ方が理解できたのではないでしょうか。

他にも、インライン要素とインラインブロック要素だと、

text-alignプロパティで中央寄せなど配置ができたり、

ブロック要素はmarginを使って配置するなどの方法があります。

これはまた別のページで紹介します。

　　

まとめ

今回はブロック・インラインブロック・インライン要素について解説していきました。

おまけですが、

もともとインライン要素である<a>タグでボタンを作る事があると思います。

通常クリックできる範囲はインライン要素なのでテキストの範囲ですが、

その様な時aタグにブロック要素を指定するとテキスト以外もクリック範囲に広がります。

　

それでは今回は以上になります。