CSS display:blockなどdisplayを解除する方法

display:blockは要素をブロック要素に強制的に変更できるCSSです。

しかし、元に戻したいときがあるかと思います。

displayを解除する方法を解説します。

【方法1】元のdisplayの値で上書きする

残念ながら「これを指定すれば元に戻る」というCSSや値はありません。

元のdisplayの値で上書きしましょう。

例えばaタグをいったんdisplay:blockにした後に元の要素に戻すときはdisplay:inlineで上書きします。

下記はよく使うhtmlタグのブラウザでのdisplay初期値一覧です。

display	htmlタグ
block	div,p,h1,h2,h3,h4,h5,h6,ul,ol,form,option,main,header,footer,section,nav,article,aside,body,html
inline	a,span,img,iframe,video,label,br
inline-block	input,textarea,select
list-item	li
table	table
table-row-group	tbody
table-row	tr
table-cell	td,th
none	head,style,script,meta,title,link

displayは多くの値がありますので下記記事よりご確認ください。

【注意】display:initialはinlineになる

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

ただし、displayにおいてinitialを指定するとhtmlタグに関わらず すべてinline要素になります。

下記は「div,a,span」に「display:initial」を指定した例です。

aタグ span

<style>
.example{
    /*コレ*/display: initial;
    border: 1px solid #999;
    width: 100px;
}
</style>
<div class="example">div</div>
<a href="#" class="example">aタグ</a>
<span class="example">span</span>

すべて横に並んでおり、かつwidthが効いていないことからinline要素であることがわかります。

displayにおいてinitialは使わない方がいいでしょう。

また、initialはdisplayに限らず どのCSSプロパティにも使えますがIEでは使えません。

下記記事で詳しく解説します。

【方法2】メディアクエリで条件指定

これは解除・初期化というより、特定の状態の時だけCSSを指定し、それ以外のときは通常のCSSでいる、というものです。

<style>
@media(min-width:801px){
  a{
  display:block;
  }
}
</style>

上記の場合はブラウザの幅が801px以上の時、つまりパソコン版のとき、aタグをdisplay:blockにするというものです。

そしてブラウザの幅が800px以下のときはこのCSSが無視され通常の状態つまりインライン要素になります。

【まとめ】displayを解除する方法

1. 元のdisplayの値で上書き
2. メディアクエリで条件指定

以上、CSS display:blockなどdisplayを解除する方法でした。