【display】要素の表示形式

displayプロパティで要素の表示形式を設定する

displayプロパティを使用すると、要素の表示形式を設定することができます。

たとえば、

• インライン要素をブロックレベル要素のように表示させる
• ブロックレベル要素をインライン要素のように表示させる

というようなことができます。

displayプロパティには、下記のキーワードを指定することができます。

ここでは、使用頻度が高そうなinline、block、noneについてまとめておきます。

inline

displayプロパティにinlineを指定すると、インライン要素と同じ表示になります。

inlineは、li要素を使って横並びのメニューを作成するときに使用されることが多いです。

通常、li要素はこのような表示になります。

これにinlineを指定してみると、インライン要素と同じように横並びで表示されます。

block

displayプロパティにblockを指定すると、ブロックレベル要素と同じ表示になります。

通常、img要素を並べると、画像が横並びで表示されます。

none

displayプロパティにnoneを指定すると、要素が非表示になります。

displayプロパティのnoneは、visibilityプロパティのhiddenとは異なり、表示領域が確保されません。

【visibility】ボックスの表示・非表示CSSでボックスの表示・非表示の設定をするvisibilityプロパティについてザックリとまとめました。...

画像を2つ並べて、

要素の表示形式のまとめ

今回は要素の表示形式についてまとめました。

inline、block、noneは、スクールの授業でも出てきたので使用頻度が高そうです。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。