初めてのLP制作依頼の作業をしている、ねこらのん(@nekoranon256)です。
LP制作中に「画像をクリックしたらテキスト表示される」方法について調べていたらdisplayの
- block
- inline-block
- inline
の違いについて知らなかったことともりけん先生からできることリストとして上がっていたものなのでまとめました!
またharuさん(@fuwafuwahappy)がわかりやすい記事を紹介してくださったので、そちらを参考にまとめていきます!
お役に立ててよかったです!
displayプロパティは、個人的にこちらがすごくわかりやすくてブクマしてます🥰https://t.co/Fdf4Km6ul0— haru✍️育児×プログラミング (@fuwafuwahappy) August 9, 2020
(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のように前後に改行の入るタグをブロック要素と呼びます。
つまり改行される(ブロック要素)のが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つ。
- block
- inline
- inline-block
- none
- flex
- table-cell
コードを打っていると頻繁に出てきたので表でまとめていきます。
display: | 指定要素を | 改行 | 縦横 | 余白 幅 高さ |
備考 |
block | ブロックレベル要素へ | 改行あり | 縦 | 指定可 | |
inline | インライン要素へ | 改行なし | 横 | 指定不可 | |
inline-block | (ブロックレベル要素+インライン要素)/2 の性質へ |
改行なし | 横 | 指定可 | |
none | 非表示へ | ||||
flex | 最新のレイアウト技法 「フレキシブルボックス} |
横 | 均等な高さ | 古いブラウザは非対応 | |
table-cell | tableタグのtdタグへ |
またflexについては以下の記事が非常にわかりやすかったのでこちらも掲載しておきます!
【フレックスボックス】CSS display:flexの使い方を解説
おわりに
haruさん(@fuwafuwahappy)が教えてくださった記事のおかげでブロックレベル要素とインライン要素、display要素が理解することができました!
ググり方がお上手…!
育児をしながら独学されているので限られた短い時間でどうやってググっているのか気になるので、聞いてみようかな!
もりけん塾(@terrace_tech)