マンガでわかるホームページ作成

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」の優先度を上げましょう。

解除方法2 display:initialで解除する

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

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

GoogleアナリティクスなどでIEの割合を確認し少ないようなら使うのもアリです。

現在IEの利用率は下がりつつあります。

当サイトでも使っているとにかく安いサーバーについて紹介します。

スマホ・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以外のdisplayを上書き指定する
  • display:initialで解除する【IEで効かない】
  • メディアクエリで切り替えて必要なときだけdisplay:noneを指定する

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

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

関連記事