CSS[display:none;]知っていると便利!表示・非表示の切替え簡単

公開日：2014/07/13 最終更新日：2022/08/27

CSS 初心者非表示

本日は、CSSの簡単な記述で表示、非表示を切り替える方法を紹介したいと思います。1日だけ、非表示にしておきたい、年末やGW中の時だけ非表示にしておきたいなどショップ運営していく中ではでてくるのではないでしょうか。

javascriptを使って期間限定のイベントバナーなどを表示、非表示切り替える方法について紹介しました。

以前書いた記事

ネットショップ運営の気になる備忘録

バナー画像などを期間指定で表示するjavascript

ショップ運営をしていく中で定期的に同じ内容のものを表示、非表示切り替えたり、ページの特定部分を一時的に非表示にしておきたいことありますよね。

特定の画像だけを非表示にしたい、特定のエリアを非表示にしたいなど色々と汎用性もありますので、覚えていくと便利ですよ。

CSS「display:none;」知っていると意外と便利

ショップを運営していく中でイベントバナーや一定期間だけページの特定部分を一時的に表示したくないってことありますよね。そんな時は、どうしてますか？
削除したい特定部分のタグをコピペで退避させておいて削除するのも１つですが、また元に戻す際に面倒だったり、うまく戻せなくなってしまった経験はありませんか。

そんな時に便利なCSSが「display:none;」という記述です。

はい、これだけ覚えておけばすぐ使えます。

CSSについて知識がある人なら知っていて当たり前かもしれませんが、知らない人からすると意外と便利なのではと思います。

サンプルソース色々非表示

<img style="display:none;" src="画像URL">
 
<div style="display:none;">
  <img src="画像URL1">
  <img src="画像URL2">
  <img src="画像URL3">
</div>
 
<ul>
<li>メニュー1</li>
<li style="display:none;">メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>

1行目：＜img＞タグにstyle=”display:none;”を記述することで画像が非表示になる。

3行目：同様に＜div＞要素に対して記述することで、内側の内容も含めて非表示にすることが出来ます。上の場合は３つの画像も含めて非表示になる。

11行目：＜ul＞内の特定の＜li＞に対して記述した場合は、メニュー2だけが非表示になります。
といった感じで色々な要素に対して非表示設定にすることが可能です。
＜img＞＜TABLE＞＜p＞＜ul＞＜li＞＜div＞などなど様々なタグに対して記述することが可能なので非表示にしたい部分さえ特定できれば簡単に出来るかと思います。
さきほどは、個別にタグに直接記述する方法ですが、CSS部分に記述することも可能です。

CSSに記述する場合

.mybox{
  width:60px;
  color:#fff;
  padding:3px;
  text-align:center;
  font-weight:bold;
  font-size:12px;
  display:none;
}

CSSに記述する場合は、こんな感じになります。ただし、CSSは共通の設定を記述している部分も多いため「display:none;」の記述を追加する場所を間違ってしまうと思いもよらない所まで非表示になる可能性もあるので注意してください。
なので、個別に非表示にしたいタグ部分に記述する方が確実かもしれません。

他の方法：ソース内のコメントにして非表示にする方法

ちなみにですが、さきほどのCSSを使って表示、非表示を切り替える方法とは違う方法になりますが、HTMLタグのソース内のコメントにしてしまう方法もあります。
書き方は
<!– –> でコメントにしたい部分を囲ってやります。
通常このコメントは長いソースなどに説明を入れて他の人がソースを見た際にわかりやすくする時などに使われることが多いのですが、このコメントを使って非表示にしたいタグ全体を囲ってコメントとしてしまうことでブラウザから見た際は表示されなくすることが出来ます。

<!-- イベントバナーの画像は↓↓↓ で入れ替え  -->
<a href="リンク先URL"><img src="画像URL" alt="" /></a>
<!-- ランキングはここから  -->
ランキングの記述・・・・
<!-- 新着商品はここから  -->
新着の記述・・・

通常はこのような感じで使います。

<!-- <a href="リンク先URL"><img src="画像URL" alt="" /></a> -->
<!--
<a href="リンク先URL1"><img src="画像URL1" alt="" /></a>
<a href="リンク先URL2"><img src="画像URL2" alt="" /></a>
<a href="リンク先URL3"><img src="画像URL3" alt="" /></a>
<a href="リンク先URL4"><img src="画像URL4" alt="" /></a>
-->

コメントにしたい前後を<!– –>で囲います。複数行に対しても可能なので非表示にしたいタグの開始、終了部分さえわかれば非表示に出来ますね。

本日紹介した方法は、知っていればそんなの当たり前という内容ですがネットショップ運営を始めたばかりでHTML、CSSについてはよくわかってない、もしくは外注まかせだったりという場合は知っているだけで少しだけ日頃の運営作業が楽になるかもしれません。

お知らせを指定秒数後に消す（非表示）方法について別記事にしています。

ネットショップ運営の気になる備忘録