【background-color / background-image】背景色と背景画像の設定
みいと
おじさんのWEBデザイン学習まとめ
【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
興味を持ったものをいろいろと勉強しています。
