displayプロパティ

CSS display property

最近、displayプロパティのことを聞かれて、そこまで理解していなかったので学んでみようと思います。

Definition

The display property specifies the type of box used for an HTML element.

※HTMLの要素のボックスの指定

基本的な内容

Default value: inline(like <span>)
Inherited:  no
Animatable: no
JavaScript syntax:  object.style.display="none"

※親から引き継がないので、何も指定しない場合は常にdisplay: inlineになっているようです

Property Values

  • inline
inline element (like <span>)

※spanとして考えます

  • block
block element (like <p>)

※pとして考えます

block-level flex container

※blockだったのですね

  • inline-block
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

※span内のpとして考えます

inline-level flex container

flexしか知らなかったのですが、flexはblockなので、inlineにしたいときはこれを使うのですね

  • inline-table
inline-level table

※span内のtableとして考えます

  • table
behave like a <table> element

※子は以下のものを使う感じのようです

table-caption    Let the element behave like a <caption> element   
table-column-group  Let the element behave like a <colgroup> element  
table-header-group  Let the element behave like a <thead> element 
table-footer-group  Let the element behave like a <tfoot> element 
table-row-group Let the element behave like a <tbody> element 
table-cell  Let the element behave like a <td> element    
table-column    Let the element behave like a <col> element   
table-row   Let the element behave like a <tr> element
  • none
The element will not be displayed at all (has no effect on layout)

※visibility:hiddenは見えないだけです(has effect on layout)

  • initial
Sets this property to its default value.

※デフォルトのinlineになるようです

  • inherit
Inherits this property from its parent element

※displayプロパティは親から継承されないため、存在するプロパティです

  • その他
list-item    Let the element behave like a <li> element
run-in  Displays an element as either block or inline, depending on context  

※これは使ったことはないですね〜

Block-level Elementsとは

A block-level element always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).

※改行されて、幅一杯になる要素です
※親で横幅を設定されていた場合は横幅一杯はwidth: 80%とかを指します

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

※改行はされません

<span>
<a>
<img>

displayプロパティの注意点

Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is.

So, an inline element with display: block; is not allowed to have other block elements inside it.

※inline要素にdisplay: blockは使う方としておかしいとのことです