ホーム(記事一覧)へ

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

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

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

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

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

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

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

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

  • div,h1など:display:block
  • span,aなど:display:inline
  • li:display:list-item
  • table:display:table
  • tbody:display:table-row-group
  • tr:display:table-row
  • td,th:display:table-cell

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

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

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

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

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

div
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を解除する方法でした。

関連記事