ホームへ

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

2020年11月23日

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

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

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

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

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

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

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

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

displayhtmlタグ
blockdiv,p,h1,h2,h3,h4,h5,h6,ul,ol,form,option,main,header,footer,section,nav,article,aside,body,html
inlinea,span,img,iframe,video,label,br
inline-blockinput,textarea,select
list-itemli
tabletable
table-row-grouptbody
table-rowtr
table-celltd,th
nonehead,style,script,meta,title,link

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では使えません。

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ