CSS[display:none;]知っていると意外と便利!!要素の表示・非表示の切り替えが簡単に出来る

公開日:  最終更新日:2015/12/16

CSS[display:none;]知っていると意外と便利!!要素の表示・非表示の切り替えが簡単に出来る
javascriptを使って期間限定のイベントバナーなどを表示、非表示切り替える方法について紹介しました。
以前書いた記事


ショップ運営をしていく中で定期的に同じ内容のものを表示、非表示切り替えたり、ページの特定部分を一時的に非表示にしておきたいことありますよね。本日は、簡単な記述で表示、非表示を切り替える方法を紹介します。

スポンサードリンク

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

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

そんな時に便利な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>要素に対して記述することで、内側の内容も含めて非表示にすることが出来ます。上の場合は3つの画像も含めて非表示になる。

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についてはよくわかってない、もしくは外注まかせだったりという場合は知っているだけで少しだけ日頃の運営作業が楽になるかもしれません。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑