CSS

【display】要素の表示形式

みいと

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

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

たとえば、

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

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

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

inline インライン要素と同じ表示形式になります。
block ブロックレベル要素と同じ表示形式になります。
none ボックスを非表示にします。
inline-block インライン要素と同じ表示形式で表示されますが、要素内容はブロックレベル要素のように複数行表示することができます。
list-item li要素と同じ表示形式になります。
table,
inline-table,
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group,
table-column,
table-cell,
table-caption
それぞれテーブル関連の要素と同じ表示形式になります。
ruby,
ruby-base,
ruby-text,
ruby-base-group,
ruby-text-group
それぞれルビ関連と同じ表示形式になります。

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

inline

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

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

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

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4

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

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4

block

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

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

サンプル画像サンプル画像
img要素のdisplayプロパティにblockを指定すると、ブロックレベル要素のように画像の前後に改行が入ります。
サンプル画像サンプル画像

none

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

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

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

画像を2つ並べて、

サンプル画像サンプル画像
1つ目の画像に、display:noneを設定すると
サンプル画像
1つ目の画像が非表示になって、2つ目の画像がずれて表示されます。
  • display: none;表示領域を確保せずに、要素を非表示にする。
  • visibility: hidden;表示領域を確保して、要素を非表示にする。

要素の表示形式のまとめ

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

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

まとめ

  • displayを使用すると、要素の表示形式を設定できる
  • inlineを指定すると、インライン要素のように表示できる
  • blockを指定すると、ブロックレベル要素のように表示できる
  • noneを指定すると、要素を非表示にできる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました