【備忘録】CSSの「display:none;」と「visibility: hidden;」の違い

WordPressはサイトやブログを作る上での基本的な機能は備わっていて、かつ、カスタマイズしようと思えば比較的簡単にできるようになっているので「そうだ!これやろう!!」が実現しやすいサイト作成ツールですよね?

私はこのツールに出会う前までは無料のブログサービスでちょこっとカスタマイズして使う程度でした。それが今ではプラグインの紹介記事などを書きつつ中身がちょっと見えるようになり、更には中身をちょっとカスタマイズできるレベルになりました。プログラマーさんみたいに最初からガシガシコード書くなんてレベルには程遠いですけど「好きこそものの上手なれ」とはこのことなんだなぁと実感してます。

そこで今回はCSSで何かの要素を非表示にする「display:none;」と「visibility: hidden;」の違いについて、自身の備忘録を兼ねて紹介しておきたいと思います。

スポンサーリンク

「display:none;」と「visibility: hidden;」の共通点と相違点

この2つのコードはどちらも何かを非表示にすることに違いがありません。

そしてソースを見るとどちらもソース上にはあるけど表示はされないという点でも共通です。

では何が違うんでしょうか??

それは

  1. 「display:none;」は非表示にした場所(スペース)は文字通り「なし」にする
  2. 「visibility: hidden;」は非表示にした場所はぽっかり空白にする

ということです。

試しに同じ要素をそれぞれのコードで非表示にして試してみてください。

例えば
<div class=”a”>1つ目の文章</div>
<div class=”b”>2つ目の文章</div>
<div class=”c”>3つ目の文章</div>
と本文に書いたとして、bというクラスに対してそれぞれのコードでCSSを書いてみると・・・

  1. 「display:none;」の場合はaの文章のすぐ下にcの文章が来る
  2. 「visibility: hidden;」の場合はaの文章の下にbのスペースが空いてcの文章が表示される

んですね。やってみると違いがはっきり分かると思います。

まあこんなことにあまり非表示の要素は使わないと思いますので実用的なところでいけば、横並びになっている3つの箱のうち真ん中を非表示にしたい場合、「display:none;」だと右の箱が真ん中に表示されるのに対して「visibility: hidden;」の場合は真ん中がぽっかり空白になるといった使い方ができます。

・・・という位まだまだ私も素人の仲間(笑)ですが、こうして1つ1つ覚えていき、かつ、メモとして残しておけば、このサイト自体が辞書代わりになる(実際に検索するときもある)・・・と信じて、「こんなこと知ってるし」という意見も臆することなくいろいろと紹介していきたいと思います。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

4,104 円 (税込) 送料込
Rakhitha Nimesh Ratnayake プライム・ストラテジー オライリー・ジャパンワードプレスニヨルウェブアプリケーションカイハツ ラーキサ ニーメシュ ラーネヤク プライム ストラテジー 発行年月:2014年11月26日 予約締切日:2014年11月25日 ページ数:364p サイズ:単行本 I..
【中古】 WordPress 3サイト構築スタイルブック 作例で学ぶ、WordPressのCMS的活用術 / エ・ビ / [単行本(ソフトカバー)]【メール便..

【中古】 WordPress 3サイト構築スタイルブック 作例で学ぶ、WordPressのCMS的活用術 / エ・ビ / [単行本(ソフトカバー)]【メール便..

279 円 (税込)
著者:エ・ビスコム・テック・ラボ出版社:毎日コミュニケーションズサイズ:単行本(ソフトカバー)ISBN-10:4839935416ISBN-13:9784839935412■通常24時間以内に発送可能です。午後3時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,50..
楽天ウェブサービスセンター CS Shop
トップへ戻る