【visibility】ボックスの表示・非表示
みいと
おじさんのWEBデザイン学習まとめ
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についてまとめておきます。
displayプロパティにinlineを指定すると、インライン要素と同じ表示になります。
inlineは、li要素を使って横並びのメニューを作成するときに使用されることが多いです。
通常、li要素はこのような表示になります。
これにinlineを指定してみると、インライン要素と同じように横並びで表示されます。
displayプロパティにblockを指定すると、ブロックレベル要素と同じ表示になります。
通常、img要素を並べると、画像が横並びで表示されます。
displayプロパティにnoneを指定すると、要素が非表示になります。
displayプロパティのnoneは、visibilityプロパティのhiddenとは異なり、表示領域が確保されません。
画像を2つ並べて、
今回は要素の表示形式についてまとめました。
inline、block、noneは、スクールの授業でも出てきたので使用頻度が高そうです。