Web プログラミング

【もりけん塾32日目】ブロックレベル要素・インライン要素とdisplayのまとめ

初めてのLP制作依頼の作業をしている、ねこらのん(@nekoranon256)です。

 

LP制作中に「画像をクリックしたらテキスト表示される」方法について調べていたらdisplayの

  • block
  • inline-block
  • inline

の違いについて知らなかったことともりけん先生からできることリストとして上がっていたものなのでまとめました!

 

またharuさん(@fuwafuwahappy)がわかりやすい記事を紹介してくださったので、そちらを参考にまとめていきます!

 

(haruさん、ほんまにやさしい…)

ブロックレベル要素とインライン要素のちがい・使い方

HTMLには要素がいくつかあります。

 

そのHTMLの要素にはブロックレベル要素とインライン要素の2つに分類されるので違いや使い方を表にまとめました。

 

ブロックレベル要素 インライン要素
特徴 改行 あり なし
並び ブロック要素同士が縦配列 インライン要素同士が横配列
横幅・高さ 指定可 指定不可
余白 margiとpadding指定可 指定不可
<margin>
・上下が不可
・左右は可
<padding>
・上下左右は可
・他の要素領域を考慮することなく重ねることが可
要素例 h1〜h6
p
div
ulとol,li
table
form
blockquoteなど
a
span
b
img
input
strong
time など
他要素 ブロックレベル要素/MDNのサイトへ インライン要素/MDNのサイトへ
例外 一部のインライン要素は高さ・幅・余白を設定できる性質あり
<一部の要素>
img
textarea
input
select など

ブロックレベル要素でもCSSのdisplayを使って表示を変更することが可能。

ブロックレベル要素

引用:MDN

ブロックレベル要素は上記のように複数あります。

 

インライン要素

引用:MDN

インライン要素は上記のように複数あります。

 

おまけ:ブロックレベル要素の『div』とインライン要素の『span』のちがい

divとspanの違いの認識はdivは『まとまり』でspanは『文中にある特定の部分の指定』でした。

 

サルワカくん(@saruwakakun)の記事、初心者向けHTML入門:書き方の基本とタグの使い方によると…

 

spanではまとまりの前後に改行が入りません。一方divではまとまりの前後に改行が入ります。

spanのように前後の改行が入らないタグをインライン要素、divのように前後に改行の入るタグをブロック要素と呼びます。

引用:初心者向けHTML入門:書き方の基本とタグの使い方

 

つまり改行される(ブロック要素)のがdivで、改行されない(インライン要素)のがspanということのようです!

 

2つの違いは以下のとおりです。

div span
タグの意味 何も表さない 何も表さない
HTMLのちがい 改行される 改行されない
CSSのちがい display:block display:inline
高さ(height)と幅(width)が指定できる 高さと幅は指定できない
divでまとめられた範囲をデザイン指定できる 文字の装飾に向いている
要素 ブロック インライン
display block内にinlineは入れることが可能 inline内にblock入れない
divはdivを入れることができる spanはspanを入れることができる

 

要素の種類の2つの違いをみていきました。

CSSのプロパティの1つdisplayの6つの値

displayには覚えておきたい頻出の値が以下の6つ。

 

  1. block
  2. inline
  3. inline-block
  4. none
  5. flex
  6. table-cell

 

コードを打っていると頻繁に出てきたので表でまとめていきます。

display: 指定要素を 改行 縦横 余白

高さ
備考
block ブロックレベル要素へ 改行あり 指定可
inline インライン要素へ 改行なし 指定不可
inline-block (ブロックレベル要素+インライン要素)/2
の性質へ
改行なし 指定可
none 非表示へ
flex 最新のレイアウト技法
「フレキシブルボックス}
均等な高さ 古いブラウザは非対応
table-cell tableタグのtdタグへ

 

またflexについては以下の記事が非常にわかりやすかったのでこちらも掲載しておきます!

【フレックスボックス】CSS display:flexの使い方を解説

おわりに

haruさん(@fuwafuwahappy)が教えてくださった記事のおかげでブロックレベル要素とインライン要素、display要素が理解することができました!

 

ググり方がお上手…!

育児をしながら独学されているので限られた短い時間でどうやってググっているのか気になるので、聞いてみようかな!

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada