【備忘録】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レッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

323 円 (税込)
著者:エビスコム出版社:ソシムサイズ:単行本ISBN-10:4883377245ISBN-13:9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..
【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

2,138 円 (税込)
■ISBN:9784774182186★日時指定・銀行振込をお受けできない商品になりますタイトル【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっという間にホームページができる! 星野邦敏/著 大胡由紀/..
楽天ウェブサービスセンター CS Shop
トップへ戻る