KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#4 「CSSのdisplayを学ぶ」

この記事をシェアする

今日やったこと

CSSにはdisplayと呼ばれる表示仕様があります。

displayと一言で行ってもその中にもいろいろ種類があるので、今回しっかり学んでいきます。

displayの種類

ちなみに、displayには、block、inline、inline-block、noneの4種類の設定が可能です。

仕様のまとめ

各仕様をまとめると以下のようになる。

f:id:samuraikid520:20180128204120p:plain
引用元:【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

これ見ると結構憂鬱になるけど頑張る。

blockとは

p、div、ul、h1〜h6などのタグには初期値として設定されている。

要素が横いっぱいに広がり、縦に並んでいく仕様になっている。

ちなみに

タグで仕様を確認すると以下のようになる。

f:id:samuraikid520:20180128204720p:plain

block

pタグには初期値として設定されているので、明示的に設定は行っていない。

CSS
.blockTest1 {background: red}
.blockTest2 {background: blue}
HTML
<p>blockの仕様確認</p>
<p class="blockTest1">Test1</p>
<p class="blockTest2">Test2</p>

こんな感じでdisplayの設定は初期値でできるし、明示的に設定する事もできる。

inline

a、span、omgなどのタグの初期値に設定されており、要素が横に並んでいく。

inline-block

こいつがなかなか便利。

要素の並び方はinline、中身はblockな仕様になっている。
ソーシャルボタンの横並びに配置するときに使ったりする。

none

設定した要素を非表示にする。

こんなのいつ使うんだと思っていたが、スポンシブデザインでページを縮めた時に不要な情報を非表示にする時に使えるらしい。結構重要。

まとめ

今回はアウトプット少なめでした。

今まで何気なく使っていたタグにこんな仕様があったとは。