やっはろー！
今回は、HTMLタグの特徴であるdisplay:block(ブロック要素)とdisplay:inline(インライン要素)について解説していくよ。HTML要素のほとんどが、この2つに分類されるんだ。HTMLとCSSをコーディング、デザインしていく上で、とても大事な要素なので、しっかりと覚えてね！
Contents
displayってなに？
displayとはCSSのプロパティの一つで、要素をどんな状態にして表示するのかを、決めるプロパティになります。このdisplayプロパティの値に当たるのが、blockやinlineになります。
プロパティと値がわからない...という方は、こちらの記事を読んでから続きを読みましょう。
こちらをCHECK
-
-
CSSってなに？初心者でも分かる基本の書き方 : 入門編
続きを見る
blockとは？
読んで字の如く、文章や情報の行全体のまとまりを指しています。pタグやdivタグは、displayの初期値がblock要素になっています。
ここがポイント
HTMLタグの要素、ほとんどにdisplayの初期値が設定されておりblockかinlineに分かれているよ。
display:blockの特徴
実際にdisplayの初期値がblockである、pタグを使って特徴を確認してみましょう。
コードを見てみよう！display:block編
See the Pen xxOKpBo by いしじま (@MUKIRYOKU) on CodePen.
CSSに、background-color・text-align・padding（上下）・margin（上下）の４つのプロパティを使用しています。
display：blockの１番の特徴としては、幅が親要素の幅と同じになり、終了タグの後に改行(見えないです)が入る為、ブロックのように、どんどん縦に並んでいきます。
blockには、他にも特徴があり箇条書きで、まとめておきます。
- 前後に改行が入り縦並びになる
- 幅と高さの指定ができる
- paddingプロパティとmarginプロパティの指定ができる
- text-alignプロパティでテキストの中央表示ができる
- text-alignプロパティで要素の中央表示はできない
- vertical-alignプロパティで指定できない
しっかりと頭に入れておきましょう！
inlineとは？
inlineとは、和訳すると「ラインの中」です。すなわちdisplay:inlineは、文章や情報の行一部のまとまりを表しています。
文章では少し分かりづらいと思うので、特徴と共に次の項目のコードで確認してみてみましょう。
display:inlineの特徴
display:inlineの特徴と意味をコードで確認しましょう。displayの初期値がinlineであるaタグを、pタグ（block要素）の中に入れてみます。
コードを見てみよう！display:inline編
See the Pen MWeWeGy by MUKIRYOKU (@MUKIRYOKU) on CodePen.
pタグに、background-color・text-align のプロパティを使用しています。aタグには、background-colorを使用しています。
pタグとaタグの背景色に注目してください。先に説明したdisplay:blockのpタグは、解説通り背景色が親要素の幅いっぱいなのに対して、display:inlineであるaタグは、マークアップされている部分のみ背景色が付いている事が分かります。この事からもblockは行全体のまとまりであり、inlineは、行一部のまとまりと読み取れると思います。
inlineの特徴も箇条書きで、まとめるので覚えておきましょう！
- 主に文章内に使われる
- 前後に改行は入らず横並びになる
- 基本はblockの中に使われる ※逆に入れることはあまりない
- 幅と高さの指定ができない
- pddingとmarginの左右は指定できる ※上下はできない
- text-alignプロパティで要素の中央表示ができる
- vartical-alignプロパティで要素の指定ができる
blockとinlineの初期値変更は可能なの？
CSSでdisplayプロパティを使用すれば、変更する事ができます。こちらもコードで確認してみましょう。
コードを見てみよう！inlineからblockに変更編
See the Pen JjKjRKB by MUKIRYOKU (@MUKIRYOKU) on CodePen.
HTMLにaタグ。CSSには、display・background-color・text-align のプロパティを使用しています。
display:inlineであるaタグをblockに変更する事で、背景色が親要素の幅いっぱいに伸びました。これでblock要素として扱う事ができます。
HTMLをマークアップする時、この特性を意識するとマークアップ言語の理解や上手く反映されない時の対処、記述スピードが格段にあがるよ。
displayプロパティその他の値について
displayには、blockとinline以外にもinline-blockやflex、noneなど様々な値があります。今回解説したblockとinlineの中間的な要素であるinline-blockと基本中の基本であるnoneを最後に解説しようと思います。
ここがポイント
初心者の方は、block、inline、inline-block、noneの4つから覚えよう！
display:inline-blockとは？
その他の値でも述べた様にblock要素とinline要素の中間にあります。何が中間なのか、blockとinlineをいれて表にしたので、見比べてみてください。
| 値 | block | inline | inline-block |
|---|---|---|---|
| 要素の 並び方 | 縦並び | 横並び | 横並び |
| 幅・高さの 指定 | 指定できる | 指定できない | 指定できる |
| paddingの 指定 | 指定できる | 左右のみ 指定できる | 指定できる |
| marginの 指定 | 指定できる | 左右の 指定できる | 指定できる |
| text-alignの 指定 （要素） | 指定できない | 指定できる | 指定できる |
| vartical -align | 指定できない | 指定できる | 指定できる |
この様に、blockでできない事やinlineでできない事が、inline-blockだと出来る様になります。コードでも確認してみましょう。
コードを見てみよう！display:inline-block編
See the Pen bGeGXRV by MUKIRYOKU (@MUKIRYOKU) on CodePen.
pタグを使用してblock要素をinline-blockに変更しています。違いが分かりやすい様に、変更したpタグの下にblock要素に戻したpタグも記載しているので、比較して見てください。
ここがポイント
inline-blockを初期値で持っているタグがないので、displayプロパティで設定しないと使用できないよ。
inline-blockの使い所としては、たくさんの要素を横並びにした時に使うとレイアウトしやすいよ。意外と横並びって、むずかしいんだよなぁ。
display:noneとは？
最後にnoneの解説ですが、これは結構使う基本の値なのですが、使い方は至ってシンプルです。隠したい要素を消す事ができます。
こちらもコードで確認してみましょう。
コードを見てみよう！display:none編
See the Pen bGeNbEW by MUKIRYOKU (@MUKIRYOKU) on CodePen.
この様にnoneを使うと要素自体を消す事ができます。
これ使うなら書かなければよくない？
私も最初そう思いまいた。しかし学習を続けて行くと、画像のスライドなどJavascriptと合わせて使う事になります。要素って消す事ができる。という事は、覚えておきましょう！
まとめ
displayの使い方とblock・inline・inline-blockの違いは理解できたでしょうか？慣れないとあれ？これmargin効かないの？センターに寄せれないなど出てくると思います。自らコードを書いて色々と試しながら覚えて行くのも良いと思います。今回はblockなどの基本を解説しましたが、Webサイト制作に欠かせないdisplay:flexも応用編として、記事にしたいと思います。
とdisplay:inline(インライン要素)について解説していくよ。HTML要素のほとんど){kind=link}