CSS display:noneの解除方法

こんにちはテイクです。ホームページを作り続けて9年になります。

display:noneを指定すると要素を消すことができます。

「でもdisplay:noneの逆、反対で、表示させる方法ってなんだろう？」

と、display:noneを解除し、再度表示させたいことがあるかと思います。

私もこれまで幾度となくdisplay:noneを解除してきました。display:noneの解除はカンタンです。

CSS display:noneの逆、反対、つまり解除方法、表示方法について解説します。

解除方法1　display:blockで上書き指定する

display:noneを指定すると要素が消えますが、それ以外のdisplayを指定すると表示されます。

「解除」というよりは上書きですが、とりあえずdisplay:blockにしてみましょう。

displayの種類については以下の記事を参考にしてください。

上書きできないときは優先度で負けている場合があります。「display:block」の優先度を上げましょう。

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

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

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

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

aタグ span

<style>
.example{
    display: none;
    /*コレ*/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　スマホ・PCの切り替えはメディアクエリを使う

display:noneを解除するということは解除しないタイミングがあるわけです。

よく使うのはパソコン版では表示し、スマホ版では非表示にするという方法です。（またはその逆）

そんなスマホ・PCの切り替えをするためのメディアクエリについては下記の記事を参考にしてください。

　

以下の例ではブラウザの幅によって表示・非表示が切り替わります。
実際にブラウザの幅を変えて確かめてみてください。

html

<div class="pc">パソコンだと表示されます</div>
<div class="sp">スマホだと表示されます</div>

CSS

.pc{
    background: #b1dcf7;
    border: 1px solid #999;
}
.sp{
    background: #ffb87c;
    border: 1px solid #999;
}

@media (min-width:750px){
    .sp{
        display: none;
    }
}
@media (max-width:749px){
    .pc{
        display: none;
    }
}

display:noneで上書きするのもありですが、特定の条件のときだけdisplay:noneにするとのありです。

上記の場合はメディアクエリを使い、ブラウザ幅が750以上（PC版）のとき.spを、749以下（スマホ版）のとき.pcをdiplay:noneにしています。

【まとめ】CSS display:noneの逆･反対･解除方法

display:noneを解除するには

display: noneの切り替えをすることでデータは一つのhtmlにしつつ、スマホ版とPC版で別の表現をすることができます。

以上、「CSS display:noneの逆･反対･解除方法」でした。